Rely on bubbling for submit and reset events (#13358)

* Bring back onSubmit bubble test I found a test that was written more than 5 years ago and probably never run until now. The behavior still works, although the API changed quite a bit over the years. Seems like this was part of the initial public release already: 75897c2#diff-1bf5126edab96f3b7fea034cd3b0c742R31 * Rely on bubbling for submit and reset events * Update dom fixture lockfile * Revet rollup results Whoopsie.
facebook · Aug 10, 2018 · 725e499 · 725e499
1 parent e07a3cd
commit 725e499
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 55 deletions.
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
@@ -2153,14 +2153,6 @@ dotenv@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
 
-draft-js@^0.10.5:
-  version "0.10.5"
-  resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
-  dependencies:
-    fbjs "^0.8.15"
-    immutable "~3.7.4"
-    object-assign "^4.1.0"
-
 duplexer2@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -2680,7 +2672,7 @@ fbjs@^0.8.1, fbjs@^0.8.4:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fbjs@^0.8.15, fbjs@^0.8.16:
+fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3310,10 +3302,6 @@ ignore@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
 
-immutable@~3.7.4:
-  version "3.7.6"
-  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
-
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"

diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js
@@ -23,34 +23,41 @@ describe('ReactDOM', () => {
     ReactTestUtils = require('react-dom/test-utils');
   });
 
-  // TODO: uncomment this test once we can run in phantom, which
-  // supports real submit events.
-  /*
   it('should bubble onSubmit', function() {
-    const count = 0;
-    const form;
-    const Parent = React.createClass({
-      handleSubmit: function() {
-        count++;
-        return false;
-      },
-      render: function() {
-        return <Child />;
-      }
-    });
-    const Child = React.createClass({
-      render: function() {
-        return <form><input type="submit" value="Submit" /></form>;
-      },
-      componentDidMount: function() {
-        form = ReactDOM.findDOMNode(this);
-      }
-    });
-    const instance = ReactTestUtils.renderIntoDocument(<Parent />);
-    form.submit();
-    expect(count).toEqual(1);
+    const container = document.createElement('div');
+
+    let count = 0;
+    let buttonRef;
+
+    function Parent() {
+      return (
+        <div
+          onSubmit={event => {
+            event.preventDefault();
+            count++;
+          }}>
+          <Child />
+        </div>
+      );
+    }
+
+    function Child() {
+      return (
+        <form>
+          <input type="submit" ref={button => (buttonRef = button)} />
+        </form>
+      );
+    }
+
+    document.body.appendChild(container);
+    try {
+      ReactDOM.render(<Parent />, container);
+      buttonRef.click();
+      expect(count).toBe(1);
+    } finally {
+      document.body.removeChild(container);
+    }
   });
-  */
 
   it('allows a DOM element to be used with a string', () => {
     const element = React.createElement('div', {className: 'foo'});

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
@@ -361,7 +361,6 @@ describe('ReactDOMEventListener', () => {
           <audio {...mediaEvents}>
             <source {...mediaEvents} />
           </audio>
-          <form onReset={() => {}} onSubmit={() => {}} />
         </div>,
         container,
       );

diff --git a/packages/react-dom/src/client/ReactDOMFiberComponent.js b/packages/react-dom/src/client/ReactDOMFiberComponent.js
@@ -25,8 +25,6 @@ import {
   TOP_ERROR,
   TOP_INVALID,
   TOP_LOAD,
-  TOP_RESET,
-  TOP_SUBMIT,
   TOP_TOGGLE,
 } from '../events/DOMTopLevelEventTypes';
 import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter';
@@ -481,11 +479,6 @@ export function setInitialProperties(
       trapBubbledEvent(TOP_LOAD, domElement);
       props = rawProps;
       break;
-    case 'form':
-      trapBubbledEvent(TOP_RESET, domElement);
-      trapBubbledEvent(TOP_SUBMIT, domElement);
-      props = rawProps;
-      break;
     case 'details':
       trapBubbledEvent(TOP_TOGGLE, domElement);
       props = rawProps;
@@ -868,10 +861,6 @@ export function diffHydratedProperties(
       trapBubbledEvent(TOP_ERROR, domElement);
       trapBubbledEvent(TOP_LOAD, domElement);
       break;
-    case 'form':
-      trapBubbledEvent(TOP_RESET, domElement);
-      trapBubbledEvent(TOP_SUBMIT, domElement);
-      break;
     case 'details':
       trapBubbledEvent(TOP_TOGGLE, domElement);
       break;

diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
@@ -14,9 +14,7 @@ import {
   TOP_CLOSE,
   TOP_FOCUS,
   TOP_INVALID,
-  TOP_RESET,
   TOP_SCROLL,
-  TOP_SUBMIT,
   getRawEventName,
   mediaEventTypes,
 } from './DOMTopLevelEventTypes';
@@ -153,8 +151,6 @@ export function listenTo(
           }
           break;
         case TOP_INVALID:
-        case TOP_SUBMIT:
-        case TOP_RESET:
           // We listen to them on the target DOM elements.
           // Some of them bubble so we don't want them to fire twice.
           break;