fix(manager): set form.validating to true when a field is being validated

Author: rvsia

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

@@ -1499,6 +1499,39 @@ describe('managerApi', () => {
         });
       });
     });
+
+    it('should set form.validating when fields are validating', async (done) => {
+      expect.assertions(8);
+      jest.useFakeTimers();
+      const render = jest.fn();
+
+      const managerApi = createManagerApi({});
+      managerApi().registerField({ name: 'field', validate: asyncValidate1, render, internalId: 1 });
+      managerApi().registerField({ name: 'field', validate: asyncValidate2, render, internalId: 2 });
+
+      expect(managerApi().getFieldState('field').validating).toEqual(true);
+      expect(managerApi().getState().validating).toEqual(true);
+
+      jest.runAllTimers();
+
+      setImmediate(() => {
+        expect(managerApi().getFieldState('field').validating).toEqual(false);
+        expect(managerApi().getState().validating).toEqual(false);
+
+        managerApi().change('field', 'ok');
+
+        expect(managerApi().getFieldState('field').validating).toEqual(true);
+        expect(managerApi().getState().validating).toEqual(true);
+
+        jest.runAllTimers();
+
+        setImmediate(() => {
+          expect(managerApi().getFieldState('field').validating).toEqual(false);
+          expect(managerApi().getState().validating).toEqual(false);
+          done();
+        });
+      });
+    });
   });
 
   describe('initialize', () => {

packages/form-state-manager/src/types/manager-api.d.ts

@@ -54,7 +54,11 @@ export interface AsyncWatcherApi {
   registerValidator: (callback: Promise<unknown>) => void;
 }
 
-export type AsyncWatcher = (updateValidating: (validating: boolean) => void, updateSubmitting: (submitting: boolean) => void) => AsyncWatcherApi;
+export type AsyncWatcher = (
+  updateValidating: (validating: boolean) => void,
+  updateSubmitting: (submitting: boolean) => void,
+  updateFormValidating: (increment: number) => void
+) => AsyncWatcherApi;
 
 export type Rerender = (subscribeTo?: Array<string>) => void;
 

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

@@ -46,17 +46,19 @@ type objectMapFunction = (value: any, key: any) => any;
 // TODO: try to optimize
 const traverseObject = (object: AnyObject, callback: objectMapFunction) => Object.keys(object).forEach((key) => callback(object[key], key));
 
-const asyncWatcher: AsyncWatcher = (updateValidating, updateSubmitting) => {
+const asyncWatcher: AsyncWatcher = (updateValidating, updateSubmitting, updateFormValidating) => {
   let nextKey = 0;
   const asyncValidators: AsyncWatcherRecord = {};
   // const asyncSubmissions: AsyncWatcherRecord = {};
 
   const resolveValidator = (resolveKey: number): void => {
     delete asyncValidators[resolveKey];
+    updateFormValidating(-1);
     updateValidating(Object.keys(asyncValidators).length !== 0);
   };
 
   const registerValidator = (callback: Promise<unknown>) => {
+    updateFormValidating(1);
     const resolveKey = nextKey;
     asyncValidators[nextKey] = callback;
     updateValidating(Object.keys(asyncValidators).length !== 0);
@@ -244,8 +246,20 @@ const createManagerApi: CreateManagerApi = ({
   let registeringField: string | number | undefined;
   let isSilent = false;
   let silentRender: string[] = [];
+  let runningValidators = 0;
 
-  const asyncWatcherApi = asyncWatcher(updateValidating, updateSubmitting);
+  function updateRunningValidators(increment: number): void {
+    runningValidators = Math.max(runningValidators + increment, 0);
+
+    const validating = runningValidators > 0;
+
+    if (state.validating !== validating) {
+      state.validating = validating;
+      rerender(['validating']);
+    }
+  }
+
+  const asyncWatcherApi = asyncWatcher(updateValidating, updateSubmitting, updateRunningValidators);
 
   const managerApi: ManagerApi = () => state;
 
@@ -685,7 +699,7 @@ const createManagerApi: CreateManagerApi = ({
           state.fieldListeners[field.name].state.meta.validating = validating;
         };
 
-        const fieldAsyncWatcher = asyncWatcher(updateFieldValidating, () => undefined);
+        const fieldAsyncWatcher = asyncWatcher(updateFieldValidating, () => undefined, updateRunningValidators);
         state.fieldListeners[field.name].asyncWatcher = fieldAsyncWatcher;
       }