🐞 fix #9765 fix issue with strictMode with isValid state (#9771)

react-hook-form · Jan 13, 2023 · 3b2dee3 · 3b2dee3
1 parent 4b4f1d8
commit 3b2dee3
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 7 deletions.
diff --git a/reports/api-extractor.md b/reports/api-extractor.md
@@ -51,7 +51,7 @@ export type Control<TFieldValues extends FieldValues = FieldValues, TContext = a
     _options: UseFormProps<TFieldValues, TContext>;
     _getDirty: GetIsDirty;
     _formState: FormState<TFieldValues>;
-    _updateValid: Noop;
+    _updateValid: (shouldUpdateValid?: boolean) => void;
     _fields: FieldRefs;
     _formValues: FieldValues;
     _proxyFormState: ReadFormState;

diff --git a/src/__tests__/useController.test.tsx b/src/__tests__/useController.test.tsx
@@ -676,4 +676,39 @@ describe('useController', () => {
     expect(select).toBeCalled();
     expect(focus).toBeCalled();
   });
+
+  it('should update isValid correctly with strict mode', async () => {
+    const App = () => {
+      const form = useForm({
+        mode: 'onChange',
+        defaultValues: {
+          name: '',
+        },
+      });
+      const { isValid } = form.formState;
+
+      return (
+        <React.StrictMode>
+          <FormProvider {...form}>
+            <Controller
+              render={({ field }) => (
+                <input value={field.value} onChange={field.onChange} />
+              )}
+              name="name"
+              rules={{
+                required: true,
+              }}
+            />
+            <p>{isValid ? 'valid' : 'not'}</p>
+          </FormProvider>
+        </React.StrictMode>
+      );
+    };
+
+    render(<App />);
+
+    await waitFor(() => {
+      screen.getByText('not');
+    });
+  });
 });
diff --git a/src/logic/createFormControl.ts b/src/logic/createFormControl.ts
@@ -158,8 +158,8 @@ export function createFormControl<
       timer = window.setTimeout(callback, wait);
     };
 
-  const _updateValid = async () => {
-    if (_proxyFormState.isValid) {
+  const _updateValid = async (shouldUpdateValid?: boolean) => {
+    if (_proxyFormState.isValid || shouldUpdateValid) {
       const isValid = _options.resolver
         ? isEmptyObject((await _executeSchema()).errors)
         : await executeBuiltInValidation(_fields, true);

diff --git a/src/types/form.ts b/src/types/form.ts
@@ -747,7 +747,7 @@ export type Control<
   _options: UseFormProps<TFieldValues, TContext>;
   _getDirty: GetIsDirty;
   _formState: FormState<TFieldValues>;
-  _updateValid: Noop;
+  _updateValid: (shouldUpdateValid?: boolean) => void;
   _fields: FieldRefs;
   _formValues: FieldValues;
   _proxyFormState: ReadFormState;

diff --git a/src/useFieldArray.ts b/src/useFieldArray.ts
@@ -369,7 +369,7 @@ export function useFieldArray<
 
     control._names.focus = '';
 
-    control._proxyFormState.isValid && control._updateValid();
+    control._updateValid();
   }, [fields, name, control]);
 
   React.useEffect(() => {

diff --git a/src/useForm.ts b/src/useForm.ts
@@ -91,7 +91,7 @@ export function useForm<
 
   React.useEffect(() => {
     if (!control._stateFlags.mount) {
-      control._proxyFormState.isValid && control._updateValid();
+      control._updateValid();
       control._stateFlags.mount = true;
     }
 

diff --git a/src/useFormState.ts b/src/useFormState.ts
@@ -88,7 +88,8 @@ function useFormState<TFieldValues extends FieldValues = FieldValues>(
         isDirty,
       });
     }
-    control._updateValid();
+
+    _localProxyFormState.current.isValid && control._updateValid(true);
 
     return () => {
       _mounted.current = false;