@tanstack/react-form 0.16.1 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "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.16.1"
+    "@tanstack/form-core": "0.18.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0"

package/src/tests/useField.test.tsx

@@ -608,6 +608,102 @@ describe('useField', () => {
     expect(queryByText('A first name is required')).not.toBeInTheDocument()
   })
 
+  it('should handle arrays with primitive values', async () => {
+    const fn = vi.fn()
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          people: [] as Array<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}]`}>
+                          {(subField) => {
+                            return (
+                              <div>
+                                <label>
+                                  <div>Name for person {i}</div>
+                                  <input
+                                    value={subField.state.value}
+                                    onChange={(e) =>
+                                      subField.handleChange(e.target.value)
+                                    }
+                                  />
+                                </label>
+                                <button
+                                  onClick={() => field.removeValue(i)}
+                                  type="button"
+                                >
+                                  Remove person {i}
+                                </button>
+                              </div>
+                            )
+                          }}
+                        </form.Field>
+                      )
+                    })}
+                    <button onClick={() => field.pushValue('')} 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()
+    expect(queryByText('Name for person 1')).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(getByText('Add person'))
+    const input2 = await findByLabelText('Name for person 1')
+    expect(input).toBeInTheDocument()
+    await user.type(input2, 'Jack')
+
+    expect(queryByText('Name for person 0')).toBeInTheDocument()
+    expect(queryByText('Name for person 1')).toBeInTheDocument()
+    await user.click(getByText('Remove person 1'))
+    expect(queryByText('Name for person 0')).toBeInTheDocument()
+    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
+
+    await user.click(await findByText('Submit'))
+    expect(fn).toHaveBeenCalledWith({ people: ['John'] })
+  })
+
   it('should handle arrays with subvalues', async () => {
     const fn = vi.fn()
     function Comp() {
@@ -646,6 +742,12 @@ describe('useField', () => {
                                     }
                                   />
                                 </label>
+                                <button
+                                  onClick={() => field.removeValue(i)}
+                                  type="button"
+                                >
+                                  Remove person {i}
+                                </button>
                               </div>
                             )
                           }}
@@ -680,10 +782,23 @@ describe('useField', () => {
     )
 
     expect(queryByText('Name for person 0')).not.toBeInTheDocument()
+    expect(queryByText('Name for person 1')).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(getByText('Add person'))
+    const input2 = await findByLabelText('Name for person 1')
+    expect(input).toBeInTheDocument()
+    await user.type(input2, 'Jack')
+
+    expect(queryByText('Name for person 0')).toBeInTheDocument()
+    expect(queryByText('Name for person 1')).toBeInTheDocument()
+    await user.click(getByText('Remove person 1'))
+    expect(queryByText('Name for person 0')).toBeInTheDocument()
+    expect(queryByText('Name for person 1')).not.toBeInTheDocument()
+
     await user.click(await findByText('Submit'))
     expect(fn).toHaveBeenCalledWith({ people: [{ name: 'John', age: 0 }] })
   })