Prevent submit from propagating. (#1336)

* Prevent submit from propagating.

* Only handle submit events fired by same form

* Add example of nesting forms in react dom; ensure submit doesn't propagate

* fix package-lock

* prevent default event handler for all form submits

* Use different spys for each form submit

package.json

@@ -69,6 +69,7 @@
     "babel-loader": "^8.0.6",
     "chai": "^3.3.0",
     "codemirror": "^5.30.0",
+    "create-react-ref": "^0.1.0",
     "cross-env": "^2.0.1",
     "css-loader": "^0.23.1",
     "eslint": "^4.9.0",
@@ -93,6 +94,7 @@
     "react": "^15.5.0",
     "react-codemirror2": "^4.1.0",
     "react-dom": "^15.3.2",
+    "react-portal": "^4.2.0",
     "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.1",
     "redbox-react": "^1.3.3",

src/components/Form.js

@@ -220,6 +220,10 @@ export default class Form extends Component {
 
   onSubmit = event => {
     event.preventDefault();
+    if (event.target !== event.currentTarget) {
+      return;
+    }
+
     event.persist();
     let newFormData = this.state.formData;
 

test/Form_test.js

@@ -3,6 +3,8 @@ import sinon from "sinon";
 import React from "react";
 import { renderIntoDocument, Simulate } from "react-dom/test-utils";
 import { findDOMNode } from "react-dom";
+import { Portal } from "react-portal";
+import { createRef } from "create-react-ref";
 
 import Form from "../src";
 import {
@@ -2414,4 +2416,57 @@ describe("Form", () => {
       expect(node.tagName).eql(tagName);
     });
   });
+
+  describe("Nested forms", () => {
+    it("should call provided submit handler with form state", () => {
+      const innerOnSubmit = sandbox.spy();
+      const outerOnSubmit = sandbox.spy();
+      let innerRef;
+
+      class ArrayTemplateWithForm extends React.Component {
+        constructor(props) {
+          super(props);
+          innerRef = createRef();
+        }
+
+        render() {
+          const innerFormProps = {
+            schema: {},
+            onSubmit: innerOnSubmit,
+          };
+
+          return (
+            <Portal>
+              <div className="array" ref={innerRef}>
+                <Form {...innerFormProps}>
+                  <button className="array-form-submit" type="submit">
+                    Submit
+                  </button>
+                </Form>
+              </div>
+            </Portal>
+          );
+        }
+      }
+
+      const outerFormProps = {
+        schema: {
+          type: "array",
+          title: "my list",
+          description: "my description",
+          items: { type: "string" },
+        },
+        formData: ["foo", "bar"],
+        ArrayFieldTemplate: ArrayTemplateWithForm,
+        onSubmit: outerOnSubmit,
+      };
+      createFormComponent(outerFormProps);
+      const arrayForm = innerRef.current.querySelector("form");
+      const arraySubmit = arrayForm.querySelector(".array-form-submit");
+
+      arraySubmit.click();
+      sinon.assert.calledOnce(innerOnSubmit);
+      sinon.assert.notCalled(outerOnSubmit);
+    });
+  });
 });