[react-events] Remove stopPropagation (Press) + use document for delegation (#16730)

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

@@ -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,

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

@@ -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);

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

@@ -29,7 +29,6 @@ type PressProps = {|
     left: number,
   },
   preventDefault: boolean,
-  stopPropagation: boolean,
   onPress: (e: PressEvent) => void,
   onPressChange: boolean => void,
   onPressEnd: (e: PressEvent) => void,
@@ -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
@@ -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',
     ];
 
@@ -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)
@@ -532,8 +512,6 @@ const pressResponderImpl = {
     const nativeEvent: any = event.nativeEvent;
     const isPressed = state.isPressed;
 
-    handleStopPropagation(props, context, nativeEvent);
-
     switch (type) {
       // START
       case 'pointerdown':
@@ -659,8 +637,6 @@ const pressResponderImpl = {
     const activePointerId = state.activePointerId;
     const previousPointerType = state.pointerType;
 
-    handleStopPropagation(props, context, nativeEvent);
-
     switch (type) {
       // MOVE
       case 'pointermove':

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

@@ -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
@@ -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);
-    });
-  }
 });