fix(manager): reset errors when revalidated

Author: rvsia

packages/form-state-manager/src/tests/utils/manager-api.test.js

@@ -1219,6 +1219,47 @@ describe('managerApi', () => {
         });
       });
     });
+
+    it('should reset error state when revalidated', () => {
+      jest.useFakeTimers();
+      const render = jest.fn();
+      const managerApi = createManagerApi({ validate: asyncValidate });
+      const { registerField, change } = managerApi();
+
+      registerField({ name: 'foo', render });
+
+      change('foo', 'foo');
+
+      jest.advanceTimersByTime(10);
+      setImmediate(() => {
+        expect(managerApi().getState().errors).toEqual({
+          foo: 'error'
+        });
+        expect(managerApi().getState().valid).toEqual(false);
+        expect(managerApi().getState().invalid).toEqual(true);
+        expect(managerApi().getState().validating).toEqual(false);
+        expect(managerApi().hasValidationErrors).toEqual(true);
+
+        change('foo', 'foo');
+
+        expect(managerApi().getState().errors).toEqual({});
+        expect(managerApi().getState().valid).toEqual(true);
+        expect(managerApi().getState().invalid).toEqual(false);
+        expect(managerApi().getState().validating).toEqual(true);
+        expect(managerApi().hasValidationErrors).toEqual(false);
+
+        jest.advanceTimersByTime(10);
+        setImmediate(() => {
+          expect(managerApi().getState().errors).toEqual({
+            foo: 'error'
+          });
+          expect(managerApi().getState().valid).toEqual(false);
+          expect(managerApi().getState().invalid).toEqual(true);
+          expect(managerApi().getState().validating).toEqual(false);
+          expect(managerApi().hasValidationErrors).toEqual(true);
+        });
+      });
+    });
   });
 
   describe('Combine form and field level validation', () => {
@@ -1532,6 +1573,37 @@ describe('managerApi', () => {
         });
       });
     });
+
+    it('should reset field.error when validating', async (done) => {
+      expect.assertions(8);
+      jest.useFakeTimers();
+      const render = jest.fn();
+
+      const managerApi = createManagerApi({});
+      managerApi().registerField({ name: 'field', initialValue: 'one', validate: asyncValidate1, render, internalId: 1 });
+
+      jest.runAllTimers();
+
+      setImmediate(() => {
+        expect(managerApi().getFieldState('field').error).toEqual('error-one');
+        expect(managerApi().getFieldState('field').valid).toEqual(false);
+        expect(managerApi().getFieldState('field').invalid).toEqual(true);
+
+        managerApi().change('field', 'ok');
+
+        expect(managerApi().getFieldState('field').error).toEqual(undefined);
+        expect(managerApi().getFieldState('field').valid).toEqual(true);
+        expect(managerApi().getFieldState('field').invalid).toEqual(false);
+
+        jest.runAllTimers();
+
+        setImmediate(() => {
+          expect(managerApi().getFieldState('field').validating).toEqual(false);
+          expect(managerApi().getState().validating).toEqual(false);
+          done();
+        });
+      });
+    });
   });
 
   describe('initialize', () => {

packages/form-state-manager/src/utils/manager-api.ts

@@ -322,6 +322,7 @@ const createManagerApi: CreateManagerApi = ({
       if (validators.length > 0) {
         const result = composeValidators(validators as Validator[])(value, state.values);
         if (isPromise(result)) {
+          handleFieldError(name, true);
           (result as Promise<string | undefined>)
             .then(() => handleFieldError(name, true))
             .catch((response) => {
@@ -443,22 +444,28 @@ const createManagerApi: CreateManagerApi = ({
     const currentInvalidFields = Object.keys(state.errors);
     if (isPromise(result)) {
       const asyncResult = result as Promise<FormLevelError>;
+
+      state.errors = {};
+      state.hasValidationErrors = false;
+      state.valid = true;
+      state.invalid = false;
+      state.error = undefined;
+
       return asyncResult
         .then(() => {
           if (!state.validating) {
-            state.errors = {};
-            state.hasValidationErrors = false;
-            state.valid = true;
-            state.invalid = false;
-            state.error = undefined;
             revalidateFields(currentInvalidFields);
           }
         })
         .catch((errors) => {
+          const render = prepareRerender();
+
           state.errors = errors;
           state.hasValidationErrors = true;
           state.valid = false;
           state.invalid = true;
+
+          render();
         });
     }