fix(vue-form): keep field slot state reactive (#2192)

fix: keep vue field slot state reactive

Author: anguiao

.changeset/vue-form-field-slot-state.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/vue-form': patch
+---
+
+Fix `Field` scoped slot `state` reactivity after field value and meta updates.

packages/vue-form/src/useField.tsx

@@ -375,7 +375,12 @@ export function useField<
     },
   )
 
-  return { api: extendedFieldApi.value, state: fieldState.value } as const
+  return {
+    api: extendedFieldApi.value,
+    get state() {
+      return fieldState.value
+    },
+  } as const
 }
 
 export type FieldComponentProps<

packages/vue-form/tests/useField.test.tsx

@@ -225,6 +225,84 @@ describe('useField', () => {
     expect(getByText(error)).toBeInTheDocument()
   })
 
+  it('should keep field slot state reactive', async () => {
+    type Person = {
+      firstName: string
+    }
+
+    const serverError = 'First name is already taken'
+
+    const Comp = defineComponent(() => {
+      const form = useForm({
+        defaultValues: {
+          firstName: '',
+        } as Person,
+      })
+
+      function setServerError() {
+        form.setFieldMeta('firstName', (meta) => ({
+          ...meta,
+          errorMap: {
+            ...meta.errorMap,
+            onServer: serverError,
+          },
+          errorSourceMap: {
+            ...meta.errorSourceMap,
+            onServer: 'form',
+          },
+        }))
+      }
+
+      return () => (
+        <div>
+          <button onClick={() => form.reset({ firstName: 'Ada' })}>
+            Reset
+          </button>
+          <button onClick={setServerError}>Set server error</button>
+          <form.Field name="firstName">
+            {({
+              field,
+              state,
+            }: {
+              field: AnyFieldApi
+              state: AnyFieldApi['state']
+            }) => (
+              <div>
+                <input
+                  data-testid="fieldinput"
+                  value={state.value}
+                  onBlur={field.handleBlur}
+                  onInput={(e) =>
+                    field.handleChange((e.target as HTMLInputElement).value)
+                  }
+                />
+                <p data-testid="slotvalue">{state.value}</p>
+                <p data-testid="sloterror">{state.meta.errorMap.onServer}</p>
+              </div>
+            )}
+          </form.Field>
+        </div>
+      )
+    })
+
+    const { getByTestId, getByText } = render(Comp)
+    const input = getByTestId('fieldinput')
+
+    await user.type(input, 'Grace')
+    await waitFor(() =>
+      expect(getByTestId('slotvalue')).toHaveTextContent('Grace'),
+    )
+
+    await user.click(getByText('Reset'))
+    await waitFor(() => expect(input).toHaveValue('Ada'))
+    expect(getByTestId('slotvalue')).toHaveTextContent('Ada')
+
+    await user.click(getByText('Set server error'))
+    await waitFor(() =>
+      expect(getByTestId('sloterror')).toHaveTextContent(serverError),
+    )
+  })
+
   it('should handle arrays with subvalues', async () => {
     const fn = vi.fn()