canSubmit not updated on first submission failed

[chan9948]

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

Screencast.from.Tuesday.March.18.2025.10_22_45.AM.HKT.mp4

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

[aaronfulkerson]

Thanks for opening this. Experiencing the same issue.

Furthermore, the docs don't accurately describe the canSubmit property of the form state object. In them, the canSubmit property of the form state object is described as a "flag that is false when any field is invalid and the form has been touched". The canSubmit property is also taking the form state object's errors property into account when you use transform with createServerValidate, not just "invalid fields".

[MVaik]

Your example is private btw.

[chan9948]

Your example is private btw.

thank you for your reminder, not sure why that is not working, same code in this repo: https://github.com/chan9948/tanstack-form-nextjs-reproducible-example

[fernandojbf]

I noticed some additional errors:

It seems the example used here (and in the documentation) does not work well with React 19 and Next.js:

• handleSubmit() is triggering the form action regardless of whether validation fails or not.
• Server errors (using action state return) do not update form
• pending state does not work with server actions