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

オープン
  • 何か問題がありますか？
#1,990 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

  • #1997 @Dhavanesh24cs412 による — マージされずにクローズ

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
react, typescript
領域
frontend

調査の方向性

FormApi.js の 462 行目付近にある handleSubmit のチェックから始め、内部の state.canSubmit の値と React の例で示される form.state.canSubmit の値を比較します。無効なデフォルト値のケースを再現し、canSubmit と isValid が false の場合に handleSubmit を呼び出すと onSubmitInvalid が呼び出されることを確認します。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
6.8k
フォーク
705
平均マージ
1日 12時間
マージ済み PR（30日）
14

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

TanStack/form のほかの issue

TanStack/form の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。