TanStack / TanStack/form

canSubmit not updated on first submission failed

Open
#1,300 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: runtime type: undecided v1 v2: needs investigation
Dominant language
TypeScript
Stars
6.7k
Forks
682
Avg merge
5d 18h
Merged PRs (30d)
7

Description

Describe the bug

[UPDATE] this also happen when the server-side validation failed, submit with value "9"(valid in client but not server), same issue happen.

I'm not sure if this is a bug or intented, but If a form-level error is returned from server action in nextjs, the canSubmit property is not updated in the first submission, but it works when you submit the same form again.

return the following from server action to simulate error during processing the form

  return {
    errors: ['Server validation failed'],
    errorMap: { onServer: 'Server validation failed' },
    values: formData,
  }
Your minimal, reproducible example

https://github.com/chan9948/tanstack-form-nextjs-reproducible-example
https://codesandbox.io/p/github/chan9948/tanstack-form-nextjs-reproducible-example/draft/zen-dust

Steps to reproduce
  1. type in a number > 12 (to fulfill the validation), e.g. 99
  2. click submit, you will see the "Server validation failed" message but the submit button is still clickable which canSubmit is true if you print out the state
  3. click the submit again, canSubmit become false so the button is disabled
Expected behavior

I expected canSubmit to become false at the first submit failed.

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/user-attachments/assets/8056391c-a933-499c-913c-4da5fb72e69a

Platform

"@tanstack/react-form": "^1.0.5",
"@tanstack/react-store": "^0.7.0",

TanStack Form adapter

react-form

TanStack Form version

'@tanstack/form-core': 1.1.0

TypeScript version

No response

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked minimal reproducible example or CodeSandbox with @tanstack/react-form and @tanstack/form-core at the reported versions. Reproduce a server-side validation failure on the first submission and trace the form state update; done means canSubmit becomes false immediately after that failed submission.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.