From 761b3ef444f08a7aff71e99c6cbaccc25cf8a6a7 Mon Sep 17 00:00:00 2001
From: Stephan Kaag <stephankaag@users.noreply.github.com>
Date: Sun, 16 Feb 2020 00:07:59 +0100
Subject: [PATCH] Added possibility to use browser builtin submit (#226)

* Added possibility to use browser builtin submit

* Make sure preventDefaultSubmit works as expected

* Revert unrelated change

* Update Formsy-spec.tsx

* Update API.md

* Update Formsy-spec.tsx

Co-authored-by: Kamil Burzynski <Nopik@users.noreply.github.com>
Co-authored-by: Robert Kuykendall <robert@rkuykendall.com>
---
 API.md                    | 17 +++++++++++++++++
 __tests__/Formsy-spec.tsx | 35 +++++++++++++++++++++++++++++++++++
 src/index.ts              |  8 ++++++--
 3 files changed, 58 insertions(+), 2 deletions(-)

diff --git a/API.md b/API.md
index a1cdf827..b8eb0a17 100644
--- a/API.md
+++ b/API.md
@@ -9,6 +9,7 @@
   - [onSubmit()](#onSubmit)
   - [onValid()](#onValid)
   - [onValidSubmit()](#onValidsubmit)
+  - [preventDefaultSubmit](#preventDefaultSubmit)
   - [preventExternalInvalidation](#preventExternalInvalidation)
   - [reset()](#reset)
   - [updateInputsWithError()](#updateInputsWithError)
@@ -231,6 +232,22 @@ class MyForm extends React.Component {
 Manually set the form fields values by taking an object that maps field name to value as the first argument and
 optionally validate the inputs by passing `true` as the second argument.
 
+#### <a id="preventDefaultSubmit">preventDefaultSubmit</a>
+
+```jsx
+class MyForm extends React.Component {
+  render() {
+    return (
+      <Formsy preventDefaultSubmit>
+        ...
+      </Formsy>
+    );
+  }
+}
+```
+
+With the `preventDefaultSubmit` prop the form will issue full HTTP POST by browser means (and render resulting HTML).
+
 #### <a id="preventExternalInvalidation">preventExternalInvalidation</a>
 
 ```jsx
diff --git a/__tests__/Formsy-spec.tsx b/__tests__/Formsy-spec.tsx
index 7eed1167..440832dc 100755
--- a/__tests__/Formsy-spec.tsx
+++ b/__tests__/Formsy-spec.tsx
@@ -457,6 +457,41 @@ describe('Update a form', () => {
     expect(input.instance().getErrorMessage()).toEqual(null);
   });
 
+  it('should prevent a default submit', () => {
+    class TestForm extends React.Component {
+      render() {
+        return (
+          <Formsy>
+            <TestInput name="foo" validations="isEmail" value="foo@bar.com" />
+          </Formsy>
+        );
+      }
+    }
+    const form = mount(<TestForm />);
+    const FoundForm = form.find(TestForm);
+    const submitEvent = {preventDefault: jest.fn()};
+    FoundForm.simulate('submit', submitEvent);
+    expect(submitEvent.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should not prevent a default submit when preventDefaultSubmit is passed', () => {
+    class TestForm extends React.Component {
+      render() {
+        return (
+          <Formsy preventDefaultSubmit={false}>
+            <TestInput name="foo" validations="isEmail" value="foo@bar.com" />
+          </Formsy>
+        );
+      }
+    }
+    const form = mount(<TestForm />);
+    const FoundForm = form.find(TestForm);
+    const submitEvent = {preventDefault: jest.fn()};
+    FoundForm.simulate('submit', submitEvent);
+    expect(submitEvent.preventDefault).not.toHaveBeenCalled();
+  });
+
+
   it('should trigger an onValidSubmit when submitting a valid form', () => {
     const isCalled = jest.fn();
 
diff --git a/src/index.ts b/src/index.ts
index 7c5d85e7..81294e37 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -43,6 +43,7 @@ export interface FormsyProps extends FormHTMLAttributesCleaned {
   onValid: () => void;
   onValidSubmit?: (model: IModel, resetModel: IResetModel, updateInputsWithError: IUpdateInputsWithError) => void;
   preventExternalInvalidation?: boolean;
+  preventDefaultSubmit?: boolean;
   resetValue: any;
   setValidations: any;
   setValue: any;
@@ -90,6 +91,7 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
     onValid: PropTypes.func,
     onValidSubmit: PropTypes.func,
     preventExternalInvalidation: PropTypes.bool,
+    preventDefaultSubmit: PropTypes.bool,
     resetValue: PropTypes.func,
     setValidations: PropTypes.func,
     setValue: PropTypes.func,
@@ -120,6 +122,7 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
     onValid: utils.noop,
     onValidSubmit: utils.noop,
     preventExternalInvalidation: false,
+    preventDefaultSubmit: true,
     resetValue: utils.noop,
     setValidations: utils.noop,
     setValue: utils.noop,
@@ -381,10 +384,10 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
 
   // Update model, submit to url prop and send the model
   public submit = (event?: any) => {
-    const { onSubmit, onValidSubmit, onInvalidSubmit } = this.props;
+    const { onSubmit, onValidSubmit, onInvalidSubmit, preventDefaultSubmit } = this.props;
     const { isValid } = this.state;
 
-    if (event && event.preventDefault) {
+    if (preventDefaultSubmit && event && event.preventDefault) {
       event.preventDefault();
     }
 
@@ -533,6 +536,7 @@ class Formsy extends React.Component<FormsyProps, FormsyState> {
       onValid,
       onValidSubmit,
       preventExternalInvalidation,
+      preventDefaultSubmit,
       resetValue,
       setValidations,
       setValue,