Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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
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
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)
}) 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