🐞 fix setError to preserve existing errors elsewhere in the object (#…

…11888) * Add Test to Prove that setError is not idempotent * When setting error, preserve errors further down in object tree
react-hook-form · May 19, 2024 · 48f8822 · 48f8822
1 parent 2364d43
commit 48f8822
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 0 deletions.
diff --git a/src/__tests__/useForm/setError.test.tsx b/src/__tests__/useForm/setError.test.tsx
@@ -164,4 +164,91 @@ describe('setError', () => {
       screen.findByText('not found');
     });
   });
+
+  it('should allow sequential calls to set with child after ancestor', async () => {
+    const { result } = renderHook(() =>
+      useForm<{ input: { first: string; last: string } }>(),
+    );
+    result.current.formState.errors;
+
+    act(() => {
+      result.current.setError('input', {
+        type: 'test',
+        message: 'Some error that depends on both fields',
+      });
+    });
+
+    expect(result.current.formState.errors).toEqual({
+      input: {
+        type: 'test',
+        message: 'Some error that depends on both fields',
+        ref: undefined,
+      },
+    });
+
+    act(() => {
+      result.current.setError('input.first', {
+        type: 'test',
+        message: 'Name must be capitalized',
+      });
+    });
+
+    expect(result.current.formState.errors).toEqual({
+      input: {
+        type: 'test',
+        message: 'Some error that depends on both fields',
+        ref: undefined,
+        first: {
+          type: 'test',
+          message: 'Name must be capitalized',
+          ref: undefined,
+        },
+      },
+    });
+  });
+
+  it('should allow sequential calls to set with ancestor after child', async () => {
+    const { result } = renderHook(() =>
+      useForm<{ input: { first: string; last: string } }>(),
+    );
+
+    result.current.formState.errors;
+
+    act(() => {
+      result.current.setError('input.first', {
+        type: 'test',
+        message: 'Name must be capitalized',
+      });
+    });
+
+    expect(result.current.formState.errors).toEqual({
+      input: {
+        first: {
+          type: 'test',
+          message: 'Name must be capitalized',
+          ref: undefined,
+        },
+      },
+    });
+
+    act(() => {
+      result.current.setError('input', {
+        type: 'test',
+        message: 'Some error that depends on both fields',
+      });
+    });
+
+    expect(result.current.formState.errors).toEqual({
+      input: {
+        type: 'test',
+        message: 'Some error that depends on both fields',
+        ref: undefined,
+        first: {
+          type: 'test',
+          message: 'Name must be capitalized',
+          ref: undefined,
+        },
+      },
+    });
+  });
 });
diff --git a/src/logic/createFormControl.ts b/src/logic/createFormControl.ts
@@ -904,8 +904,13 @@ export function createFormControl<
 
   const setError: UseFormSetError<TFieldValues> = (name, error, options) => {
     const ref = (get(_fields, name, { _f: {} })._f || {}).ref;
+    const currentError = get(_formState.errors, name) || {};
+
+    // Don't override existing error messages elsewhere in the object tree.
+    const { ref: currentRef, message, type, ...restOfErrorTree } = currentError;
 
     set(_formState.errors, name, {
+      ...restOfErrorTree,
       ...error,
       ref,
     });