Better fix for async error bug (#441)

* Better fix for async error bug

* Lowered delay in test

* Raised delay on async test

Author: erikras

package.json

@@ -93,7 +93,7 @@
     },
     {
       "path": "dist/final-form.cjs.js",
-      "maxSize": "10.0kB"
+      "maxSize": "10.1kB"
     }
   ],
   "dependencies": {

src/FinalForm.js

@@ -417,12 +417,13 @@ function createForm<FormValues: FormValuesShape>(
       asyncValidationPromises[asyncValidationPromiseKey] = promise;
     }
 
-    const processErrors = () => {
+    const processErrors = (afterAsync: boolean) => {
       let merged = {
         ...(limitedFieldLevelValidation ? formState.errors : {}),
         ...recordLevelErrors,
-        ...formState.asyncErrors, // previous async errors
-        ...asyncRecordLevelErrors, // new async errors
+        ...(afterAsync
+          ? asyncRecordLevelErrors // new async errors
+          : formState.asyncErrors), // previous async errors
       };
       const forEachError = (fn: (name: string, error: any) => void) => {
         fieldKeys.forEach((name) => {
@@ -460,7 +461,9 @@ function createForm<FormValues: FormValuesShape>(
       if (!shallowEqual(formState.errors, merged)) {
         formState.errors = merged;
       }
-      formState.asyncErrors = asyncRecordLevelErrors;
+      if (afterAsync) {
+        formState.asyncErrors = asyncRecordLevelErrors;
+      }
       formState.error = recordLevelErrors[FORM_ERROR];
     };
 
@@ -471,7 +474,7 @@ function createForm<FormValues: FormValuesShape>(
     }
 
     // process sync errors
-    processErrors();
+    processErrors(false);
     // sync errors have been set. notify listeners while we wait for others
     callback();
 
@@ -488,7 +491,7 @@ function createForm<FormValues: FormValuesShape>(
             return;
           }
 
-          processErrors();
+          processErrors(true);
         })
         .then(afterPromise, afterPromise);
     }

src/FinalForm.validating.test.js

@@ -348,7 +348,7 @@ describe("Field.validation", () => {
   });
 
   it("should allow record-level async validation via promises", async () => {
-    const delay = 2;
+    const delay = 10;
     const form = createForm({
       onSubmit: onSubmitMock,
       validate: async (values) => {
@@ -393,19 +393,20 @@ describe("Field.validation", () => {
 
     change("another");
 
-    // spy called because sync validation passed
-    expect(spy).toHaveBeenCalledTimes(3);
-    expect(spy.mock.calls[2][0].error).toBeUndefined();
+    await sleep(delay / 2);
+
+    // spy not called because async validation not yet done
+    expect(spy).toHaveBeenCalledTimes(2);
 
-    // wait for validation to return
     await sleep(delay * 2);
 
-    // spy not called because sync validation already cleared error
+    // spy called because async validation completed
     expect(spy).toHaveBeenCalledTimes(3);
+    expect(spy.mock.calls[2][0].error).toBeUndefined();
   });
 
-  it.only("should not reset record-level async validation results until they have been replaced", async () => {
-    const delay = 50;
+  it("should not reset record-level async validation results until they have been replaced", async () => {
+    const delay = 10;
     const form = createForm({
       onSubmit: onSubmitMock,
       validate: async (values) => {
@@ -441,6 +442,8 @@ describe("Field.validation", () => {
     expect(spy.mock.calls[1][0].error).toBe("Username taken");
 
     change("erikrasm"); // too long
+    change("erikrasmu"); // too long
+    change("erikrasmus"); // too long
 
     await sleep(delay / 2);
 
@@ -464,7 +467,7 @@ describe("Field.validation", () => {
     // wait for validation to return
     await sleep(delay * 2);
 
-    // spy called because sync validation passed
+    // spy called because async validation passed
     expect(spy).toHaveBeenCalledTimes(4);
     expect(spy.mock.calls[3][0].error).toBeUndefined();