🐞 fix(useForm): recompute isValid after reset when values update asynchronously (#13126)

* fix(useForm): recompute isValid after reset when values update asynchronously

- Call _setValid() at the end of _reset() unless keepIsValid is set.
- Ensures formState.isValid updates correctly when props.values change asynchronously.

Signed-off-by: Eric Chen <[email protected]>

* fix(useForm): ensure validity state is updated after reset

- Call _setValid() in useForm when resetOptions.keepIsValid is false.

---------

Signed-off-by: Eric Chen <[email protected]>

Author: a28689604

src/__tests__/useForm/formState.test.tsx

@@ -226,6 +226,48 @@ describe('formState', () => {
 
       expect(await screen.findByText('invalid')).toBeVisible();
     });
+
+    it('should set isValid to true after async values provide valid data', async () => {
+      jest.useFakeTimers();
+
+      const App = () => {
+        const [value, setValue] = React.useState<{ name: string } | undefined>(
+          undefined,
+        );
+
+        React.useEffect(() => {
+          const t = setTimeout(() => setValue({ name: 'Mike' }), 2000);
+          return () => clearTimeout(t);
+        }, []);
+
+        const {
+          register,
+          formState: { isValid },
+        } = useForm<{ name: string }>({
+          defaultValues: { name: '' },
+          values: value ?? { name: '' },
+          mode: 'onBlur',
+        });
+
+        return (
+          <div>
+            <input {...register('name', { required: true })} />
+            <p>{isValid ? 'valid' : 'invalid'}</p>
+          </div>
+        );
+      };
+
+      render(<App />);
+
+      expect(screen.getByText('invalid')).toBeVisible();
+
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
+
+      await waitFor(() => expect(screen.getByText('valid')).toBeVisible());
+      jest.useRealTimers();
+    });
   });
 
   it('should be a proxy object that returns undefined for unknown properties', () => {

src/useForm.ts

@@ -157,6 +157,9 @@ export function useForm<
         keepFieldsRef: true,
         ...control._options.resetOptions,
       });
+      if (!control._options.resetOptions?.keepIsValid) {
+        control._setValid();
+      }
       _values.current = props.values;
       updateFormState((state) => ({ ...state }));
     } else {