[react-events] Remove stopPropagation (Press) + use document for delegation (#16730)
Dominic Gannaway committed
Sep 10, 2019 at 20:31 UTC
fd3e8cb0aea97d7945350b434af3e79f4493c98e
4 files changed
+5
-50
packages/react-dom/src/client/ReactDOMHostConfig.js
+2
-3
@@ -867,17 +867,16 @@ export function mountResponderInstance(
867
): ReactDOMEventResponderInstance {
868
// Listen to events
869
const doc = instance.ownerDocument;
870
- const documentBody = doc.body || doc;
870
const {
871
rootEventTypes,
872
targetEventTypes,
873
} = ((responder: any): ReactDOMEventResponder);
874
if (targetEventTypes !== null) {
876
- listenToEventResponderEventTypes(targetEventTypes, documentBody);
875
+ listenToEventResponderEventTypes(targetEventTypes, doc);
876
}
877
if (rootEventTypes !== null) {
878
addRootEventTypesForResponderInstance(responderInstance, rootEventTypes);
880
- listenToEventResponderEventTypes(rootEventTypes, documentBody);
879
+ listenToEventResponderEventTypes(rootEventTypes, doc);
880
}
881
mountEventResponder(
882
responder,
packages/react-dom/src/events/DOMEventResponderSystem.js
+1
-2
@@ -181,8 +181,7 @@ const eventResponderContext: ReactDOMResponderContext = {
181
},
182
addRootEventTypes(rootEventTypes: Array<string>): void {
183
validateResponderContext();
184
- const activeDocument = getActiveDocument();
185
- listenToResponderEventTypesImpl(rootEventTypes, activeDocument);
184
+ listenToResponderEventTypesImpl(rootEventTypes, currentDocument);
185
for (let i = 0; i < rootEventTypes.length; i++) {
186
const rootEventType = rootEventTypes[i];
187
const eventResponderInstance = ((currentInstance: any): ReactDOMEventResponderInstance);
packages/react-events/src/dom/Press.js
+2
-26
@@ -29,7 +29,6 @@ type PressProps = {|
29
left: number,
30
},
31
preventDefault: boolean,
32
- stopPropagation: boolean,
32
onPress: (e: PressEvent) => void,
33
onPressChange: boolean => void,
34
onPressEnd: (e: PressEvent) => void,
@@ -112,13 +111,7 @@ const DEFAULT_PRESS_RETENTION_OFFSET = {
111
};
112
113
const targetEventTypes = hasPointerEvents
115
- ? [
116
- 'keydown_active',
117
- // We need to preventDefault on pointerdown for mouse/pen events
118
- // that are in hit target area but not the element area.
119
- 'pointerdown_active',
120
- 'click_active',
121
- ]
114
+ ? ['keydown_active', 'pointerdown', 'click_active']
115
: ['keydown_active', 'touchstart', 'mousedown', 'click_active'];
116
117
const rootEventTypes = hasPointerEvents
@@ -132,9 +125,7 @@ const rootEventTypes = hasPointerEvents
125
'touchcancel',
126
// Used as a 'cancel' signal for mouse interactions
127
'dragstart',
135
- // We listen to this here so stopPropagation can
136
- // block other mouseup events used internally
137
- 'mouseup_active',
128
+ 'mouseup',
129
'touchend',
130
];
131
@@ -465,17 +456,6 @@ function updateIsPressWithinResponderRegion(
456
(x >= left && x <= right && y >= top && y <= bottom);
457
}
458
468
-function handleStopPropagation(
469
- props: PressProps,
470
- context: ReactDOMResponderContext,
471
- nativeEvent,
472
-): void {
473
- const stopPropagation = props.stopPropagation;
474
- if (stopPropagation === true) {
475
- nativeEvent.stopPropagation();
476
- }
477
-}
478
-
459
// After some investigation work, screen reader virtual
460
// clicks (NVDA, Jaws, VoiceOver) do not have co-ords associated with the click
461
// event and "detail" is always 0 (where normal clicks are > 0)
@@ -532,8 +512,6 @@ const pressResponderImpl = {
512
const nativeEvent: any = event.nativeEvent;
513
const isPressed = state.isPressed;
514
535
- handleStopPropagation(props, context, nativeEvent);
536
-
515
switch (type) {
516
// START
517
case 'pointerdown':
@@ -659,8 +637,6 @@ const pressResponderImpl = {
637
const activePointerId = state.activePointerId;
638
const previousPointerType = state.pointerType;
639
662
- handleStopPropagation(props, context, nativeEvent);
663
-
640
switch (type) {
641
// MOVE
642
case 'pointermove':
packages/react-events/src/dom/__tests__/Press-test.internal.js
-19
@@ -739,7 +739,6 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
739
onPressMove: createEventHandler('inner: onPressMove'),
740
onPressStart: createEventHandler('inner: onPressStart'),
741
onPressEnd: createEventHandler('inner: onPressEnd'),
742
- stopPropagation: false,
742
});
743
return (
744
<div
@@ -1119,22 +1118,4 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
1118
target.pointerup();
1119
target.pointerdown();
1120
});
1122
-
1123
- if (hasPointerEvents) {
1124
- it('should work correctly with stopPropagation set to true', () => {
1125
- const ref = React.createRef();
1126
- const pointerDownEvent = jest.fn();
1127
-
1128
- const Component = () => {
1129
- const listener = usePress({stopPropagation: true});
1130
- return <div ref={ref} listeners={listener} />;
1131
- };
1132
-
1133
- container.addEventListener('pointerdown', pointerDownEvent);
1134
- ReactDOM.render(<Component />, container);
1135
- createEventTarget(ref.current).pointerdown();
1136
- container.removeEventListener('pointerdown', pointerDownEvent);
1137
- expect(pointerDownEvent).toHaveBeenCalledTimes(0);
1138
- });
1139
- }
1121
});