Merge pull request #861 from rvsia/invalidSubmit

fix(manager): do not allow send submit when invalid

Author: Hyperkid123

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

@@ -1904,4 +1904,25 @@ describe('managerApi', () => {
       });
     });
   });
+
+  describe('invalid submit', () => {
+    it('should not call submit action when invalid + all fields are touched', () => {
+      const onSubmit = jest.fn();
+
+      const managerApi = createManagerApi({ onSubmit });
+
+      managerApi().registerField({ name: 'field', validate: () => 'error', render: jest.fn(), internalId: 1 });
+      managerApi().registerField({ name: 'field2', render: jest.fn(), internalId: 1 });
+
+      expect(managerApi().getFieldState('field').touched).toEqual(false);
+      expect(managerApi().getFieldState('field').touched).toEqual(false);
+
+      managerApi().handleSubmit();
+
+      expect(managerApi().getFieldState('field').touched).toEqual(true);
+      expect(managerApi().getFieldState('field').touched).toEqual(true);
+
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+  });
 });

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

@@ -1,4 +1,4 @@
-import { Subscription } from './use-subscription';
+import { Subscription } from './use-field';
 import { ManagerState } from './manager-api';
 
 type Children = (props: ManagerState) => React.ReactElement;

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

@@ -554,6 +554,24 @@ const createManagerApi: CreateManagerApi = ({
   function handleSubmit(event?: FormEvent): void {
     event && event.preventDefault && event.preventDefault();
 
+    if (state.submitting) {
+      return;
+    }
+
+    if (state.invalid) {
+      state.registeredFields.forEach((name) => {
+        setFieldState(name, (state) => ({
+          ...state,
+          meta: {
+            ...state.meta,
+            touched: true
+          }
+        }));
+      });
+
+      return;
+    }
+
     let error = false;
     state.registeredFields.forEach((name) =>
       traverseObject(state.fieldListeners[name].fields, (field) => {