`onSubmitInvalid` not called when `canSubmit` is false (v1.27.7)
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
onSubmitInvalid callback is not being called when the form is invalid and handleSubmit() is invoked, even though canSubmit is false and isValid is false.
This appears to be the same issue as #1696, which was supposedly fixed in PR #1697 (merged September 30, 2025). However, the issue persists in v1.27.7.
Your minimal, reproducible example
import { useForm } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'
import { z } from 'zod'
const schema = z.object({
value: z.number().min(1, 'Value must be greater than 0'),
})
function MyForm() {
const form = useForm({
validatorAdapter: zodValidator(),
defaultValues: { value: 0 },
validators: {
onChange: schema,
onSubmit: schema,
},
onSubmitInvalid: () => {
console.log('onSubmitInvalid called') // This is NEVER called
},
onSubmit: ({ value }) => {
console.log('onSubmit called', value)
},
})
return (
<button
onClick={() => {
console.log('Before handleSubmit:', {
canSubmit: form.state.canSubmit,
isValid: form.state.isValid,
submissionAttempts: form.state.submissionAttempts,
})
form.handleSubmit()
console.log('After handleSubmit:', {
canSubmit: form.state.canSubmit,
isValid: form.state.isValid,
submissionAttempts: form.state.submissionAttempts,
})
}}
>
Submit
</button>
)
}
Steps to reproduce
- Create a form with
onChangeandonSubmitvalidators - Set default values that are invalid (e.g.,
value: 0when validator requiresmin(1)) - Define
onSubmitInvalidcallback - Click the submit button
- Observe that
onSubmitInvalidis never called
Expected behavior
onSubmitInvalid should be called when:
canSubmitisfalseisValidisfalsehandleSubmit()is invoked
How often does this bug happen?
Every time
Screenshots or Videos
Platform
- OS: macOS
- Browser: Chrome
- TanStack Form version: 1.27.7
- TypeScript version: 5.x
TanStack Form adapter
None
TanStack Form version
1.27.7
TypeScript version
5.2.2
Additional context
Looking at the source code in FormApi.js, the check at line ~462 should call onSubmitInvalid:
if (!this.state.canSubmit && !this._devtoolsSubmissionOverride) {
this.options.onSubmitInvalid?.({
value: this.state.values,
formApi: this,
meta: submitMetaArg
});
return;
}
However, it seems like this.state.canSubmit might be reading a stale or different value than what's visible from form.state.canSubmit in React, possibly due to the derived store not being synchronized at the time of the check.
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 in FormApi.js around the handleSubmit check near line 462, comparing the internal state.canSubmit value with the form.state.canSubmit value shown by the React example. Reproduce the invalid-default-value case and verify that invoking handleSubmit calls onSubmitInvalid when canSubmit and isValid are false.
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
- 45/100