fix(react): form.reset not working inside of onSubmit (#1494)

Author: harry-whorlow

packages/angular-form/tests/tanstack-field.spec.ts

@@ -370,3 +370,52 @@ describe('TanStackFieldDirective', () => {
     expect(getByText(onBlurError)).toBeInTheDocument()
   })
 })
+
+describe('form should reset default value when resetting in onSubmit', () => {
+  it('should be able to handle async resets', async () => {
+    @Component({
+      selector: 'test-component',
+      standalone: true,
+      template: `
+        <ng-container [tanstackField]="form" name="name" #f="field">
+          <input
+            data-testid="fieldinput"
+            [value]="f.api.state.value"
+            (input)="f.api.handleChange($any($event).target.value)"
+          />
+        </ng-container>
+        <button
+          type="button"
+          (click)="form.handleSubmit()"
+          data-testid="submit"
+        >
+          submit
+        </button>
+      `,
+      imports: [TanStackField],
+    })
+    class TestComponent {
+      form = injectForm({
+        defaultValues: {
+          name: '',
+        },
+        onSubmit: ({ value }) => {
+          expect(value).toEqual({ name: 'test' })
+          this.form.reset({ name: 'test' })
+        },
+      })
+    }
+
+    const { getByTestId } = await render(TestComponent)
+
+    const input = getByTestId('fieldinput')
+    const submit = getByTestId('submit')
+
+    await user.type(input, 'test')
+    await expect(input).toHaveValue('test')
+
+    await user.click(submit)
+
+    await expect(input).toHaveValue('test')
+  })
+})

packages/form-core/tests/FormApi.spec.ts

@@ -120,6 +120,25 @@ describe('form api', () => {
     })
   })
 
+  it('form should reset default value when resetting in onSubmit', async () => {
+    const defaultValues = {
+      name: '',
+    }
+    const form = new FormApi({
+      defaultValues: defaultValues,
+      onSubmit: ({ value }) => {
+        form.reset(value)
+
+        expect(form.options.defaultValues).toMatchObject({
+          name: 'test',
+        })
+      },
+    })
+    form.mount()
+    form.setFieldValue('name', 'test')
+    form.handleSubmit()
+  })
+
   it('should reset and set the new default values that are restored after an empty reset', () => {
     const form = new FormApi({ defaultValues: { name: 'initial' } })
     form.mount()

packages/react-form/src/useForm.tsx

@@ -1,6 +1,6 @@
 import { FormApi, functionalUpdate } from '@tanstack/form-core'
 import { useStore } from '@tanstack/react-store'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Field } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type {
@@ -190,9 +190,11 @@ export function useForm<
       TOnServer,
       TSubmitMeta
     > = api as never
+
     extendedApi.Field = function APIField(props) {
       return <Field {...props} form={api} />
     }
+
     extendedApi.Subscribe = function Subscribe(props: any) {
       return (
         <LocalSubscribe
@@ -208,8 +210,6 @@ export function useForm<
 
   useIsomorphicLayoutEffect(formApi.mount, [])
 
-  useStore(formApi.store, (state) => state.isSubmitting)
-
   /**
    * formApi.update should not have any side effects. Think of it like a `useRef`
    * that we need to keep updated every render with the most up-to-date information.

packages/react-form/tests/useForm.test.tsx

@@ -794,4 +794,64 @@ describe('useForm', () => {
 
     expect(fn).toHaveBeenCalledTimes(1)
   })
+
+  it('form should reset default value when resetting in onSubmit', async () => {
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          name: '',
+        },
+        onSubmit: ({ value }) => {
+          expect(value).toEqual({ name: 'another-test' })
+
+          form.reset(value)
+        },
+      })
+
+      return (
+        <form
+          onSubmit={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            form.handleSubmit()
+          }}
+        >
+          <form.Field
+            name="name"
+            children={(field) => (
+              <input
+                data-testid="fieldinput"
+                name={field.name}
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+              />
+            )}
+          />
+
+          <button type="submit" data-testid="submit">
+            submit
+          </button>
+
+          <button type="reset" data-testid="reset" onClick={() => form.reset()}>
+            Reset
+          </button>
+        </form>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    const submit = getByTestId('submit')
+    const reset = getByTestId('reset')
+
+    await user.type(input, 'test')
+    await waitFor(() => expect(input).toHaveValue('test'))
+
+    await user.click(reset)
+    await waitFor(() => expect(input).toHaveValue(''))
+
+    await user.type(input, 'another-test')
+    await user.click(submit)
+    await waitFor(() => expect(input).toHaveValue('another-test'))
+  })
 })

packages/vue-form/tests/useForm.test.tsx

@@ -476,4 +476,55 @@ describe('useForm', () => {
     await waitFor(() => getByText(error))
     expect(getByText(error)).toBeInTheDocument()
   })
+
+  it('form should reset default value when resetting in onSubmit', async () => {
+    const Comp = defineComponent(() => {
+      const form = useForm({
+        defaultValues: {
+          name: '',
+        },
+        onSubmit: ({ value }) => {
+          expect(value).toEqual({ name: 'test' })
+
+          form.reset({ name: 'test' })
+        },
+      })
+
+      return () => (
+        <div>
+          <form.Field name="name">
+            {({ field }: { field: AnyFieldApi }) => (
+              <input
+                data-testid="fieldinput"
+                name={field.name}
+                value={field.state.value}
+                onInput={(e) =>
+                  field.handleChange((e.target as HTMLInputElement).value)
+                }
+              />
+            )}
+          </form.Field>
+
+          <button
+            type="button"
+            onClick={() => form.handleSubmit()}
+            data-testid="submit"
+          >
+            submit
+          </button>
+        </div>
+      )
+    })
+
+    const { getByTestId } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    const submit = getByTestId('submit')
+
+    await user.type(input, 'test')
+    await waitFor(() => expect(input).toHaveValue('test'))
+
+    await user.click(submit)
+
+    await waitFor(() => expect(input).toHaveValue('test'))
+  })
 })