Skip to content

Commit 0b50fb2

Browse files
authored
Include rootEventTypes in DOMEventResponderSystem stopPropagation tests (#15433)
1 parent 1ae409d commit 0b50fb2

File tree

2 files changed

+58
-15
lines changed

2 files changed

+58
-15
lines changed

packages/react-dom/src/events/DOMEventResponderSystem.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -540,8 +540,8 @@ function traverseAndTriggerEventResponderInstances(
540540
let shouldStopPropagation = false;
541541
let responderEvent;
542542

543-
// Capture target phase
544543
if (length > 0) {
544+
// Capture target phase
545545
responderEvent = createResponderEvent(
546546
((topLevelType: any): string),
547547
nativeEvent,

packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js

Lines changed: 57 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,14 @@ function phaseToString(phase) {
4949
: 'capture';
5050
}
5151

52+
function dispatchEvent(element, type) {
53+
const event = document.createEvent('Event');
54+
event.initEvent(type, true, true);
55+
element.dispatchEvent(event);
56+
}
57+
5258
function dispatchClickEvent(element) {
53-
const clickEvent = document.createEvent('Event');
54-
clickEvent.initEvent('click', true, true);
55-
element.dispatchEvent(clickEvent);
59+
dispatchEvent(element, 'click');
5660
}
5761

5862
function createReactEventTarget(type) {
@@ -308,15 +312,23 @@ describe('DOMEventResponderSystem', () => {
308312
['click'],
309313
undefined,
310314
(event, context, props) => {
311-
eventLog.push(`A [${phaseToString(event.phase)}]`);
315+
context.addRootEventTypes(event.target.ownerDocument, [
316+
'click',
317+
'pointermove',
318+
]);
319+
eventLog.push(`A [${event.type}, ${phaseToString(event.phase)}]`);
312320
},
313321
);
314322

315323
const ClickEventComponentB = createReactEventComponent(
316324
['click'],
317325
undefined,
318326
(event, context, props) => {
319-
eventLog.push(`B [${phaseToString(event.phase)}]`);
327+
context.addRootEventTypes(event.target.ownerDocument, [
328+
'click',
329+
'pointermove',
330+
]);
331+
eventLog.push(`B [${event.type}, ${phaseToString(event.phase)}]`);
320332
if (event.phase === stopPropagationOnPhase) {
321333
return true;
322334
}
@@ -337,12 +349,26 @@ describe('DOMEventResponderSystem', () => {
337349
ReactDOM.render(<Test />, container);
338350
let buttonElement = buttonRef.current;
339351
dispatchClickEvent(buttonElement);
352+
dispatchEvent(buttonElement, 'pointermove');
340353
}
341354

342355
runTestWithPhase(BUBBLE_PHASE);
343-
expect(eventLog).toEqual(['A [capture]', 'B [capture]', 'B [bubble]']);
356+
// Root phase should not be skipped for different event type
357+
expect(eventLog).toEqual([
358+
'A [click, capture]',
359+
'B [click, capture]',
360+
'B [click, bubble]',
361+
'A [pointermove, root]',
362+
'B [pointermove, root]',
363+
]);
344364
runTestWithPhase(CAPTURE_PHASE);
345-
expect(eventLog).toEqual(['A [capture]', 'B [capture]']);
365+
// Root phase should not be skipped for different event type
366+
expect(eventLog).toEqual([
367+
'A [click, capture]',
368+
'B [click, capture]',
369+
'A [pointermove, root]',
370+
'B [pointermove, root]',
371+
]);
346372
});
347373

348374
it('nested event responders and their onEvent() should fire in the correct order with stopPropagation #2', () => {
@@ -354,7 +380,11 @@ describe('DOMEventResponderSystem', () => {
354380
['click'],
355381
undefined,
356382
(event, context, props) => {
357-
eventLog.push(`A [${phaseToString(event.phase)}]`);
383+
context.addRootEventTypes(event.target.ownerDocument, [
384+
'click',
385+
'pointermove',
386+
]);
387+
eventLog.push(`A [${event.type}, ${phaseToString(event.phase)}]`);
358388
if (event.phase === stopPropagationOnPhase) {
359389
return true;
360390
}
@@ -365,7 +395,11 @@ describe('DOMEventResponderSystem', () => {
365395
['click'],
366396
undefined,
367397
(event, context, props) => {
368-
eventLog.push(`B [${phaseToString(event.phase)}]`);
398+
context.addRootEventTypes(event.target.ownerDocument, [
399+
'click',
400+
'pointermove',
401+
]);
402+
eventLog.push(`B [${event.type}, ${phaseToString(event.phase)}]`);
369403
},
370404
);
371405

@@ -383,17 +417,26 @@ describe('DOMEventResponderSystem', () => {
383417
ReactDOM.render(<Test />, container);
384418
let buttonElement = buttonRef.current;
385419
dispatchClickEvent(buttonElement);
420+
dispatchEvent(buttonElement, 'pointermove');
386421
}
387422

388423
runTestWithPhase(BUBBLE_PHASE);
424+
// Root phase should not be skipped for different event type
389425
expect(eventLog).toEqual([
390-
'A [capture]',
391-
'B [capture]',
392-
'B [bubble]',
393-
'A [bubble]',
426+
'A [click, capture]',
427+
'B [click, capture]',
428+
'B [click, bubble]',
429+
'A [click, bubble]',
430+
'A [pointermove, root]',
431+
'B [pointermove, root]',
394432
]);
395433
runTestWithPhase(CAPTURE_PHASE);
396-
expect(eventLog).toEqual(['A [capture]']);
434+
// Root phase should not be skipped for different event type
435+
expect(eventLog).toEqual([
436+
'A [click, capture]',
437+
'A [pointermove, root]',
438+
'B [pointermove, root]',
439+
]);
397440
});
398441

399442
it('custom event dispatching for click -> magicClick works', () => {

0 commit comments

Comments
 (0)