Modern Event System: make on*Capture events use capture phase

WIP WIP FIX FIX Fix WIP Virtualize plugins Fix lint Clear up conflict Clearn things up Fix logic for plugins Fix test Simplify logic Simplify logic
facebook · Jul 6, 2020 · f888b6c · f888b6c
1 parent c3e42a9
commit f888b6c
Show file tree

Hide file tree

Showing 12 changed files with 337 additions and 168 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2714,28 +2714,23 @@ describe('ReactDOMComponent', () => {
 
       innerRef.current.click();
 
-      // The order we receive here is not ideal since it is expected that the
-      // capture listener fire before all bubble listeners. Other React apps
-      // might depend on this.
-      //
-      // @see https://github.com/facebook/react/pull/12919#issuecomment-395224674
       if (ReactFeatureFlags.enableLegacyFBSupport) {
         // The order will change here, as the legacy FB support adds
         // the event listener onto the document after the one above has.
         expect(eventOrder).toEqual([
           'document capture',
-          'document bubble',
+          'outer capture',
           'inner capture',
+          'document bubble',
           'inner bubble',
-          'outer capture',
           'outer bubble',
         ]);
       } else {
         expect(eventOrder).toEqual([
           'document capture',
+          'outer capture',
           'inner capture',
           'inner bubble',
-          'outer capture',
           'outer bubble',
           'document bubble',
         ]);

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -13,6 +13,7 @@ import {
   registrationNameDependencies,
   possibleRegistrationNames,
 } from '../events/EventRegistry';
+
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import invariant from 'shared/invariant';
 import {

diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -26,7 +26,6 @@ import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 import {
   listenToTopLevelEvent,
   addEventTypeToDispatchConfig,
-  capturePhaseEvents,
 } from '../events/DOMModernPluginEventSystem';
 
 import {HostRoot, HostPortal} from 'react-reconciler/src/ReactWorkTags';
@@ -87,6 +86,7 @@ function registerEventOnNearestTargetContainer(
   topLevelType: DOMTopLevelEventType,
   passive: boolean | void,
   priority: EventPriority | void,
+  capture: boolean,
 ): void {
   // If it is, find the nearest root or portal and make it
   // our event handle target container.
@@ -99,7 +99,6 @@ function registerEventOnNearestTargetContainer(
     );
   }
   const listenerMap = getEventListenerMap(targetContainer);
-  const capture = capturePhaseEvents.has(topLevelType);
   listenToTopLevelEvent(
     topLevelType,
     targetContainer,
@@ -182,6 +181,7 @@ export function createEventHandle(
             topLevelType,
             passive,
             priority,
+            capture,
           );
         } else if (enableScopeAPI && isReactScope(target)) {
           const scopeTarget = ((target: any): ReactScopeInstance);
@@ -195,6 +195,7 @@ export function createEventHandle(
             topLevelType,
             passive,
             priority,
+            capture,
           );
         } else if (isValidEventTarget(target)) {
           const eventTarget = ((target: any): EventTarget);