Skip to content

fix: React adapter behavior has now been fixed #1903

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
crutchcorn merged 5 commits into from
Dec 4, 2025
+32 −8
Merged

fix: React adapter behavior has now been fixed #1903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1c6e1b9
fix: React adapter behavior has now been fixed
crutchcorn Dec 4, 2025
9a1174a
chore: add changeset
crutchcorn Dec 4, 2025
db7c6cf
ci: apply automated fixes and generate docs
autofix-ci[bot] Dec 4, 2025
c859c2f
fix: handleSubmit handled too
crutchcorn Dec 4, 2025
f9dec49
Merge branch 'critical-react-adapter-fix' of https://github.com/TanSt…
crutchcorn Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/wicked-ravens-shout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@tanstack/react-form': patch
'@tanstack/form-core': patch
---

Fix issues with methods not being present in React adapter
11 changes: 8 additions & 3 deletions packages/form-core/src/FieldApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -962,6 +962,11 @@ export type AnyFieldApi = FieldApi<
any
>

/**
* We cannot use methods and must use arrow functions. Otherwise, our React adapters
* will break due to loss of the method when using spread.
*/

/**
* A class representing the API for managing a form field.
*
Expand Down Expand Up @@ -1908,7 +1913,7 @@ export class FieldApi<
/**
* Updates the field's errorMap
*/
setErrorMap(
setErrorMap = (
errorMap: ValidationErrorMap<
UnwrapFieldValidateOrFn<TName, TOnMount, TFormOnMount>,
UnwrapFieldValidateOrFn<TName, TOnChange, TFormOnChange>,
Expand All @@ -1920,7 +1925,7 @@ export class FieldApi<
UnwrapFieldValidateOrFn<TName, TOnDynamic, TFormOnDynamic>,
UnwrapFieldAsyncValidateOrFn<TName, TOnDynamicAsync, TFormOnDynamicAsync>
>,
) {
) => {
this.setMeta((prev) => ({
...prev,
errorMap: {
Expand Down Expand Up @@ -1997,7 +2002,7 @@ export class FieldApi<
/**
* @private
*/
triggerOnChangeListener() {
triggerOnChangeListener = () => {
const formDebounceMs = this.form.options.listeners?.onChangeDebounceMs
if (formDebounceMs && formDebounceMs > 0) {
if (this.timeoutIds.formListeners.change) {
Expand Down
20 changes: 15 additions & 5 deletions packages/form-core/src/FormApi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -870,6 +870,11 @@ export type AnyFormApi = FormApi<
any
>

/**
* We cannot use methods and must use arrow functions. Otherwise, our React adapters
* will break due to loss of the method when using spread.
*/

/**
* A class representing the Form API. It handles the logic and interactions with the form state.
*
Expand Down Expand Up @@ -2016,12 +2021,17 @@ export class FormApi<
return this.validateAsync(cause)
}

// Needs to edgecase in the React adapter specifically to avoid type errors
handleSubmit(): Promise<void>
handleSubmit(submitMeta: TSubmitMeta): Promise<void>
handleSubmit(submitMeta?: TSubmitMeta): Promise<void> {
return this._handleSubmit(submitMeta)
}

/**
* Handles the form submission, performs validation, and calls the appropriate onSubmit or onSubmitInvalid callbacks.
*/
handleSubmit(): Promise<void>
handleSubmit(submitMeta: TSubmitMeta): Promise<void>
async handleSubmit(submitMeta?: TSubmitMeta): Promise<void> {
_handleSubmit = async (submitMeta?: TSubmitMeta): Promise<void> => {
this.baseStore.setState((old) => ({
...old,
// Submission attempts mark the form as not submitted
Expand Down Expand Up @@ -2539,7 +2549,7 @@ export class FormApi<
/**
* Updates the form's errorMap
*/
setErrorMap(
setErrorMap = (
errorMap: FormValidationErrorMap<
TFormData,
UnwrapFormValidateOrFn<TOnMount>,
Expand All @@ -2553,7 +2563,7 @@ export class FormApi<
UnwrapFormAsyncValidateOrFn<TOnDynamicAsync>,
UnwrapFormAsyncValidateOrFn<TOnServer>
>,
) {
) => {
batch(() => {
Object.entries(errorMap).forEach(([key, value]) => {
const errorMapKey = key as ValidationErrorMapKeys
Expand Down
3 changes: 3 additions & 0 deletions packages/react-form/src/useForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,9 @@ export function useForm<
TSubmitMeta
> = {
...formApi,
handleSubmit: ((...props: never[]) => {
formApi._handleSubmit(...props)
Copy link

@vedovelli vedovelli Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Version 1.27.1 introduced a regression in the handleSubmit wrapper that breaks promise handling.

In PR #1903, TanStack converted class methods to arrow functions to fix setErrorMap not being available after spreading. However, the handleSubmit wrapper in useForm.tsx is missing a return statement:

// Current (broken)
handleSubmit: ((...props: never[]) => {
  formApi._handleSubmit(...props)  // Missing return!
}) as typeof formApi.handleSubmit,

This causes:

  • await form.handleSubmit() resolves immediately instead of waiting for submission
  • onError callbacks don't propagate correctly
  • Error state not captured in hooks

Copy link
Member Author

@crutchcorn crutchcorn Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already fixed by: #1924

Just needs to release (will do now)

Copy link

@vedovelli vedovelli Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot!

}) as typeof formApi.handleSubmit,
// We must add all `get`ters from `core`'s `FormApi` here, as otherwise the spread operator won't catch those
get formId(): string {
return formApi._formId
Expand Down
Loading