Pass submit event to onSubmitX methods, closes #549 (#552)

formsy · Aug 27, 2020 · 800dff3 · 800dff3
1 parent 12a2871
commit 800dff3
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 9 deletions.
diff --git a/__tests__/Formsy.spec.tsx b/__tests__/Formsy.spec.tsx
@@ -172,6 +172,7 @@ describe('mapModel', () => {
       { 'parent.child': 'test', testChange: true },
       expect.any(Function),
       expect.any(Function),
+      expect.any(Object),
     );
   });
 });
@@ -556,7 +557,12 @@ describe('value === false', () => {
 
     const form = mount(<TestForm />);
     form.simulate('submit');
-    expect(onSubmit).toHaveBeenCalledWith({ foo: false }, expect.any(Function), expect.any(Function));
+    expect(onSubmit).toHaveBeenCalledWith(
+      { foo: false },
+      expect.any(Function),
+      expect.any(Function),
+      expect.any(Object),
+    );
   });
 
   it('should allow dynamic changes to false', () => {
@@ -589,7 +595,12 @@ describe('value === false', () => {
     const form = mount(<TestForm />);
     (form.instance() as TestForm).changeValue();
     form.simulate('submit');
-    expect(onSubmit).toHaveBeenCalledWith({ foo: false }, expect.any(Function), expect.any(Function));
+    expect(onSubmit).toHaveBeenCalledWith(
+      { foo: false },
+      expect.any(Function),
+      expect.any(Function),
+      expect.any(Object),
+    );
   });
 
   it('should say the form is submitted', () => {
@@ -961,3 +972,27 @@ describe('form valid state', () => {
     expect(isValid).toEqual(true);
   });
 });
+
+describe('onSubmit/onValidSubmit/onInvalidSubmit', () => {
+  ['onSubmit', 'onValidSubmit', 'onInvalidSubmit'].forEach((key) => {
+    it(`should pass submit event to "${key}"`, () => {
+      const submitSpy = jest.fn();
+
+      const form = mount(
+        <Formsy {...{ [key]: submitSpy }}>
+          <button id="submit">submit</button>
+          {key === 'onInvalidSubmit' && <TestInput name="test" required={true} />}
+        </Formsy>,
+      );
+      const button = form.find('#submit');
+      button.simulate('submit');
+
+      expect(submitSpy).toHaveBeenCalledWith(
+        expect.any(Object),
+        expect.any(Function),
+        expect.any(Function),
+        expect.objectContaining({ type: 'submit' }),
+      );
+    });
+  });
+});
diff --git a/src/Formsy.ts b/src/Formsy.ts
@@ -21,16 +21,23 @@ import { PassDownProps } from './withFormsy';
 
 type FormHTMLAttributesCleaned = Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onChange' | 'onSubmit'>;
 
+type OnSubmitCallback = (
+  model: IModel,
+  resetModel: IResetModel,
+  updateInputsWithError: IUpdateInputsWithError,
+  event: React.SyntheticEvent<React.FormHTMLAttributes<any>>,
+) => void;
+
 export interface FormsyProps extends FormHTMLAttributesCleaned {
   disabled: boolean;
   mapping: null | ((model: IModel) => IModel);
   onChange: (model: IModel, isChanged: boolean) => void;
   onInvalid: () => void;
-  onInvalidSubmit: (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError) => void;
   onReset?: () => void;
-  onSubmit?: (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError) => void;
+  onSubmit?: OnSubmitCallback;
+  onValidSubmit?: OnSubmitCallback;
+  onInvalidSubmit: OnSubmitCallback;
   onValid: () => void;
-  onValidSubmit?: (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError) => void;
   preventDefaultSubmit?: boolean;
   preventExternalInvalidation?: boolean;
   validationErrors?: null | object;
@@ -331,7 +338,7 @@ export class Formsy extends React.Component<FormsyProps, FormsyState> {
   public isChanged = () => !utils.isSame(this.getPristineValues(), this.getCurrentValues());
 
   // Update model, submit to url prop and send the model
-  public submit = (event?: any) => {
+  public submit = (event?: React.SyntheticEvent) => {
     const { onSubmit, onValidSubmit, onInvalidSubmit, preventDefaultSubmit } = this.props;
     const { isValid } = this.state;
 
@@ -344,12 +351,12 @@ export class Formsy extends React.Component<FormsyProps, FormsyState> {
     // so validation becomes visible (if based on isPristine)
     this.setFormPristine(false);
     const model = this.getModel();
-    onSubmit(model, this.resetModel, this.updateInputsWithError);
+    onSubmit(model, this.resetModel, this.updateInputsWithError, event);
 
     if (isValid) {
-      onValidSubmit(model, this.resetModel, this.updateInputsWithError);
+      onValidSubmit(model, this.resetModel, this.updateInputsWithError, event);
     } else {
-      onInvalidSubmit(model, this.resetModel, this.updateInputsWithError);
+      onInvalidSubmit(model, this.resetModel, this.updateInputsWithError, event);
     }
   };