Skip to content

Commit 9444a54

Browse files
authored
Warn on nested EventTragets in experimental event API (#15287)
1 parent a050f3d commit 9444a54

File tree

4 files changed

+72
-0
lines changed

4 files changed

+72
-0
lines changed

packages/react-dom/src/client/ReactDOMHostConfig.js

+5
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,11 @@ export function getChildHostContextForEvent(
190190
let eventData = null;
191191

192192
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+
);
193198
eventData = {
194199
isEventComponent: true,
195200
isEventTarget: false,

packages/react-noop-renderer/src/createReactNoop.js

+4
Original file line numberDiff line numberDiff line change
@@ -268,6 +268,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
268268
) {
269269
if (__DEV__ && enableEventAPI) {
270270
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+
);
271275
return EVENT_COMPONENT_CONTEXT;
272276
} else if (type === REACT_EVENT_TARGET_TYPE) {
273277
warning(

packages/react-reconciler/src/__tests__/ReactFiberEvents-test-internal.js

+59
Original file line numberDiff line numberDiff line change
@@ -200,6 +200,25 @@ describe('ReactFiberEvents', () => {
200200
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
201201
);
202202
});
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+
});
203222
});
204223

205224
describe('TestRenderer', () => {
@@ -368,6 +387,26 @@ describe('ReactFiberEvents', () => {
368387
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
369388
);
370389
});
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+
});
371410
});
372411

373412
describe('ReactDOM', () => {
@@ -535,6 +574,26 @@ describe('ReactFiberEvents', () => {
535574
'Warning: validateDOMNesting: React event targets must be direct children of event components.',
536575
);
537576
});
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+
});
538597
});
539598

540599
describe('ReactDOMServer', () => {

packages/react-test-renderer/src/ReactTestHostConfig.js

+4
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,10 @@ export function getChildHostContextForEvent(
133133
): HostContext {
134134
if (__DEV__ && enableEventAPI) {
135135
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+
);
136140
return EVENT_COMPONENT_CONTEXT;
137141
} else if (type === REACT_EVENT_TARGET_TYPE) {
138142
warning(

0 commit comments

Comments
 (0)