@tanstack/solid-form 0.16.1 → 0.18.0

package/README.md

@@ -2,7 +2,7 @@
 
 ![TanStack Form Header](https://github.com/TanStack/form/raw/beta/media/repo-header.png)
 
-Hooks for managing form state in Solid
+Signals for managing form state in Solid
 
 <a href="https://twitter.com/intent/tweet?button_hashtag=TanStack" target="\_parent">
   <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/solid-form",
-  "version": "0.16.1",
+  "version": "0.18.0",
   "description": "Powerful, type-safe forms for Solid.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@tanstack/solid-store": "^0.3.1",
-    "@tanstack/form-core": "0.16.1"
+    "@tanstack/form-core": "0.18.0"
   },
   "peerDependencies": {
     "solid-js": "^1.6.0"

package/src/tests/createField.test.tsx

@@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'
 import { render, waitFor } from '@solidjs/testing-library'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom/vitest'
-import { Index, Show } from 'solid-js'
+import { Index, Show, createEffect } from 'solid-js'
 import { createForm, createFormFactory } from '../index'
 import { sleep } from './utils'
 
@@ -386,6 +386,99 @@ describe('createField', () => {
     expect(getByText(error)).toBeInTheDocument()
   })
 
+  it('should handle arrays with primitive values', async () => {
+    const fn = vi.fn()
+
+    function Comp() {
+      const form = createForm(() => ({
+        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) => (
+                <div>
+                  <Show when={field().state.value.length > 0}>
+                    {/* Do not change this to For or the test will fail */}
+                    <Index each={field().state.value}>
+                      {(_, i) => {
+                        return (
+                          <form.Field name={`people[${i}]`}>
+                            {(subField) => (
+                              <div>
+                                <label>
+                                  <div>Name for person {i}</div>
+                                  <input
+                                    value={subField().state.value}
+                                    onInput={(e) => {
+                                      subField().handleChange(
+                                        e.currentTarget.value,
+                                      )
+                                    }}
+                                  />
+                                </label>
+                                <button
+                                  onClick={() => field().removeValue(i)}
+                                  type="button"
+                                >
+                                  Remove person {i}
+                                </button>
+                              </div>
+                            )}
+                          </form.Field>
+                        )
+                      }}
+                    </Index>
+                  </Show>
+
+                  <button onClick={() => field().pushValue('')} type="button">
+                    Add person
+                  </button>
+                </div>
+              )}
+            </form.Field>
+            <button type="submit">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()
 
@@ -428,6 +521,12 @@ describe('createField', () => {
                                     }}
                                   />
                                 </label>
+                                <button
+                                  onClick={() => field().removeValue(i)}
+                                  type="button"
+                                >
+                                  Remove person {i}
+                                </button>
                               </div>
                             )}
                           </form.Field>
@@ -456,13 +555,24 @@ describe('createField', () => {
     )
 
     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 }],
-    })
+    expect(fn).toHaveBeenCalledWith({ people: [{ name: 'John', age: 0 }] })
   })
 })