Merge branch 'master' into field-array-low-priority-validation

app/pages/sign-in.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import * as Yup from 'yup';
+
+const SignIn = () => (
+  <div>
+    <h1>Sign In</h1>
+
+    <Formik
+      validateOnMount={true}
+      initialValues={{ username: '', password: '' }}
+      validationSchema={Yup.object().shape({
+        username: Yup.string().required('Required'),
+        password: Yup.string().required('Required'),
+      })}
+      onSubmit={async values => {
+        await new Promise(r => setTimeout(r, 500));
+        alert(JSON.stringify(values, null, 2));
+      }}
+    >
+      {formik => (
+        <Form>
+          <div>
+            <Field name="username" placeholder="Username" />
+            <ErrorMessage name="username" component="p" />
+          </div>
+
+          <div>
+            <Field name="password" placeholder="Password" type="password" />
+            <ErrorMessage name="password" component="p" />
+          </div>
+
+          <button type="submit" disabled={!formik.isValid}>
+            Submit
+          </button>
+        </Form>
+      )}
+    </Formik>
+  </div>
+);
+
+export default SignIn;

cypress/integration/basic.spec.ts

@@ -14,4 +14,30 @@ describe('basic validation', () => {
 
     cy.get('#renderCounter').contains('0');
   });
+
+  it('should validate autofill', () => {
+    // React overrides `input.value` setters, so we have to call
+    // native input setter
+    // See: https://stackoverflow.com/a/46012210/1709679
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+      HTMLInputElement.prototype,
+      'value'
+    )?.set;
+
+    function setInputValue(input: HTMLElement, value: string) {
+      nativeInputValueSetter?.call(input, value);
+      const event = new Event('change', { bubbles: true });
+      input.dispatchEvent(event);
+    }
+
+    cy.visit('http://localhost:3000/sign-in');
+
+    cy.get('body').then($body => {
+      // We have set value through JS to simulate autofill behavior.
+      setInputValue($body.find('input[name="username"]')[0], '123');
+      setInputValue($body.find('input[name="password"]')[0], '123');
+    });
+
+    cy.get('button').should('not.be.disabled');
+  });
 });

docs/src/pages/docs/api/withFormik.md

@@ -217,4 +217,4 @@ component's `errors`. Its keys should match those of `values`.
 
 ## Injected props and methods
 
-These are identical to the props of [`<Formik render={props => ...} />`](./formik.md#formik-render-methods-and-props)
+These are identical to the props of [`<Formik render={props => ...} />`](./formik#formik-render-methods-and-props)

docs/src/pages/docs/guides/typescript.md

@@ -104,7 +104,7 @@ const MyForm = withFormik<MyFormProps, FormValues>({
 
   // Add a custom validation function (this can be async too!)
   validate: (values: FormValues) => {
-    let errors: FormikErrors = {};
+    let errors: FormikErrors<FormValues> = {};
     if (!values.email) {
       errors.email = 'Required';
     } else if (!isValidEmail(values.email)) {

packages/formik-native/CHANGELOG.md

@@ -1,5 +1,14 @@
 # formik-native
 
+## 2.1.10
+
+### Patch Changes
+
+- [`00f95ec`](https://github.com/formium/formik/commit/00f95ec4ec5266eed8ad4e97b76321205c704d51) [#2854](https://github.com/formium/formik/pull/2854) Thanks [@umidbekkarimov](https://github.com/umidbekkarimov)! - Fix low priority validation race condition.
+
+- Updated dependencies [[`00f95ec`](https://github.com/formium/formik/commit/00f95ec4ec5266eed8ad4e97b76321205c704d51)]:
+  - [email protected]
+
 ## 2.1.9
 
 ### Patch Changes

packages/formik-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "formik-native",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "license": "Apache-2.0",
   "author": "Jared Palmer <[email protected]>",
   "repository": "formium/formik",
@@ -31,13 +31,13 @@
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "formik": "2.2.1"
+    "formik": "2.2.2"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^0.0.5",
-    "@types/react": "^16.8.23",
-    "@types/react-native": "^0.57.65",
-    "react": "^16.8.6",
+    "@types/react": "^16.9.55",
+    "@types/react-native": "^0.63.32",
+    "react": "^17.0.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz"
   }
 }

packages/formik/CHANGELOG.md

@@ -1,5 +1,11 @@
 # formik
 
+## 2.2.2
+
+### Patch Changes
+
+- [`00f95ec`](https://github.com/formium/formik/commit/00f95ec4ec5266eed8ad4e97b76321205c704d51) [#2854](https://github.com/formium/formik/pull/2854) Thanks [@umidbekkarimov](https://github.com/umidbekkarimov)! - Fix low priority validation race condition.
+
 ## 2.2.1
 
 ### Patch Changes

packages/formik/package.json

@@ -1,7 +1,7 @@
 {
   "name": "formik",
   "description": "Forms in React, without tears",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "license": "Apache-2.0",
   "author": "Jared Palmer <[email protected]>",
   "repository": "formium/formik",
@@ -38,25 +38,21 @@
     "lodash": "^4.17.14",
     "lodash-es": "^4.17.14",
     "react-fast-compare": "^2.0.1",
-    "scheduler": "^0.18.0",
+    "scheduler": "^0.20.1",
     "tiny-warning": "^1.0.2",
     "tslib": "^1.10.0"
   },
-  "resolutions": {
-    "@types/react": "16.9.17",
-    "@types/react-dom": "16.9.4"
-  },
   "devDependencies": {
-    "@testing-library/react": "^11.0.4",
+    "@testing-library/react": "^11.1.0",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/lodash": "^4.14.119",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.4",
+    "@types/react": "^16.9.55",
+    "@types/react-dom": "^16.9.9",
     "@types/warning": "^3.0.0",
     "@types/yup": "^0.24.9",
     "just-debounce-it": "^1.1.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "yup": "^0.28.1"
   },
   "jest": {

packages/formik/src/Formik.tsx

@@ -46,6 +46,10 @@ type FormikMessage<Values> =
   | { type: 'SET_FIELD_ERROR'; payload: { field: string; value?: string } }
   | { type: 'SET_TOUCHED'; payload: FormikTouched<Values> }
   | { type: 'SET_ERRORS'; payload: FormikErrors<Values> }
+  | {
+      type: 'SET_LOW_PRIORITY_ERRORS';
+      payload: { values: Values; errors: FormikErrors<Values> };
+    }
   | { type: 'SET_STATUS'; payload: any }
   | {
       type: 'SET_FORMIK_STATE';
@@ -72,6 +76,23 @@ function formikReducer<Values>(
       }
 
       return { ...state, errors: msg.payload };
+    case 'SET_LOW_PRIORITY_ERRORS':
+      if (
+        // Low priority validation can occur after high priority validation and
+        // this will create stale validation results, e.g:
+        // SET_FIELD_VALUE-------------------SET_LOW_PRIORITY_ERRORS
+        //   SET_FIELD_VALUE-------------------SET_LOW_PRIORITY_ERRORS
+        //       SET_ISVALIDATING-SET_ERRORS-SET_ISVALIDATING
+        //
+        // So we want to skip validation results if values are not the same
+        // anymore.
+        isEqual(state.errors, msg.payload.errors) ||
+        !isEqual(state.values, msg.payload.values)
+      ) {
+        return state;
+      }
+
+      return { ...state, errors: msg.payload.errors };
     case 'SET_STATUS':
       return { ...state, status: msg.payload };
     case 'SET_ISSUBMITTING':
@@ -336,7 +357,10 @@ export function useFormik<Values extends FormikValues = FormikValues>({
         return runAllValidations(values)
           .then(combinedErrors => {
             if (!!isMounted.current) {
-              dispatch({ type: 'SET_ERRORS', payload: combinedErrors });
+              dispatch({
+                type: 'SET_LOW_PRIORITY_ERRORS',
+                payload: { values, errors: combinedErrors },
+              });
             }
             return combinedErrors;
           })