@tanstack/react-form 0.13.6 → 0.14.0

package/src/tests/useField.test-d.tsx

@@ -1,5 +1,5 @@
-import { assertType } from 'vitest'
 import * as React from 'react'
+import { assertType, it } from 'vitest'
 import { useForm } from '../useForm'
 
 it('should type state.value properly', () => {
@@ -12,7 +12,7 @@ it('should type state.value properly', () => {
     } as const)
 
     return (
-      <form.Provider>
+      <>
         <form.Field
           name="firstName"
           children={(field) => {
@@ -25,7 +25,7 @@ it('should type state.value properly', () => {
             assertType<84>(field.state.value)
           }}
         />
-      </form.Provider>
+      </>
     )
   }
 })
@@ -40,7 +40,7 @@ it('should type onChange properly', () => {
     } as const)
 
     return (
-      <form.Provider>
+      <>
         <form.Field
           name="firstName"
           validators={{
@@ -61,7 +61,7 @@ it('should type onChange properly', () => {
           }}
           children={() => null}
         />
-      </form.Provider>
+      </>
     )
   }
 })

package/src/tests/useField.test.tsx

@@ -1,11 +1,10 @@
-/// <reference lib="dom" />
 import * as React from 'react'
+import { describe, expect, it, vi } from 'vitest'
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom'
-import { createFormFactory } from '../index'
+import { createFormFactory, useForm } from '../index'
 import { sleep } from './utils'
-import type { FormApi } from '../index'
+import type { FieldApi, FormApi } from '../index'
 
 const user = userEvent.setup()
 
@@ -27,7 +26,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             children={(field) => {
@@ -41,7 +40,7 @@ describe('useField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -67,7 +66,7 @@ describe('useField', () => {
       })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue="otherName"
@@ -82,7 +81,7 @@ describe('useField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -101,10 +100,15 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             validators={{
@@ -123,7 +127,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -143,10 +147,15 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -166,7 +175,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -188,10 +197,15 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -215,7 +229,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -239,10 +253,15 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -265,7 +284,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -288,10 +307,15 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -319,7 +343,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -346,10 +370,15 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
 
     function Comp() {
-      const form = formFactory.useForm()
+      const form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
 
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultMeta={{ isTouched: true }}
@@ -374,7 +403,7 @@ describe('useField', () => {
               </div>
             )}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -395,9 +424,14 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
     let form: FormApi<Person> | null = null
     function Comp() {
-      form = formFactory.useForm()
+      form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue="hello"
@@ -413,7 +447,7 @@ describe('useField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -433,9 +467,14 @@ describe('useField', () => {
     const formFactory = createFormFactory<Person>()
     let form: FormApi<Person> | null = null
     function Comp() {
-      form = formFactory.useForm()
+      form = formFactory.useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+      })
       return (
-        <form.Provider>
+        <>
           <form.Field
             name="firstName"
             defaultValue="hello"
@@ -451,7 +490,7 @@ describe('useField', () => {
               )
             }}
           />
-        </form.Provider>
+        </>
       )
     }
 
@@ -462,4 +501,190 @@ describe('useField', () => {
     const info = form!.fieldInfo
     expect(Object.keys(info)).toHaveLength(0)
   })
+
+  it('should handle strict mode properly with conditional fields', async () => {
+    function FieldInfo({ field }: { field: FieldApi<any, any> }) {
+      return (
+        <>
+          {field.state.meta.touchedErrors ? (
+            <em>{field.state.meta.touchedErrors}</em>
+          ) : null}
+          {field.state.meta.isValidating ? 'Validating...' : null}
+        </>
+      )
+    }
+
+    function Comp() {
+      const [showField, setShowField] = React.useState(true)
+
+      const form = useForm({
+        defaultValues: {
+          firstName: '',
+          lastName: '',
+        },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onSubmit: async () => {},
+      })
+
+      return (
+        <div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              void form.handleSubmit()
+            }}
+          >
+            <div>
+              {/* A type-safe field component*/}
+              {showField ? (
+                <form.Field
+                  name="firstName"
+                  validators={{
+                    onChange: ({ value }) =>
+                      !value ? 'A first name is required' : undefined,
+                  }}
+                  children={(field) => {
+                    // Avoid hasty abstractions. Render props are great!
+                    return (
+                      <>
+                        <label htmlFor={field.name}>First Name:</label>
+                        <input
+                          name={field.name}
+                          value={field.state.value}
+                          onBlur={field.handleBlur}
+                          onChange={(e) => field.handleChange(e.target.value)}
+                        />
+                        <FieldInfo field={field} />
+                      </>
+                    )
+                  }}
+                />
+              ) : null}
+            </div>
+            <div>
+              <form.Field
+                name="lastName"
+                children={(field) => (
+                  <>
+                    <label htmlFor={field.name}>Last Name:</label>
+                    <input
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                    />
+                    <FieldInfo field={field} />
+                  </>
+                )}
+              />
+            </div>
+            <form.Subscribe
+              selector={(state) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <button type="submit" disabled={!canSubmit}>
+                  {isSubmitting ? '...' : 'Submit'}
+                </button>
+              )}
+            />
+            <button type="button" onClick={() => setShowField((prev) => !prev)}>
+              {showField ? 'Hide field' : 'Show field'}
+            </button>
+          </form>
+        </div>
+      )
+    }
+
+    const { getByText, findByText, queryByText } = render(
+      <React.StrictMode>
+        <Comp />
+      </React.StrictMode>,
+    )
+
+    await user.click(getByText('Submit'))
+    expect(await findByText('A first name is required')).toBeInTheDocument()
+    await user.click(getByText('Hide field'))
+    await user.click(getByText('Submit'))
+    expect(queryByText('A first name is required')).not.toBeInTheDocument()
+  })
+
+  it('should handle arrays with subvalues', async () => {
+    const fn = vi.fn()
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          people: [] as Array<{ age: number; name: string }>,
+        },
+        onSubmit: ({ value }) => fn(value),
+      })
+
+      return (
+        <div>
+          <form
+            onSubmit={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+              void form.handleSubmit()
+            }}
+          >
+            <form.Field name="people">
+              {(field) => {
+                return (
+                  <div>
+                    {field.state.value.map((_, i) => {
+                      return (
+                        <form.Field key={i} name={`people[${i}].name`}>
+                          {(subField) => {
+                            return (
+                              <div>
+                                <label>
+                                  <div>Name for person {i}</div>
+                                  <input
+                                    value={subField.state.value}
+                                    onChange={(e) =>
+                                      subField.handleChange(e.target.value)
+                                    }
+                                  />
+                                </label>
+                              </div>
+                            )
+                          }}
+                        </form.Field>
+                      )
+                    })}
+                    <button
+                      onClick={() => field.pushValue({ name: '', age: 0 })}
+                      type="button"
+                    >
+                      Add person
+                    </button>
+                  </div>
+                )
+              }}
+            </form.Field>
+            <form.Subscribe
+              selector={(state) => [state.canSubmit, state.isSubmitting]}
+              children={([canSubmit, isSubmitting]) => (
+                <button type="submit" disabled={!canSubmit}>
+                  {isSubmitting ? '...' : 'Submit'}
+                </button>
+              )}
+            />
+          </form>
+        </div>
+      )
+    }
+
+    const { getByText, findByLabelText, queryByText, findByText } = render(
+      <Comp />,
+    )
+
+    expect(queryByText('Name for person 0')).not.toBeInTheDocument()
+    await user.click(getByText('Add person'))
+    const input = await findByLabelText('Name for person 0')
+    expect(input).toBeInTheDocument()
+    await user.type(input, 'John')
+    await user.click(await findByText('Submit'))
+    expect(fn).toHaveBeenCalledWith({ people: [{ name: 'John', age: 0 }] })
+  })
 })

package/src/tests/useForm.test-d.tsx

@@ -1,5 +1,5 @@
-import { assertType } from 'vitest'
 import * as React from 'react'
+import { assertType, it } from 'vitest'
 import { useForm } from '../useForm'
 
 it('should type onSubmit properly', () => {