close #6928 prevent schema error before user's action

react-hook-form · Oct 29, 2021 · 6a2c951 · 6a2c951
1 parent 3c7d00f
commit 6a2c951
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 9 deletions.
diff --git a/src/__tests__/useFieldArray.test.tsx b/src/__tests__/useFieldArray.test.tsx
@@ -444,6 +444,56 @@ describe('useFieldArray', () => {
         screen.getByText('minLength');
       });
     });
+
+    it('should not return schema error without user action', () => {
+      const App = () => {
+        const {
+          register,
+          control,
+          formState: { errors },
+        } = useForm<{
+          test: { value: string }[];
+        }>({
+          resolver: (data) => {
+            return {
+              values: data,
+              errors: {
+                test: {
+                  type: 'test',
+                  message: 'minLength',
+                },
+              },
+            };
+          },
+          defaultValues: {
+            test: [],
+          },
+        });
+        const { fields, remove } = useFieldArray({
+          name: 'test',
+          control,
+        });
+
+        return (
+          <form>
+            {errors.test && <p>minLength</p>}
+
+            {fields.map((item, i) => (
+              <fieldset key={item.id}>
+                <input {...register(`test.${i}.value` as const)} />
+                <button type={'button'} onClick={() => remove(i)}>
+                  delete
+                </button>
+              </fieldset>
+            ))}
+          </form>
+        );
+      };
+
+      render(<App />);
+
+      expect(screen.queryByText('minLength')).toBeNull();
+    });
   });
 
   describe('when component unMount', () => {

diff --git a/src/useFieldArray.ts b/src/useFieldArray.ts
@@ -49,6 +49,7 @@ export const useFieldArray = <
   >(mapIds(control._getFieldArray(name), keyName));
   const _fieldIds = React.useRef(fields);
   const _name = React.useRef(name);
+  const _actioned = React.useRef(false);
 
   _name.current = name;
   _fieldIds.current = fields;
@@ -76,6 +77,7 @@ export const useFieldArray = <
         updatedFieldArrayValuesWithKey,
         keyName,
       );
+      _actioned.current = true;
       set(control._formValues, name, updatedFieldArrayValues);
       setFields(updatedFieldArrayValuesWithKey);
       return updatedFieldArrayValues;
@@ -272,16 +274,18 @@ export const useFieldArray = <
       }
     }
 
-    control._executeSchema([name]).then((result) => {
-      const error = get(result.errors, name);
+    if (_actioned.current) {
+      control._executeSchema([name]).then((result) => {
+        const error = get(result.errors, name);
 
-      if (error && error.type && !get(control._formState.errors, name)) {
-        set(control._formState.errors, name, error);
-        control._subjects.state.next({
-          errors: control._formState.errors as FieldErrors<TFieldValues>,
-        });
-      }
-    });
+        if (error && error.type && !get(control._formState.errors, name)) {
+          set(control._formState.errors, name, error);
+          control._subjects.state.next({
+            errors: control._formState.errors as FieldErrors<TFieldValues>,
+          });
+        }
+      });
+    }
 
     control._subjects.watch.next({
       name,