fix(validations): Fix handling of async validations as well as order of onChange notification

src/Form/Formbot.js

@@ -147,14 +147,22 @@ export default class Formbot extends React.Component {
       const fieldValue = this.state.values[field];
       let errorMsg;
 
-      try {
-        if (hasSchema && typeof validation.validate === 'function') {
-          validation.validate(fieldValue, validationOpts).catch(e => {
-            this.setErrors({ [field]: e.message }, resolve);
-          });
+      if (hasSchema && typeof validation.validate === 'function') {
+        validation.validate(fieldValue, validationOpts)
+          .catch(e => {
+            errorMsg = e.message;
+          })
+          .finally(() => {
+            this.updateField(field, { validated: true }).then(() => {
+              this.setErrors({ [field]: errorMsg }, resolve);
+            });
+          })
 
-          return;
-        } else if (typeof validation === 'function') {
+        return;
+      }
+
+      try {
+        if (typeof validation === 'function') {
           validation(fieldValue);
         } else {
           Object.keys(validation).forEach(method => {
@@ -200,10 +208,9 @@ export default class Formbot extends React.Component {
         },
       },
       () => {
-        this.props.onChange(field, value, this.state.values);
-        this.updateField(field, { validated: false }).then(() => {
-          this.validateField(field);
-        });
+        this.updateField(field, { validated: false })
+          .then(() => this.validateField(field))
+          .then(() => this.props.onChange(field, value, this.state.values))
       }
     );
   };

src/Form/Formbot.mdx

@@ -47,36 +47,29 @@ Quickly build a form using a Formbot and pre-configured form components. Formbot
 
 ### Async Validation
 
-```jsx
-<Formbot
-  validationSchema={{
-    state: yup.string().required(),
-    zip: yup
-      .string()
-      .min(5)
-      .required()
-      .test('valid', 'Zip does not match selected state!', async function(value) {
-        const {
-          options: {
-            context: { values }, // Formbot context
-          },
-        } = this;
-
-        const stateFromZip = await getStateFromZip(value);
-
-        return stateFromZip === values.state;
+<Playground>
+  <Formbot
+    validationSchema={{
+      random: yup.string().test('valid', 'This test was delayed by 2 seconds.', async function(value) {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(false);
+          }, 2000);
+        });
       }),
-  }}>
-  <Form>
-    <Input name="state" label="State" />
-    <Input name="zip" label="Zip" />
-
-    <Field>
-      <Button type="submit">Update</Button>
-    </Field>
-  </Form>
-</Formbot>
-```
+    }}>
+    <Form>
+      <Input name="random" label="random" />
+
+      <Field>
+        <Button type="submit">
+          Sign In
+        </Button>
+      </Field>
+    </Form>
+
+  </Formbot>
+</Playground>
 
 ### Entire Form