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

This reverts commit 725e499.
gaearon · Aug 22, 2018 · 4b465ee · 4b465ee
1 parent 90c92c7
commit 4b465ee
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 34 deletions.
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
@@ -2153,6 +2153,14 @@ 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"
@@ -2672,7 +2680,7 @@ fbjs@^0.8.1, fbjs@^0.8.4:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fbjs@^0.8.16:
+fbjs@^0.8.15, fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3302,6 +3310,10 @@ 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,41 +23,34 @@ 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 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);
-    }
+    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);
   });
+  */
 
   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,6 +361,7 @@ 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,6 +25,8 @@ import {
   TOP_ERROR,
   TOP_INVALID,
   TOP_LOAD,
+  TOP_RESET,
+  TOP_SUBMIT,
   TOP_TOGGLE,
 } from '../events/DOMTopLevelEventTypes';
 import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter';
@@ -479,6 +481,11 @@ 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;
@@ -861,6 +868,10 @@ 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,7 +14,9 @@ import {
   TOP_CLOSE,
   TOP_FOCUS,
   TOP_INVALID,
+  TOP_RESET,
   TOP_SCROLL,
+  TOP_SUBMIT,
   getRawEventName,
   mediaEventTypes,
 } from './DOMTopLevelEventTypes';
@@ -151,6 +153,8 @@ 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;