@tanstack/react-form 0.19.3 → 0.19.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.19.3",
+  "version": "0.19.4",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "@tanstack/react-store": "^0.3.1",
     "decode-formdata": "^0.4.0",
     "rehackt": "^0.0.3",
-    "@tanstack/form-core": "0.19.3"
+    "@tanstack/form-core": "0.19.4"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"

package/src/tests/useField.test.tsx

@@ -900,4 +900,61 @@ describe('useField', () => {
     expect(queryByText('Test')).not.toBeInTheDocument()
     expect(await findByText('User')).toBeInTheDocument()
   })
+
+  it('should validate async on submit without debounce', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const mockFn = vi.fn()
+    const error = 'Please enter a different value'
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+        validators: {
+          onChangeAsyncDebounceMs: 1000000,
+          onChangeAsync: async () => {
+            mockFn()
+            await sleep(10)
+            return error
+          },
+        },
+      })
+      const errors = form.useStore((s) => s.errors)
+
+      return (
+        <>
+          <form.Field
+            name="firstName"
+            defaultMeta={{ isTouched: true }}
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+                <p>{errors}</p>
+              </div>
+            )}
+          />
+          <button onClick={form.handleSubmit}>Submit</button>
+        </>
+      )
+    }
+
+    const { getByRole, getByText } = render(<Comp />)
+    await user.click(getByRole('button', { name: 'Submit' }))
+
+    expect(mockFn).toHaveBeenCalledTimes(1)
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
 })