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

1. Create a form with onChange and onSubmit validators
2. Set default values that are invalid (e.g., value: 0 when validator requires min(1))
3. Define onSubmitInvalid callback
4. Click the submit button
5. Observe that onSubmitInvalid is never called

Expected behavior

onSubmitInvalid should be called when:

• canSubmit is false
• isValid is false
• handleSubmit() 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.