Skip to content

Commit

Permalink
[react-events] Remove stopPropagation (Press) + use document for dele…
Browse files Browse the repository at this point in the history
…gation (#16730)
  • Loading branch information
trueadm authored Sep 10, 2019
1 parent 38c03ce commit fd3e8cb
Show file tree
Hide file tree
Showing 4 changed files with 5 additions and 50 deletions.
5 changes: 2 additions & 3 deletions packages/react-dom/src/client/ReactDOMHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -867,17 +867,16 @@ export function mountResponderInstance(
): ReactDOMEventResponderInstance {
// Listen to events
const doc = instance.ownerDocument;
const documentBody = doc.body || doc;
const {
rootEventTypes,
targetEventTypes,
} = ((responder: any): ReactDOMEventResponder);
if (targetEventTypes !== null) {
listenToEventResponderEventTypes(targetEventTypes, documentBody);
listenToEventResponderEventTypes(targetEventTypes, doc);
}
if (rootEventTypes !== null) {
addRootEventTypesForResponderInstance(responderInstance, rootEventTypes);
listenToEventResponderEventTypes(rootEventTypes, documentBody);
listenToEventResponderEventTypes(rootEventTypes, doc);
}
mountEventResponder(
responder,
Expand Down
3 changes: 1 addition & 2 deletions packages/react-dom/src/events/DOMEventResponderSystem.js
Original file line number Diff line number Diff line change
Expand Up @@ -181,8 +181,7 @@ const eventResponderContext: ReactDOMResponderContext = {
},
addRootEventTypes(rootEventTypes: Array<string>): void {
validateResponderContext();
const activeDocument = getActiveDocument();
listenToResponderEventTypesImpl(rootEventTypes, activeDocument);
listenToResponderEventTypesImpl(rootEventTypes, currentDocument);
for (let i = 0; i < rootEventTypes.length; i++) {
const rootEventType = rootEventTypes[i];
const eventResponderInstance = ((currentInstance: any): ReactDOMEventResponderInstance);
Expand Down
28 changes: 2 additions & 26 deletions packages/react-events/src/dom/Press.js
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ type PressProps = {|
left: number,
},
preventDefault: boolean,
stopPropagation: boolean,
onPress: (e: PressEvent) => void,
onPressChange: boolean => void,
onPressEnd: (e: PressEvent) => void,
Expand Down Expand Up @@ -112,13 +111,7 @@ const DEFAULT_PRESS_RETENTION_OFFSET = {
};

const targetEventTypes = hasPointerEvents
? [
'keydown_active',
// We need to preventDefault on pointerdown for mouse/pen events
// that are in hit target area but not the element area.
'pointerdown_active',
'click_active',
]
? ['keydown_active', 'pointerdown', 'click_active']
: ['keydown_active', 'touchstart', 'mousedown', 'click_active'];

const rootEventTypes = hasPointerEvents
Expand All @@ -132,9 +125,7 @@ const rootEventTypes = hasPointerEvents
'touchcancel',
// Used as a 'cancel' signal for mouse interactions
'dragstart',
// We listen to this here so stopPropagation can
// block other mouseup events used internally
'mouseup_active',
'mouseup',
'touchend',
];

Expand Down Expand Up @@ -465,17 +456,6 @@ function updateIsPressWithinResponderRegion(
(x >= left && x <= right && y >= top && y <= bottom);
}

function handleStopPropagation(
props: PressProps,
context: ReactDOMResponderContext,
nativeEvent,
): void {
const stopPropagation = props.stopPropagation;
if (stopPropagation === true) {
nativeEvent.stopPropagation();
}
}

// After some investigation work, screen reader virtual
// clicks (NVDA, Jaws, VoiceOver) do not have co-ords associated with the click
// event and "detail" is always 0 (where normal clicks are > 0)
Expand Down Expand Up @@ -532,8 +512,6 @@ const pressResponderImpl = {
const nativeEvent: any = event.nativeEvent;
const isPressed = state.isPressed;
handleStopPropagation(props, context, nativeEvent);
switch (type) {
// START
case 'pointerdown':
Expand Down Expand Up @@ -659,8 +637,6 @@ const pressResponderImpl = {
const activePointerId = state.activePointerId;
const previousPointerType = state.pointerType;
handleStopPropagation(props, context, nativeEvent);
switch (type) {
// MOVE
case 'pointermove':
Expand Down
19 changes: 0 additions & 19 deletions packages/react-events/src/dom/__tests__/Press-test.internal.js
Original file line number Diff line number Diff line change
Expand Up @@ -739,7 +739,6 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
onPressMove: createEventHandler('inner: onPressMove'),
onPressStart: createEventHandler('inner: onPressStart'),
onPressEnd: createEventHandler('inner: onPressEnd'),
stopPropagation: false,
});
return (
<div
Expand Down Expand Up @@ -1119,22 +1118,4 @@ describe.each(environmentTable)('Press responder', hasPointerEvents => {
target.pointerup();
target.pointerdown();
});

if (hasPointerEvents) {
it('should work correctly with stopPropagation set to true', () => {
const ref = React.createRef();
const pointerDownEvent = jest.fn();

const Component = () => {
const listener = usePress({stopPropagation: true});
return <div ref={ref} listeners={listener} />;
};

container.addEventListener('pointerdown', pointerDownEvent);
ReactDOM.render(<Component />, container);
createEventTarget(ref.current).pointerdown();
container.removeEventListener('pointerdown', pointerDownEvent);
expect(pointerDownEvent).toHaveBeenCalledTimes(0);
});
}
});

0 comments on commit fd3e8cb

Please sign in to comment.