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: https://github.com/facebook/react/commit/75897c2dcd1dd3a6ca46284dd37e13d22b4b16b4#diff-1bf5126edab96f3b7fea034cd3b0c742R31 * Rely on bubbling for submit and reset events * Update dom fixture lockfile * Revet rollup results Whoopsie.
Philipp Spieß committed
Aug 10, 2018 at 21:10 UTC
725e499cfb4da60da46aa5b44c4bad29cad3d08f
5 files changed
+34
-55
fixtures/dom/yarn.lock
+1
-13
@@ -2153,14 +2153,6 @@ dotenv@4.0.0:
2153
version "4.0.0"
2154
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
2155
2156
-draft-js@^0.10.5:
2157
- version "0.10.5"
2158
- resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
2159
- dependencies:
2160
- fbjs "^0.8.15"
2161
- immutable "~3.7.4"
2162
- object-assign "^4.1.0"
2163
-
2156
duplexer2@^0.1.4:
2157
version "0.1.4"
2158
resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -2680,7 +2672,7 @@ fbjs@^0.8.1, fbjs@^0.8.4:
2672
setimmediate "^1.0.5"
2673
ua-parser-js "^0.7.9"
2674
2683
-fbjs@^0.8.15, fbjs@^0.8.16:
2675
+fbjs@^0.8.16:
2676
version "0.8.16"
2677
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
2678
dependencies:
@@ -3310,10 +3302,6 @@ ignore@^3.3.3:
3302
version "3.3.3"
3303
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
3304
3313
-immutable@~3.7.4:
3314
- version "3.7.6"
3315
- resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
3316
-
3305
imurmurhash@^0.1.4:
3306
version "0.1.4"
3307
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
packages/react-dom/src/__tests__/ReactDOM-test.js
+33
-26
@@ -23,34 +23,41 @@ describe('ReactDOM', () => {
23
ReactTestUtils = require('react-dom/test-utils');
24
});
25
26
- // TODO: uncomment this test once we can run in phantom, which
27
- // supports real submit events.
28
- /*
26
it('should bubble onSubmit', function() {
30
- const count = 0;
31
- const form;
32
- const Parent = React.createClass({
33
- handleSubmit: function() {
34
- count++;
35
- return false;
36
- },
37
- render: function() {
38
- return <Child />;
39
- }
40
- });
41
- const Child = React.createClass({
42
- render: function() {
43
- return <form><input type="submit" value="Submit" /></form>;
44
- },
45
- componentDidMount: function() {
46
- form = ReactDOM.findDOMNode(this);
47
- }
48
- });
49
- const instance = ReactTestUtils.renderIntoDocument(<Parent />);
50
- form.submit();
51
- expect(count).toEqual(1);
27
+ const container = document.createElement('div');
28
+
29
+ let count = 0;
30
+ let buttonRef;
31
+
32
+ function Parent() {
33
+ return (
34
+ <div
35
+ onSubmit={event => {
36
+ event.preventDefault();
37
+ count++;
38
+ }}>
39
+ <Child />
40
+ </div>
41
+ );
42
+ }
43
+
44
+ function Child() {
45
+ return (
46
+ <form>
47
+ <input type="submit" ref={button => (buttonRef = button)} />
48
+ </form>
49
+ );
50
+ }
51
+
52
+ document.body.appendChild(container);
53
+ try {
54
+ ReactDOM.render(<Parent />, container);
55
+ buttonRef.click();
56
+ expect(count).toBe(1);
57
+ } finally {
58
+ document.body.removeChild(container);
59
+ }
60
});
53
- */
61
62
it('allows a DOM element to be used with a string', () => {
63
const element = React.createElement('div', {className: 'foo'});
packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
-1
@@ -361,7 +361,6 @@ describe('ReactDOMEventListener', () => {
361
<audio {...mediaEvents}>
362
<source {...mediaEvents} />
363
</audio>
364
- <form onReset={() => {}} onSubmit={() => {}} />
364
</div>,
365
container,
366
);
packages/react-dom/src/client/ReactDOMFiberComponent.js
-11
@@ -25,8 +25,6 @@ import {
25
TOP_ERROR,
26
TOP_INVALID,
27
TOP_LOAD,
28
- TOP_RESET,
29
- TOP_SUBMIT,
28
TOP_TOGGLE,
29
} from '../events/DOMTopLevelEventTypes';
30
import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter';
@@ -481,11 +479,6 @@ export function setInitialProperties(
479
trapBubbledEvent(TOP_LOAD, domElement);
480
props = rawProps;
481
break;
484
- case 'form':
485
- trapBubbledEvent(TOP_RESET, domElement);
486
- trapBubbledEvent(TOP_SUBMIT, domElement);
487
- props = rawProps;
488
- break;
482
case 'details':
483
trapBubbledEvent(TOP_TOGGLE, domElement);
484
props = rawProps;
@@ -868,10 +861,6 @@ export function diffHydratedProperties(
861
trapBubbledEvent(TOP_ERROR, domElement);
862
trapBubbledEvent(TOP_LOAD, domElement);
863
break;
871
- case 'form':
872
- trapBubbledEvent(TOP_RESET, domElement);
873
- trapBubbledEvent(TOP_SUBMIT, domElement);
874
- break;
864
case 'details':
865
trapBubbledEvent(TOP_TOGGLE, domElement);
866
break;
packages/react-dom/src/events/ReactBrowserEventEmitter.js
-4
@@ -14,9 +14,7 @@ import {
14
TOP_CLOSE,
15
TOP_FOCUS,
16
TOP_INVALID,
17
- TOP_RESET,
17
TOP_SCROLL,
19
- TOP_SUBMIT,
18
getRawEventName,
19
mediaEventTypes,
20
} from './DOMTopLevelEventTypes';
@@ -153,8 +151,6 @@ export function listenTo(
151
}
152
break;
153
case TOP_INVALID:
156
- case TOP_SUBMIT:
157
- case TOP_RESET:
154
// We listen to them on the target DOM elements.
155
// Some of them bubble so we don't want them to fire twice.
156
break;