Fix issue with capture phase non-bubbling events (facebook#19452)

trueadm · web-flow · commit 242a50a652f7 · 2020-07-25T12:32:21.000+01:00
diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
@@ -590,4 +590,36 @@ describe('ReactDOMEventListener', () => {
       document.body.removeChild(container);
     }
   });
+
+  it('should handle non-bubbling capture events correctly', () => {
+    const container = document.createElement('div');
+    const innerRef = React.createRef();
+    const outerRef = React.createRef();
+    const onPlayCapture = jest.fn();
+    document.body.appendChild(container);
+    try {
+      ReactDOM.render(
+        <div ref={outerRef} onPlayCapture={onPlayCapture}>
+          <div onPlayCapture={onPlayCapture}>
+            <div ref={innerRef} onPlayCapture={onPlayCapture} />
+          </div>
+        </div>,
+        container,
+      );
+      innerRef.current.dispatchEvent(
+        new Event('play', {
+          bubbles: false,
+        }),
+      );
+      expect(onPlayCapture).toHaveBeenCalledTimes(3);
+      outerRef.current.dispatchEvent(
+        new Event('play', {
+          bubbles: false,
+        }),
+      );
+      expect(onPlayCapture).toHaveBeenCalledTimes(4);
+    } finally {
+      document.body.removeChild(container);
+    }
+  });
 });
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -712,6 +712,7 @@ export function accumulateSinglePhaseListeners(
   dispatchQueue: DispatchQueue,
   event: ReactSyntheticEvent,
   inCapturePhase: boolean,
+  accumulateTargetOnly: boolean,
 ): void {
   const bubbled = event._reactName;
   const captured = bubbled !== null ? bubbled + 'Capture' : null;
@@ -809,6 +810,12 @@ export function accumulateSinglePhaseListeners(
         }
       }
     }
+    // If we are only accumulating events for the target, then we don't
+    // continue to propagate through the React fiber tree to find other
+    // listeners.
+    if (accumulateTargetOnly) {
+      break;
+    }
     instance = instance.return;
   }
   if (listeners.length !== 0) {
diff --git a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
@@ -40,7 +40,7 @@ import {
 import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../EventSystemFlags';
 
 import getEventCharCode from '../getEventCharCode';
-import {IS_CAPTURE_PHASE} from '../EventSystemFlags';
+import {IS_CAPTURE_PHASE, IS_NON_DELEGATED} from '../EventSystemFlags';
 
 import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 
@@ -165,12 +165,23 @@ function extractEvents(
       inCapturePhase,
     );
   } else {
+    // When we encounter a non-delegated event in the capture phase,
+    // we shouldn't emuluate capture bubbling. This is because we'll
+    // add a native capture event listener to each element directly,
+    // not the root, and native capture listeners always fire even
+    // if the event doesn't bubble.
+    const isNonDelegatedEvent = (eventSystemFlags & IS_NON_DELEGATED) !== 0;
+    // TODO: We may also want to re-use the accumulateTargetOnly flag to
+    // special case bubbling for onScroll/media events at a later point.
+    const accumulateTargetOnly = inCapturePhase && isNonDelegatedEvent;
+
     // We traverse only capture or bubble phase listeners
     accumulateSinglePhaseListeners(
       targetInst,
       dispatchQueue,
       event,
       inCapturePhase,
+      accumulateTargetOnly,
     );
   }
   return event;

Original file line number	Diff line number	Diff line change
`@@ -712,6 +712,7 @@ export function accumulateSinglePhaseListeners(`
`712`	`712`	`dispatchQueue: DispatchQueue,`
`713`	`713`	`event: ReactSyntheticEvent,`
`714`	`714`	`inCapturePhase: boolean,`
	`715`	`+ accumulateTargetOnly: boolean,`
`715`	`716`	`): void {`
`716`	`717`	`const bubbled = event._reactName;`
`717`	`718`	`const captured = bubbled !== null ? bubbled + 'Capture' : null;`
`@@ -809,6 +810,12 @@ export function accumulateSinglePhaseListeners(`
`809`	`810`	`}`
`810`	`811`	`}`
`811`	`812`	`}`
	`813`	`+ // If we are only accumulating events for the target, then we don't`
	`814`	`+ // continue to propagate through the React fiber tree to find other`
	`815`	`+ // listeners.`
	`816`	`+ if (accumulateTargetOnly) {`
	`817`	`+ break;`
	`818`	`+ }`
`812`	`819`	`instance = instance.return;`
`813`	`820`	`}`
`814`	`821`	`if (listeners.length !== 0) {`