Warn on nested EventTragets in experimental event API (#15287)
Dominic Gannaway committed
Apr 1, 2019 at 15:47 UTC
9444a5472082bbc38b598aa6404d39b9554bbdf7
4 files changed
+72
packages/react-dom/src/client/ReactDOMHostConfig.js
+5
@@ -190,6 +190,11 @@ export function getChildHostContextForEvent(
190
let eventData = null;
191
192
if (type === REACT_EVENT_COMPONENT_TYPE) {
193
+ warning(
194
+ parentHostContextDev.eventData === null ||
195
+ !parentHostContextDev.eventData.isEventTarget,
196
+ 'validateDOMNesting: React event targets must not have event components as children.',
197
+ );
198
eventData = {
199
isEventComponent: true,
200
isEventTarget: false,
packages/react-noop-renderer/src/createReactNoop.js
+4
@@ -268,6 +268,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
268
) {
269
if (__DEV__ && enableEventAPI) {
270
if (type === REACT_EVENT_COMPONENT_TYPE) {
271
+ warning(
272
+ parentHostContext !== EVENT_TARGET_CONTEXT,
273
+ 'validateDOMNesting: React event targets must not have event components as children.',
274
+ );
275
return EVENT_COMPONENT_CONTEXT;
276
} else if (type === REACT_EVENT_TARGET_TYPE) {
277
warning(
packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js
+59
@@ -200,6 +200,25 @@ describe('ReactFiberEvents', () => {
200
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
201
);
202
});
203
+
204
+ it('should warn if an event target has an event component as a child', () => {
205
+ const Test = () => (
206
+ <EventComponent>
207
+ <EventTarget>
208
+ <EventComponent>
209
+ <span>Child 1</span>
210
+ </EventComponent>
211
+ </EventTarget>
212
+ </EventComponent>
213
+ );
214
+
215
+ expect(() => {
216
+ ReactNoop.render(<Test />);
217
+ expect(Scheduler).toFlushWithoutYielding();
218
+ }).toWarnDev(
219
+ 'Warning: validateDOMNesting: React event targets must not have event components as children.',
220
+ );
221
+ });
222
});
223
224
describe('TestRenderer', () => {
@@ -368,6 +387,26 @@ describe('ReactFiberEvents', () => {
387
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
388
);
389
});
390
+
391
+ it('should warn if an event target has an event component as a child', () => {
392
+ const Test = () => (
393
+ <EventComponent>
394
+ <EventTarget>
395
+ <EventComponent>
396
+ <span>Child 1</span>
397
+ </EventComponent>
398
+ </EventTarget>
399
+ </EventComponent>
400
+ );
401
+
402
+ const root = ReactTestRenderer.create(null);
403
+ expect(() => {
404
+ root.update(<Test />);
405
+ expect(Scheduler).toFlushWithoutYielding();
406
+ }).toWarnDev(
407
+ 'Warning: validateDOMNesting: React event targets must not have event components as children.',
408
+ );
409
+ });
410
});
411
412
describe('ReactDOM', () => {
@@ -535,6 +574,26 @@ describe('ReactFiberEvents', () => {
574
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
575
);
576
});
577
+
578
+ it('should warn if an event target has an event component as a child', () => {
579
+ const Test = () => (
580
+ <EventComponent>
581
+ <EventTarget>
582
+ <EventComponent>
583
+ <span>Child 1</span>
584
+ </EventComponent>
585
+ </EventTarget>
586
+ </EventComponent>
587
+ );
588
+
589
+ expect(() => {
590
+ const container = document.createElement('div');
591
+ ReactDOM.render(<Test />, container);
592
+ expect(Scheduler).toFlushWithoutYielding();
593
+ }).toWarnDev(
594
+ 'Warning: validateDOMNesting: React event targets must not have event components as children.',
595
+ );
596
+ });
597
});
598
599
describe('ReactDOMServer', () => {
packages/react-test-renderer/src/ReactTestHostConfig.js
+4
@@ -133,6 +133,10 @@ export function getChildHostContextForEvent(
133
): HostContext {
134
if (__DEV__ && enableEventAPI) {
135
if (type === REACT_EVENT_COMPONENT_TYPE) {
136
+ warning(
137
+ parentHostContext !== EVENT_TARGET_CONTEXT,
138
+ 'validateDOMNesting: React event targets must not have event components as children.',
139
+ );
140
return EVENT_COMPONENT_CONTEXT;
141
} else if (type === REACT_EVENT_TARGET_TYPE) {
142
warning(