Merge branch 'master' into document-util-and-logic-fn

react-hook-form · May 19, 2024 · 6d2b21d · 6d2b21d
2 parents dc2ec87 + 3e374dc
commit 6d2b21d
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 0 deletions.
diff --git a/reports/api-extractor.md b/reports/api-extractor.md
@@ -867,6 +867,7 @@ export type WatchInternal<TFieldValues> = (fieldNames?: InternalFieldName | Inte
 export type WatchObserver<TFieldValues extends FieldValues> = (value: DeepPartial<TFieldValues>, info: {
     name?: FieldPath<TFieldValues>;
     type?: EventType;
+    value?: unknown;
 }) => void;
 
 // Warnings were encountered during analysis:

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,
     });

diff --git a/src/types/form.ts b/src/types/form.ts
@@ -825,6 +825,7 @@ export type WatchObserver<TFieldValues extends FieldValues> = (
   info: {
     name?: FieldPath<TFieldValues>;
     type?: EventType;
+    value?: unknown;
   },
 ) => void;