Revert "Rely on bubbling for submit and reset events (#13358)" (#13462)
This reverts commit 725e499cfb4da60da46aa5b44c4bad29cad3d08f.
Dan Abramov committed
Aug 22, 2018 at 19:33 UTC
a1be17140da0164d4dfce8e7c76e64f2d7e9216c
5 files changed
+55
-34
fixtures/dom/yarn.lock
+13
-1
@@ -2153,6 +2153,14 @@ 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
+
2164
duplexer2@^0.1.4:
2165
version "0.1.4"
2166
resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -2672,7 +2680,7 @@ fbjs@^0.8.1, fbjs@^0.8.4:
2680
setimmediate "^1.0.5"
2681
ua-parser-js "^0.7.9"
2682
2675
-fbjs@^0.8.16:
2683
+fbjs@^0.8.15, fbjs@^0.8.16:
2684
version "0.8.16"
2685
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
2686
dependencies:
@@ -3302,6 +3310,10 @@ ignore@^3.3.3:
3310
version "3.3.3"
3311
resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
3312
3313
+immutable@~3.7.4:
3314
+ version "3.7.6"
3315
+ resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
3316
+
3317
imurmurhash@^0.1.4:
3318
version "0.1.4"
3319
resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
packages/react-dom/src/__tests__/ReactDOM-test.js
+26
-33
@@ -23,41 +23,34 @@ 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
+ /*
29
it('should bubble onSubmit', function() {
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
- }
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);
52
});
53
+ */
54
55
it('allows a DOM element to be used with a string', () => {
56
const element = React.createElement('div', {className: 'foo'});
packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+1
@@ -361,6 +361,7 @@ describe('ReactDOMEventListener', () => {
361
<audio {...mediaEvents}>
362
<source {...mediaEvents} />
363
</audio>
364
+ <form onReset={() => {}} onSubmit={() => {}} />
365
</div>,
366
container,
367
);
packages/react-dom/src/client/ReactDOMFiberComponent.js
+11
@@ -25,6 +25,8 @@ import {
25
TOP_ERROR,
26
TOP_INVALID,
27
TOP_LOAD,
28
+ TOP_RESET,
29
+ TOP_SUBMIT,
30
TOP_TOGGLE,
31
} from '../events/DOMTopLevelEventTypes';
32
import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter';
@@ -479,6 +481,11 @@ export function setInitialProperties(
481
trapBubbledEvent(TOP_LOAD, domElement);
482
props = rawProps;
483
break;
484
+ case 'form':
485
+ trapBubbledEvent(TOP_RESET, domElement);
486
+ trapBubbledEvent(TOP_SUBMIT, domElement);
487
+ props = rawProps;
488
+ break;
489
case 'details':
490
trapBubbledEvent(TOP_TOGGLE, domElement);
491
props = rawProps;
@@ -861,6 +868,10 @@ export function diffHydratedProperties(
868
trapBubbledEvent(TOP_ERROR, domElement);
869
trapBubbledEvent(TOP_LOAD, domElement);
870
break;
871
+ case 'form':
872
+ trapBubbledEvent(TOP_RESET, domElement);
873
+ trapBubbledEvent(TOP_SUBMIT, domElement);
874
+ break;
875
case 'details':
876
trapBubbledEvent(TOP_TOGGLE, domElement);
877
break;
packages/react-dom/src/events/ReactBrowserEventEmitter.js
+4
@@ -14,7 +14,9 @@ import {
14
TOP_CLOSE,
15
TOP_FOCUS,
16
TOP_INVALID,
17
+ TOP_RESET,
18
TOP_SCROLL,
19
+ TOP_SUBMIT,
20
getRawEventName,
21
mediaEventTypes,
22
} from './DOMTopLevelEventTypes';
@@ -151,6 +153,8 @@ export function listenTo(
153
}
154
break;
155
case TOP_INVALID:
156
+ case TOP_SUBMIT:
157
+ case TOP_RESET:
158
// We listen to them on the target DOM elements.
159
// Some of them bubble so we don't want them to fire twice.
160
break;