@tanstack/react-form 0.4.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-form",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Powerful, type-safe forms for React.",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "@tanstack/react-store": "0.1.3",
     "@tanstack/store": "0.1.3",
     "use-isomorphic-layout-effect": "^1.1.2",
-    "@tanstack/form-core": "0.4.1"
+    "@tanstack/form-core": "0.5.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0",

package/src/tests/useField.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import '@testing-library/jest-dom'
-import { createFormFactory } from '..'
+import { type FormApi, createFormFactory } from '..'
 import { sleep } from './utils'
 
 const user = userEvent.setup()
@@ -373,4 +373,80 @@ describe('useField', () => {
     await waitFor(() => getByText(error))
     expect(getByText(error)).toBeInTheDocument()
   })
+
+  it('should preserve value when preserve value property is true', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const formFactory = createFormFactory<Person, unknown>()
+    let form: FormApi<Person, unknown> | null = null
+    function Comp() {
+      form = formFactory.useForm()
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="hello"
+            preserveValue={true}
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, unmount, rerender } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('hello')
+    await user.type(input, 'world')
+    unmount()
+    expect(form!.fieldInfo['firstName']).toBeDefined()
+  })
+
+  it('should not preserve value when preserve value property is false', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+    const formFactory = createFormFactory<Person, unknown>()
+    let form: FormApi<Person, unknown> | null = null
+    function Comp() {
+      form = formFactory.useForm()
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue="hello"
+            preserveValue={false}
+            children={(field) => {
+              return (
+                <input
+                  data-testid="fieldinput"
+                  value={field.state.value}
+                  onBlur={field.handleBlur}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                />
+              )
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, unmount } = render(<Comp />)
+    const input = getByTestId('fieldinput')
+    expect(input).toHaveValue('hello')
+    unmount()
+    const info = form!.fieldInfo
+    expect(Object.keys(info)).toHaveLength(0)
+  })
 })