fix(formik): validateOnMount initialize isValid to false until validation performed

Author: anonkey

packages/formik/src/Formik.tsx

@@ -152,6 +152,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
   const initialTouched = React.useRef(props.initialTouched || emptyTouched);
   const initialStatus = React.useRef(props.initialStatus);
   const isMounted = React.useRef<boolean>(false);
+  const validated = React.useRef<boolean>(false);
   const fieldRegistry = React.useRef<FieldRegistry>({});
   if (__DEV__) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -314,6 +315,7 @@ export function useFormik<Values extends FormikValues = FormikValues>({
         props.validationSchema ? runValidationSchema(values) : {},
         props.validate ? runValidateHandler(values) : {},
       ]).then(([fieldErrors, schemaErrors, validateErrors]) => {
+        validated.current = true;
         const combinedErrors = deepmerge.all<FormikErrors<Values>>(
           [fieldErrors, schemaErrors, validateErrors],
           { arrayMerge }
@@ -949,15 +951,18 @@ export function useFormik<Values extends FormikValues = FormikValues>({
   );
 
   const isValid = React.useMemo(
-    () =>
-      typeof isInitialValid !== 'undefined'
-        ? dirty
-          ? state.errors && Object.keys(state.errors).length === 0
-          : isInitialValid !== false && isFunction(isInitialValid)
-          ? (isInitialValid as (props: FormikConfig<Values>) => boolean)(props)
-          : (isInitialValid as boolean)
-        : state.errors && Object.keys(state.errors).length === 0,
-    [isInitialValid, dirty, state.errors, props]
+    () => {
+      if (!validated.current && validateOnMount) return false
+      if (typeof isInitialValid !== 'undefined') {
+        if (dirty) return state.errors && Object.keys(state.errors).length === 0;
+
+        return isInitialValid !== false && isFunction(isInitialValid)
+            ? (isInitialValid as (props: FormikConfig<Values>) => boolean)(props)
+            : (isInitialValid as boolean)
+      }
+      return state.errors && Object.keys(state.errors).length === 0
+    },
+    [isInitialValid, dirty, state.errors, props, validated.current]
   );
 
   const ctx = {

packages/formik/test/Formik.test.tsx

@@ -128,6 +128,19 @@ describe('<Formik>', () => {
     expect(props.submitCount).toBe(0);
   });
 
+  it('should initialize isValid to false if validateOnMount until validation performed', async () => {
+    const validate = jest.fn(() => Promise.resolve());
+
+    const { getProps } = renderFormik({ validateOnMount: true, validate });
+    expect(getProps().isValid).toBe(false);
+
+    await waitFor(() => {
+      expect(validate).toHaveBeenCalledTimes(1);
+    });
+
+    expect(getProps().isValid).toBe(true);
+  });
+
   describe('handleChange', () => {
     it('updates values based on name attribute', () => {
       const { getProps, getByTestId } = renderFormik<Values>();