Merge pull request #878 from rvsia/submittingFixes

fix(manager): fix submitting

Author: rvsia

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

@@ -1843,7 +1843,7 @@ describe('managerApi', () => {
     it('calls async submit', async () => {
       jest.useFakeTimers();
 
-      const onSubmit = jest.fn().mockImplementation(() => new Promise((res) => setTimeout(() => res('ok'), 1000)));
+      const onSubmit = jest.fn().mockImplementation(() => new Promise((res) => setTimeout(() => res(), 1000)));
       const render = jest.fn();
 
       const managerApi = createManagerApi({ onSubmit });
@@ -1870,12 +1870,43 @@ describe('managerApi', () => {
       expect(managerApi().hasSubmitErrors).toEqual(false);
     });
 
+    it('calls async submit - submit fails on catch (i.e. network error), return to normal', async () => {
+      jest.useFakeTimers();
+
+      const onSubmit = jest.fn().mockImplementation(() => new Promise((res, rej) => setTimeout(() => rej(), 1000)));
+      const render = jest.fn();
+
+      const managerApi = createManagerApi({ onSubmit });
+
+      managerApi().registerField({ name: 'field', internalId: '1', render });
+
+      expect(managerApi().submitting).toEqual(false);
+      expect(render).not.toHaveBeenCalled();
+
+      managerApi().submit();
+
+      expect(render).toHaveBeenCalled();
+      render.mockClear();
+      expect(managerApi().submitting).toEqual(true);
+
+      await jest.runAllTimers();
+      await jest.runAllTimers(); // catch needs to be run 2x
+
+      expect(render).toHaveBeenCalled();
+      expect(managerApi().submitting).toEqual(false);
+      expect(managerApi().submitError).toEqual(undefined);
+      expect(managerApi().submitFailed).toEqual(false);
+      expect(managerApi().submitSucceeded).toEqual(true);
+      expect(managerApi().submitErrors).toEqual(undefined);
+      expect(managerApi().hasSubmitErrors).toEqual(false);
+    });
+
     it('calls async submit - failed', async () => {
       jest.useFakeTimers();
 
       const error = 'some evil error';
 
-      const onSubmit = jest.fn().mockImplementation(() => new Promise((res, rej) => setTimeout(() => rej(error), 100)));
+      const onSubmit = jest.fn().mockImplementation(() => new Promise((res) => setTimeout(() => res(error), 100)));
       const render = jest.fn();
 
       const managerApi = createManagerApi({ onSubmit });
@@ -1893,7 +1924,6 @@ describe('managerApi', () => {
       expect(managerApi().submitting).toEqual(true);
 
       await jest.runAllTimers();
-      await jest.runAllTimers(); // for some reason, catch branch is not triggerd on first run
 
       expect(render).toHaveBeenCalled();
       expect(managerApi().submitError).toEqual(undefined);
@@ -1909,7 +1939,7 @@ describe('managerApi', () => {
 
       const error = { [FORM_ERROR]: 'some evil error' };
 
-      const onSubmit = jest.fn().mockImplementation(() => new Promise((res, rej) => setTimeout(() => rej(error), 100)));
+      const onSubmit = jest.fn().mockImplementation(() => new Promise((res) => setTimeout(() => res(error), 100)));
       const render = jest.fn();
 
       const managerApi = createManagerApi({ onSubmit });
@@ -1927,7 +1957,6 @@ describe('managerApi', () => {
       expect(managerApi().submitting).toEqual(true);
 
       await jest.runAllTimers();
-      await jest.runAllTimers(); // for some reason, catch branch is not triggerd on first run
 
       expect(render).toHaveBeenCalled();
       expect(managerApi().submitError).toEqual('some evil error');
@@ -1937,6 +1966,45 @@ describe('managerApi', () => {
       expect(managerApi().submitErrors).toEqual(error);
       expect(managerApi().hasSubmitErrors).toEqual(true);
     });
+
+    it('calls async submit - failed - set async error on field', async () => {
+      jest.useFakeTimers();
+
+      const error = { nested: { field: 'some evil error' } };
+
+      const onSubmit = jest.fn().mockImplementation(() => new Promise((res) => setTimeout(() => res(error), 100)));
+      const render = jest.fn();
+
+      const managerApi = createManagerApi({ onSubmit });
+
+      managerApi().registerField({ name: 'nested.field', internalId: '1', render });
+
+      expect(managerApi().submitting).toEqual(false);
+      expect(render).not.toHaveBeenCalled();
+
+      managerApi().submit();
+
+      expect(render).toHaveBeenCalled();
+      render.mockClear();
+
+      expect(managerApi().getFieldState('nested.field').submitting).toEqual(true);
+      expect(managerApi().submitting).toEqual(true);
+
+      await jest.runAllTimers();
+
+      expect(render).toHaveBeenCalled();
+      expect(managerApi().submitError).toEqual(undefined);
+      expect(managerApi().submitting).toEqual(false);
+      expect(managerApi().submitFailed).toEqual(true);
+      expect(managerApi().submitSucceeded).toEqual(false);
+      expect(managerApi().submitErrors).toEqual(error);
+      expect(managerApi().hasSubmitErrors).toEqual(true);
+
+      expect(managerApi().getFieldState('nested.field').submitError).toEqual('some evil error');
+      expect(managerApi().getFieldState('nested.field').submitting).toEqual(false);
+      expect(managerApi().getFieldState('nested.field').submitFailed).toEqual(true);
+      expect(managerApi().getFieldState('nested.field').submitSucceeded).toEqual(false);
+    });
   });
 
   describe('warning validation', () => {

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

@@ -247,6 +247,7 @@ const createManagerApi: CreateManagerApi = ({
   let isSilent = false;
   let silentRender: string[] = [];
   let runningValidators = 0;
+  let flatSubmitErrors: AnyObject = {};
 
   function updateRunningValidators(increment: number): void {
     runningValidators = Math.max(runningValidators + increment, 0);
@@ -611,55 +612,89 @@ const createManagerApi: CreateManagerApi = ({
     const result = config.onSubmit(state.values);
 
     if (isPromise(result)) {
-      updateSubmitting(true);
+      setSubmitting();
       const render = prepareRerender();
 
       result
-        .then(() => {
-          state.submitErrors = undefined;
-          state.hasSubmitErrors = false;
-          state.submitFailed = false;
-          state.submitSucceeded = true;
-          state.submitting = false;
-          state.submitError = undefined;
-
+        .then((errors: unknown) => {
+          handleSubmitError(errors);
+          updateFieldSubmitMeta();
           render();
 
           runAfterSubmit();
         })
-        .catch((error: unknown) => {
-          state.submitErrors = error as AnyObject;
-          state.hasSubmitErrors = true;
-          state.submitFailed = true;
-          state.submitSucceeded = false;
-          state.submitting = false;
-          state.submitError = state.submitErrors?.[FORM_ERROR];
-
+        .catch(() => {
+          handleSubmitError();
+          updateFieldSubmitMeta();
           render();
         });
     } else {
       const render = prepareRerender();
 
-      if (result) {
-        state.submitErrors = result;
-        state.hasSubmitErrors = true;
-        state.submitFailed = true;
-        state.submitSucceeded = false;
-        state.submitError = state.submitErrors?.[FORM_ERROR];
-      } else {
-        state.submitErrors = undefined;
-        state.hasSubmitErrors = false;
-        state.submitFailed = false;
-        state.submitSucceeded = true;
-        state.submitError = undefined;
-      }
+      handleSubmitError(result);
+      updateFieldSubmitMeta();
 
       render();
 
       runAfterSubmit();
     }
   }
 
+  function updateFieldSubmitMeta(): void {
+    traverseObject(state.fieldListeners, (field, name) => {
+      if (field.state) {
+        setFieldState(
+          name,
+          (prevState) => ({
+            ...prevState,
+            meta: {
+              ...prevState.meta,
+              submitFailed: state.submitFailed,
+              submitSucceeded: state.submitSucceeded,
+              submitError: flatSubmitErrors[name],
+              submitting: state.submitting
+            }
+          }),
+          true
+        );
+      }
+    });
+  }
+
+  function handleSubmitError(errors?: any): void {
+    state.submitting = false;
+    if (errors) {
+      state.submitErrors = errors;
+      state.hasSubmitErrors = true;
+      state.submitFailed = true;
+      state.submitSucceeded = false;
+      state.submitError = state.submitErrors?.[FORM_ERROR];
+      flatSubmitErrors = flatObject(errors);
+    } else {
+      state.submitErrors = undefined;
+      state.hasSubmitErrors = false;
+      state.submitFailed = false;
+      state.submitSucceeded = true;
+      state.submitError = undefined;
+      flatSubmitErrors = {};
+    }
+  }
+
+  function setSubmitting() {
+    const render = prepareRerender();
+
+    state.submitErrors = undefined;
+    state.hasSubmitErrors = false;
+    state.submitFailed = false;
+    state.submitSucceeded = false;
+    state.submitting = true;
+    state.submitError = undefined;
+
+    updateFieldSubmitMeta();
+
+    render();
+  }
+
   function runAfterSubmit() {
     state.registeredFields.forEach((name) =>
       traverseObject(state.fieldListeners[name].fields, (field) => {
@@ -764,11 +799,11 @@ const createManagerApi: CreateManagerApi = ({
     });
   }
 
-  function setFieldState(name: string, mutateState: (prevState: FieldState) => FieldState): void {
+  function setFieldState(name: string, mutateState: (prevState: FieldState) => FieldState, dryRun = false): void {
     if (state.fieldListeners[name]) {
       const newState = mutateState(state.fieldListeners[name].state);
       state.fieldListeners[name].state = newState;
-      Object.values(state.fieldListeners[name].fields).forEach(({ render }) => render());
+      !dryRun && Object.values(state.fieldListeners[name].fields).forEach(({ render }) => render());
     }
   }