handleSubmit calls onSubmit again while a submit is still pending (since 1.33.1)

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#2,467 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
78/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Báo cáo chỉ ra _handleSubmit và this.baseStore.state.isSubmitting trong @tanstack/form-core; hãy bắt đầu bằng cách lần theo lệnh trả về sớm và bước kiểm tra lần thử gửi được mô tả trong issue. Tái hiện lỗi bằng script Node được cung cấp trên mã hiện tại, sau đó thêm hoặc cập nhật kiểm thử hồi quy cho lần gửi thứ hai khi onSubmit vẫn đang chờ xử lý; công việc được xem là hoàn tất khi onSubmit chỉ được gọi một lần và hành vi gửi lại từ #2120 được giữ nguyên.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Describe the bug

Since #2120 ("clear stale onBlur errors on re-submission", released in 1.33.1), handleSubmit skips its !canSubmit early return on every attempt after the first. canSubmit is also false while a submit is in flight, so a second handleSubmit during a pending onSubmit now runs validation and calls onSubmit again. Up to 1.33.0 that second call returned early.

In practice: a double tap on a submit button, or Enter / the keyboard's "go" pressed twice, sends the request twice. We hit it on a sign-in form and a comment composer in React Native, where the keyboard submit bypasses a disabled button.

Your minimal, reproducible example

No sandbox, it needs only @tanstack/form-core in Node:

// npm i @tanstack/[email protected], then: node repro.mjs
import { FormApi } from '@tanstack/form-core';

const pending = [];
const form = new FormApi({
  defaultValues: { name: 'Ada' },
  onSubmit: () => new Promise((resolve) => pending.push(resolve)),
});
form.mount();

const first = form.handleSubmit();
await new Promise((resolve) => setTimeout(resolve, 0));
console.log('isSubmitting:', form.state.isSubmitting, 'canSubmit:', form.state.canSubmit);

const second = form.handleSubmit();
await new Promise((resolve) => setTimeout(resolve, 0));

console.log('onSubmit calls:', pending.length, '(expected 1)');
pending.forEach((resolve) => resolve());
await Promise.all([first, second]);
Steps to reproduce
  1. Run the script with @tanstack/[email protected]: isSubmitting: true canSubmit: false, onSubmit calls: 1.
  2. Run it with @tanstack/[email protected]: same state, onSubmit calls: 2.
Expected behavior

A handleSubmit that arrives while isSubmitting is true does not call onSubmit again, as before #2120. Keeping the re-submission behaviour #2120 added and also returning early when this.baseStore.state.isSubmitting is true would cover both.

How often does this bug happen?

Every time

Platform
  • @tanstack/form-core 1.33.5 (via @tanstack/react-form 1.33.5)
  • Node 26, and React Native 0.88 / Hermes in the app
TanStack Form adapter

react-form

TanStack Form version

1.33.5

TypeScript version

5.9

Additional context

The change is in _handleSubmit: if (!this.state.canSubmit && ...) { if (this.baseStore.state.submissionAttempts <= 1) { ...; return; } }. We now wrap onSubmit in a single-flight guard on our side.

Ngôn ngữ chính
TypeScript
Star
6.8k
Fork
705
Merge trung bình
1 ngày 6 giờ
Pull request đã merge (30 ngày)
12

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/form

Tất cả issue của TanStack/form

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.