canSubmit not updated on first submission failed
Nobody has claimed this yet.
- 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
- type in a number > 12 (to fulfill the validation), e.g. 99
- 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
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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