From fc8ff5b7ede3c33fc4e84e305e3acb38b465fa34 Mon Sep 17 00:00:00 2001
From: Scott Schlegel <schlegz76@gmail.com>
Date: Tue, 13 Aug 2019 10:14:47 -0700
Subject: [PATCH 1/3] Fix handling of async validations as well as order of
 onChange notification

---
 src/Form/Formbot.js | 31 ++++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/Form/Formbot.js b/src/Form/Formbot.js
index 92523fe..98b9be5 100644
--- a/src/Form/Formbot.js
+++ b/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,11 @@ 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);
+          })
       }
     );
   };

From c3f1e658939e24493619f79a794f953ea770986c Mon Sep 17 00:00:00 2001
From: Scott Schlegel <schlegz76@gmail.com>
Date: Tue, 13 Aug 2019 10:40:06 -0700
Subject: [PATCH 2/3] PR comment nit

---
 src/Form/Formbot.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Form/Formbot.js b/src/Form/Formbot.js
index 98b9be5..18b5e24 100644
--- a/src/Form/Formbot.js
+++ b/src/Form/Formbot.js
@@ -210,9 +210,7 @@ export default class Formbot extends React.Component {
       () => {
         this.updateField(field, { validated: false })
           .then(() => this.validateField(field))
-          .then(() => {
-            this.props.onChange(field, value, this.state.values);
-          })
+          .then(() => this.props.onChange(field, value, this.state.values))
       }
     );
   };

From 13f600fdd64b523a324890ebb26d173b1bda68ac Mon Sep 17 00:00:00 2001
From: Scott Schlegel <schlegz76@gmail.com>
Date: Tue, 13 Aug 2019 11:07:44 -0700
Subject: [PATCH 3/3] Added async validation example

---
 src/Form/Formbot.mdx | 51 +++++++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 29 deletions(-)

diff --git a/src/Form/Formbot.mdx b/src/Form/Formbot.mdx
index 95510f0..79aceff 100644
--- a/src/Form/Formbot.mdx
+++ b/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