@tanstack/react-form 0.10.1 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -53,7 +53,7 @@
   "dependencies": {
     "@tanstack/react-store": "0.1.3",
     "@tanstack/store": "0.1.3",
-    "@tanstack/form-core": "0.10.1"
+    "@tanstack/form-core": "0.10.2"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/src/tests/useForm.test.tsx

@@ -1,9 +1,10 @@
 /// <reference lib="dom" />
+import '@testing-library/jest-dom'
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom'
 import * as React from 'react'
 import { createFormFactory, useForm } from '..'
+import { sleep } from './utils'
 
 const user = userEvent.setup()
 
@@ -173,7 +174,6 @@ describe('useForm', () => {
           return error
         },
       })
-
       return (
         <form.Provider>
           <form.Field
@@ -202,4 +202,298 @@ describe('useForm', () => {
     await waitFor(() => getByText(error))
     expect(getByText(error)).toBeInTheDocument()
   })
+
+  it('should not validate on change if isTouched is false', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        onChange: (value) => (value.firstName === 'other' ? error : undefined),
+      })
+
+      const errors = form.useStore((s) => s.errors)
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  name={field.name}
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.setValue(e.target.value)}
+                />
+                <p>{errors}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    expect(queryByText(error)).not.toBeInTheDocument()
+  })
+
+  it('should validate on change if isTouched is true', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        onChange: (value) => (value.firstName === 'other' ? error : undefined),
+      })
+      const errors = form.useStore((s) => s.errorMap)
+      return (
+        <form.Provider>
+          <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.onChange}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate on change and on blur', async () => {
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          firstName: '',
+        },
+        onChange: (vals) => {
+          if (vals.firstName === 'other') return onChangeError
+          return undefined
+        },
+        onBlur: (vals) => {
+          if (vals.firstName === 'other') return onBlurError
+          return undefined
+        },
+      })
+
+      const errors = form.useStore((s) => s.errorMap)
+      return (
+        <form.Provider>
+          <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.onChange}</p>
+                <p>{errors.onBlur}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    await user.click(document.body)
+    expect(queryByText(onBlurError)).toBeInTheDocument()
+  })
+
+  it('should validate async on change', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const error = 'Please enter a different value'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        onChangeAsync: async () => {
+          await sleep(10)
+          return error
+        },
+      })
+      const errors = form.useStore((s) => s.errorMap)
+      return (
+        <form.Provider>
+          <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.onChange}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(queryByText(error)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
+
+  it('should validate async on change and async on blur', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const onChangeError = 'Please enter a different value (onChangeError)'
+    const onBlurError = 'Please enter a different value (onBlurError)'
+
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        onChangeAsync: async () => {
+          await sleep(10)
+          return onChangeError
+        },
+        onBlurAsync: async () => {
+          await sleep(10)
+          return onBlurError
+        },
+      })
+      const errors = form.useStore((s) => s.errorMap)
+
+      return (
+        <form.Provider>
+          <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.onChange}</p>
+                <p>{errors.onBlur}</p>
+              </div>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText, queryByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+
+    expect(queryByText(onChangeError)).not.toBeInTheDocument()
+    expect(queryByText(onBlurError)).not.toBeInTheDocument()
+    await user.type(input, 'other')
+    await waitFor(() => getByText(onChangeError))
+    expect(getByText(onChangeError)).toBeInTheDocument()
+    await user.click(document.body)
+    await waitFor(() => getByText(onBlurError))
+    expect(getByText(onBlurError)).toBeInTheDocument()
+  })
+
+  it('should validate async on change with debounce', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const mockFn = vi.fn()
+    const error = 'Please enter a different value'
+    const formFactory = createFormFactory<Person, unknown>()
+
+    function Comp() {
+      const form = formFactory.useForm({
+        onChangeAsyncDebounceMs: 100,
+        onChangeAsync: async () => {
+          mockFn()
+          await sleep(10)
+          return error
+        },
+      })
+      const errors = form.useStore((s) => s.errors)
+
+      return (
+        <form.Provider>
+          <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>
+            )}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, getByText } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    await user.type(input, 'other')
+    // mockFn will have been called 5 times without onChangeAsyncDebounceMs
+    expect(mockFn).toHaveBeenCalledTimes(0)
+    await waitFor(() => getByText(error))
+    expect(getByText(error)).toBeInTheDocument()
+  })
 })