🐞 fix react-hook-form#11328 resetField with object as defaultValue (r…

…eact-hook-form#11329)
rafaelcalhau · May 5, 2024 · 0f66ca0 · 0f66ca0
1 parent bd1a036
commit 0f66ca0
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 3 deletions.
diff --git a/src/__tests__/useForm/resetField.test.tsx b/src/__tests__/useForm/resetField.test.tsx
@@ -408,5 +408,61 @@ describe('resetField', () => {
       expect(await screen.findByText('NotValid')).toBeVisible();
       expect(screen.getByText('error')).toBeVisible();
     });
+
+    it('should work with objects as defaultValue', async () => {
+      const App = () => {
+        const {
+          register,
+          resetField,
+          formState: { isDirty },
+        } = useForm({
+          defaultValues: {
+            nestedObjectTest: {
+              test: 'test',
+            },
+          },
+          mode: 'onChange',
+        });
+
+        return (
+          <form>
+            <input {...register('nestedObjectTest.test', { maxLength: 4 })} />
+            <p>{isDirty ? 'isDirty' : 'isNotDirty'}</p>
+            <button
+              type={'button'}
+              onClick={() => {
+                resetField('nestedObjectTest', {
+                  defaultValue: { test: 'test2' },
+                });
+              }}
+            >
+              reset
+            </button>
+          </form>
+        );
+      };
+
+      render(<App />);
+
+      expect(await screen.findByText('isNotDirty')).toBeVisible();
+
+      fireEvent.change(screen.getByRole('textbox'), {
+        target: {
+          value: 'abcd',
+        },
+      });
+
+      expect(await screen.findByText('isDirty')).toBeVisible();
+
+      fireEvent.click(screen.getByRole('button'));
+
+      fireEvent.change(screen.getByRole('textbox'), {
+        target: {
+          value: '1234',
+        },
+      });
+
+      expect(await screen.findByText('isDirty')).toBeVisible();
+    });
   });
 });
diff --git a/src/logic/createFormControl.ts b/src/logic/createFormControl.ts
@@ -1149,7 +1149,7 @@ export function createFormControl<
   const resetField: UseFormResetField<TFieldValues> = (name, options = {}) => {
     if (get(_fields, name)) {
       if (isUndefined(options.defaultValue)) {
-        setValue(name, get(_defaultValues, name));
+        setValue(name, cloneObject(get(_defaultValues, name)));
       } else {
         setValue(
           name,
@@ -1158,7 +1158,7 @@ export function createFormControl<
             FieldPath<TFieldValues>
           >,
         );
-        set(_defaultValues, name, options.defaultValue);
+        set(_defaultValues, name, cloneObject(options.defaultValue));
       }
 
       if (!options.keepTouched) {
@@ -1168,7 +1168,7 @@ export function createFormControl<
       if (!options.keepDirty) {
         unset(_formState.dirtyFields, name);
         _formState.isDirty = options.defaultValue
-          ? _getDirty(name, get(_defaultValues, name))
+          ? _getDirty(name, cloneObject(get(_defaultValues, name)))
           : _getDirty();
       }