`onSubmitInvalid` not called when `canSubmit` is false (v1.27.7)

Abierto
  • ¿Algo no está bien?
#1,990 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

  • #1997 de @Dhavanesh24cs412 — cerrado sin fusionar

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Comienza en FormApi.js, cerca de la comprobación de handleSubmit en la línea 462, comparando el valor interno state.canSubmit con el valor form.state.canSubmit que muestra el ejemplo de React. Reproduce el caso de valor predeterminado no válido y verifica que invocar handleSubmit llame a onSubmitInvalid cuando canSubmit e isValid sean false.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

v1 v2: needs investigation
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
Image
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.

Lenguaje dominante
TypeScript
Estrellas
6.8k
Forks
705
Merge medio
1 d 12 h
PR fusionados (30 d)
14

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/form

Todos los issues de TanStack/form

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.