From 2f7ec1d87e85d55498581e9ee716c302727c3b00 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Mon, 3 Jul 2023 00:30:14 -0700
Subject: [PATCH] fix: user input now works

---
 packages/form-core/src/FieldApi.ts            | 11 ++++-
 .../src/tests/createFormFactory.test.tsx      | 39 ++++++++++++++++++
 packages/react-form/src/tests/test.test.tsx   |  5 ---
 .../react-form/src/tests/useForm.test.tsx     | 40 +++++++++++++++++++
 4 files changed, 89 insertions(+), 6 deletions(-)
 create mode 100644 packages/react-form/src/tests/createFormFactory.test.tsx
 delete mode 100644 packages/react-form/src/tests/test.test.tsx
 create mode 100644 packages/react-form/src/tests/useForm.test.tsx

diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts
index e933aed30..b1378f93b 100644
--- a/packages/form-core/src/FieldApi.ts
+++ b/packages/form-core/src/FieldApi.ts
@@ -2,6 +2,7 @@
 import type { DeepKeys, DeepValue, RequiredByKey, Updater } from './utils'
 import type { FormApi, ValidationError } from './FormApi'
 import { Store } from '@tanstack/store'
+import { setBy } from './utils'
 
 export type ValidationCause = 'change' | 'blur' | 'submit'
 
@@ -187,7 +188,15 @@ export class FieldApi<TData, TFormData> {
   setValue = (
     updater: Updater<TData>,
     options?: { touch?: boolean; notify?: boolean },
-  ) => this.form.setFieldValue(this.name, updater as any, options)
+  ) => {
+    this.form.setFieldValue(this.name, updater as any, options)
+    this.store.setState((prev) => {
+      return {
+        ...prev,
+        value: updater as any,
+      }
+    })
+  }
 
   getMeta = (): FieldMeta => this.form.getFieldMeta(this.name)
   setMeta = (updater: Updater<FieldMeta>) =>
diff --git a/packages/react-form/src/tests/createFormFactory.test.tsx b/packages/react-form/src/tests/createFormFactory.test.tsx
new file mode 100644
index 000000000..914f1a969
--- /dev/null
+++ b/packages/react-form/src/tests/createFormFactory.test.tsx
@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import * as React from 'react'
+import { createFormFactory } from '..'
+
+describe('createFormFactory', () => {
+  it('should allow default values to be set', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>({
+      defaultValues: {
+        firstName: 'FirstName',
+        lastName: 'LastName',
+      },
+    })
+
+    function Comp() {
+      const form = formFactory.useForm({})
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            children={(field) => {
+              return <p>{field.getInputProps().value}</p>
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { findByText, queryByText } = render(<Comp />)
+    expect(await findByText('FirstName')).toBeInTheDocument()
+    expect(queryByText('LastName')).not.toBeInTheDocument()
+  })
+})
diff --git a/packages/react-form/src/tests/test.test.tsx b/packages/react-form/src/tests/test.test.tsx
deleted file mode 100644
index 7538842e8..000000000
--- a/packages/react-form/src/tests/test.test.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-describe('tests', () => {
-  it('should test', () => {
-    expect(true).toBe(true)
-  })
-})
diff --git a/packages/react-form/src/tests/useForm.test.tsx b/packages/react-form/src/tests/useForm.test.tsx
new file mode 100644
index 000000000..829d860d5
--- /dev/null
+++ b/packages/react-form/src/tests/useForm.test.tsx
@@ -0,0 +1,40 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import '@testing-library/jest-dom'
+import * as React from 'react'
+import { createFormFactory } from '..'
+
+const user = userEvent.setup()
+
+describe('useForm', () => {
+  it('preserves field state', async () => {
+    type Person = {
+      firstName: string
+      lastName: string
+    }
+
+    const formFactory = createFormFactory<Person>()
+
+    function Comp() {
+      const form = formFactory.useForm()
+
+      return (
+        <form.Provider>
+          <form.Field
+            name="firstName"
+            defaultValue={""}
+            children={(field) => {
+              return <input data-testid="fieldinput" {...field.getInputProps()} />
+            }}
+          />
+        </form.Provider>
+      )
+    }
+
+    const { getByTestId, queryByText } = render(<Comp />)
+    const input = getByTestId("fieldinput");
+    expect(queryByText('FirstName')).not.toBeInTheDocument()
+    await user.type(input, "FirstName")
+    expect(input).toHaveValue("FirstName")
+  })
+})