🐞 fix(useForm): make values and defaultValues work correctly with createFormControl and useMemo (#12675)

* Revert "🐞 fix #12665 regression on values over take default values"

This reverts commit ef80ff6.

* Revert "🥹 close #12665 issue with values not populate form"

This reverts commit d9e7e4d.

* test: add test case for #12665

* fix(vscode): fix running individual tests and debugging

* test: verify setting values doesn't unregister fields

* fix(createFormControl): don't unregister fields on reset

* fix(useForm): set default values if given along with a form control

Fixes #12665 .

Author: jtomaszewski

.vscode/launch.json

@@ -9,7 +9,7 @@
       "disableOptimisticBPs": true,
       "cwd": "${workspaceFolder}",
       "runtimeExecutable": "pnpm",
-      "args": ["test", "--", "--runInBand", "--watchAll=false"]
+      "args": ["test", "--runInBand", "--watchAll=false"]
     }
   ]
 }

.vscode/settings.json

@@ -3,7 +3,7 @@
     "source.fixAll.eslint": "explicit"
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "jest.jestCommandLine": "pnpm test --",
+  "jest.jestCommandLine": "pnpm test",
   "jest.autoRun": {
     "watch": false,
     "onSave": "test-file",

src/__tests__/useController.test.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import { Controller } from '../controller';
-import { Control, FieldPath, FieldValues } from '../types';
+import { Control, FieldPath, FieldValues, UseFormReturn } from '../types';
 import { useController } from '../useController';
 import { useForm } from '../useForm';
 import { FormProvider, useFormContext } from '../useFormContext';
@@ -29,6 +29,72 @@ describe('useController', () => {
     render(<Component />);
   });
 
+  it('component using the hook can be memoized', async () => {
+    function App() {
+      const form = useForm({
+        values: { login: 'john' },
+      });
+
+      return useMemo(() => <LoginField form={form} />, [form]);
+    }
+
+    function LoginField({ form }: { form: UseFormReturn<{ login: string }> }) {
+      const ctrl = useController({
+        name: 'login',
+        control: form.control,
+      });
+
+      return <input {...ctrl.field} />;
+    }
+
+    render(<App />);
+
+    const input = screen.getAllByRole<HTMLInputElement>('textbox')[0];
+    expect(input.value).toBe('john');
+
+    fireEvent.input(input, { target: { value: 'abc' } });
+    expect(input.value).toBe('abc');
+  });
+
+  it("setting values doesn't cause fields to be unregistered", async () => {
+    function App() {
+      const [values, setValues] = useState<{ login: string } | undefined>();
+
+      const form = useForm({
+        values,
+      });
+
+      useEffect(() => {
+        setTimeout(() => {
+          setValues({ login: 'john' });
+        }, 100);
+      }, []);
+
+      return useMemo(
+        () => values?.login && <LoginField form={form} />,
+        [values, form],
+      );
+    }
+
+    function LoginField({ form }: { form: UseFormReturn<{ login: string }> }) {
+      const ctrl = useController({
+        name: 'login',
+        control: form.control,
+        defaultValue: 'john',
+      });
+
+      return <input value={ctrl.field.value} onChange={ctrl.field.onChange} />;
+    }
+
+    render(<App />);
+
+    const input = await screen.findByRole<HTMLInputElement>('textbox');
+    expect(input.value).toBe('john');
+
+    fireEvent.input(input, { target: { value: 'jane' } });
+    expect(input.value).toBe('jane');
+  });
+
   it('should only subscribe to formState at each useController level', async () => {
     const renderCounter = [0, 0];
     type FormValues = {

src/__tests__/useForm.test.tsx

@@ -16,6 +16,7 @@ import {
   FieldValues,
   FormState,
   RegisterOptions,
+  SubmitHandler,
   UseFormGetFieldState,
   UseFormRegister,
   UseFormReturn,
@@ -24,7 +25,7 @@ import {
 import isFunction from '../utils/isFunction';
 import noop from '../utils/noop';
 import sleep from '../utils/sleep';
-import { Controller, useFieldArray, useForm } from '../';
+import { Controller, createFormControl, useFieldArray, useForm } from '../';
 
 jest.useFakeTimers();
 
@@ -2498,4 +2499,57 @@ describe('useForm', () => {
       ).toBeInTheDocument();
     });
   });
+
+  describe('when given formControl', () => {
+    it('accepts default values', async () => {
+      type FormValues = {
+        firstName: string;
+      };
+
+      const { register, handleSubmit, formControl } =
+        createFormControl<FormValues>();
+
+      function FormComponent({
+        onSubmit,
+        defaultValues,
+      }: {
+        defaultValues: FormValues;
+        onSubmit: SubmitHandler<FormValues>;
+      }) {
+        useForm({
+          formControl,
+          defaultValues,
+        });
+        return (
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <input {...register('firstName')} placeholder="First Name" />
+            <input type="submit" />
+          </form>
+        );
+      }
+
+      function App() {
+        const [state, setState] = React.useState('');
+        return (
+          <div>
+            <FormComponent
+              defaultValues={{ firstName: 'Emilia' }}
+              onSubmit={(data) => {
+                setState(JSON.stringify(data));
+              }}
+            />
+            <pre>{state}</pre>
+          </div>
+        );
+      }
+
+      render(<App />);
+
+      const input = screen.getAllByRole<HTMLInputElement>('textbox')[0];
+      expect(input.value).toBe('Emilia');
+
+      fireEvent.input(input, { target: { value: 'abc' } });
+      expect(input.value).toBe('abc');
+    });
+  });
 });

src/__tests__/useForm/watch.test.tsx

@@ -510,7 +510,17 @@ describe('watch', () => {
 
     expect(await screen.findByText('1234')).toBeVisible();
 
-    expect(watchedData).toEqual([{}, {}, { test: '1234' }]);
+    expect(watchedData).toEqual([
+      {},
+      {
+        test: '1234',
+        data: '1234',
+      },
+      {
+        test: '1234',
+        data: '1234',
+      },
+    ]);
   });
 
   it('should not be able to overwrite global watch state', () => {

src/__tests__/useFormState.test.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import { Controller } from '../controller';
@@ -810,13 +810,7 @@ describe('useFormState', () => {
     }
 
     function App() {
-      const [values, setValues] = React.useState({ firstName: '' });
-
-      useEffect(() => {
-        setValues({ firstName: 'test' });
-      }, [setValues]);
-
-      return <Form values={values} />;
+      return <Form values={{ firstName: 'test' }} />;
     }
 
     render(<App />);

src/logic/createFormControl.ts

@@ -121,10 +121,10 @@ export function createFormControl<
     errors: _options.errors || {},
     disabled: _options.disabled || false,
   };
-  let _fields: FieldRefs = {};
+  const _fields: FieldRefs = {};
   let _defaultValues =
     isObject(_options.defaultValues) || isObject(_options.values)
-      ? cloneObject(_options.defaultValues || _options.values) || {}
+      ? cloneObject(_options.values || _options.defaultValues) || {}
       : {};
   let _formValues = _options.shouldUnregister
     ? ({} as TFieldValues)
@@ -1340,14 +1340,15 @@ export function createFormControl<
           }
         }
 
-        _fields = {};
+        for (const fieldName of _names.mount) {
+          setValue(
+            fieldName as FieldPath<TFieldValues>,
+            get(values, fieldName),
+          );
+        }
       }
 
-      _formValues = _options.shouldUnregister
-        ? keepStateOptions.keepDefaultValues
-          ? (cloneObject(_defaultValues) as TFieldValues)
-          : ({} as TFieldValues)
-        : (cloneObject(values) as TFieldValues);
+      _formValues = cloneObject(values) as TFieldValues;
 
       _subjects.array.next({
         values: { ...values },

src/useForm.ts

@@ -71,6 +71,14 @@ export function useForm<
       ...(props.formControl ? props.formControl : createFormControl(props)),
       formState,
     };
+
+    if (
+      props.formControl &&
+      props.defaultValues &&
+      !isFunction(props.defaultValues)
+    ) {
+      props.formControl.reset(props.defaultValues, props.resetOptions);
+    }
   }
 
   const control = _formControl.current.control;