[Flare] remove stopLocalPropagation option + modify responder ownership (#15889)

Author: trueadm

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

@@ -107,11 +107,8 @@ const eventListeners:
       ($Shape<PartialEventObject>) => void,
     > = new PossiblyWeakMap();
 
-const responderOwners: Map<
-  ReactEventResponder,
-  ReactEventComponentInstance,
-> = new Map();
 let globalOwner = null;
+let continueLocalPropagation = false;
 
 let currentTimeStamp = 0;
 let currentTimers = new Map();
@@ -308,31 +305,15 @@ const eventResponderContext: ReactResponderContext = {
   },
   hasOwnership(): boolean {
     validateResponderContext();
-    const responder = ((currentInstance: any): ReactEventComponentInstance)
-      .responder;
-    return (
-      globalOwner === currentInstance ||
-      responderOwners.get(responder) === currentInstance
-    );
+    return globalOwner === currentInstance;
   },
   requestGlobalOwnership(): boolean {
     validateResponderContext();
     if (globalOwner !== null) {
       return false;
     }
     globalOwner = currentInstance;
-    triggerOwnershipListeners(null);
-    return true;
-  },
-  requestResponderOwnership(): boolean {
-    validateResponderContext();
-    const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
-    const responder = eventComponentInstance.responder;
-    if (responderOwners.has(responder)) {
-      return false;
-    }
-    responderOwners.set(responder, eventComponentInstance);
-    triggerOwnershipListeners(responder);
+    triggerOwnershipListeners();
     return true;
   },
   releaseOwnership(): boolean {
@@ -433,6 +414,10 @@ const eventResponderContext: ReactResponderContext = {
     }
     return false;
   },
+  continueLocalPropagation() {
+    validateResponderContext();
+    continueLocalPropagation = true;
+  },
 };
 
 function collectFocusableElements(
@@ -485,22 +470,12 @@ function getActiveDocument(): Document {
 function releaseOwnershipForEventComponentInstance(
   eventComponentInstance: ReactEventComponentInstance,
 ): boolean {
-  const responder = eventComponentInstance.responder;
-  let triggerOwnershipListenersWith;
-  if (responderOwners.get(responder) === eventComponentInstance) {
-    responderOwners.delete(responder);
-    triggerOwnershipListenersWith = responder;
-  }
   if (globalOwner === eventComponentInstance) {
     globalOwner = null;
-    triggerOwnershipListenersWith = null;
-  }
-  if (triggerOwnershipListenersWith !== undefined) {
-    triggerOwnershipListeners(triggerOwnershipListenersWith);
+    triggerOwnershipListeners();
     return true;
-  } else {
-    return false;
   }
+  return false;
 }
 
 function isFiberHostComponentFocusable(fiber: Fiber): boolean {
@@ -725,10 +700,10 @@ function getRootEventResponderInstances(
 
 function shouldSkipEventComponent(
   eventResponderInstance: ReactEventComponentInstance,
+  responder: ReactEventResponder,
   propagatedEventResponders: null | Set<ReactEventResponder>,
 ): boolean {
-  const responder = eventResponderInstance.responder;
-  if (propagatedEventResponders !== null && responder.stopLocalPropagation) {
+  if (propagatedEventResponders !== null) {
     if (propagatedEventResponders.has(responder)) {
       return true;
     }
@@ -737,15 +712,19 @@ function shouldSkipEventComponent(
   if (globalOwner && globalOwner !== eventResponderInstance) {
     return true;
   }
-  if (
-    responderOwners.has(responder) &&
-    responderOwners.get(responder) !== eventResponderInstance
-  ) {
-    return true;
-  }
   return false;
 }
 
+function checkForLocalPropagationContinuation(
+  responder: ReactEventResponder,
+  propagatedEventResponders: Set<ReactEventResponder>,
+) {
+  if (continueLocalPropagation === true) {
+    propagatedEventResponders.delete(responder);
+    continueLocalPropagation = false;
+  }
+}
+
 function traverseAndHandleEventResponderInstances(
   topLevelType: DOMTopLevelEventType,
   targetFiber: null | Fiber,
@@ -795,13 +774,18 @@ function traverseAndHandleEventResponderInstances(
         if (
           shouldSkipEventComponent(
             targetEventResponderInstance,
+            responder,
             propagatedEventResponders,
           )
         ) {
           continue;
         }
         currentInstance = targetEventResponderInstance;
         eventListener(responderEvent, eventResponderContext, props, state);
+        checkForLocalPropagationContinuation(
+          responder,
+          propagatedEventResponders,
+        );
       }
     }
     // We clean propagated event responders between phases.
@@ -815,13 +799,18 @@ function traverseAndHandleEventResponderInstances(
         if (
           shouldSkipEventComponent(
             targetEventResponderInstance,
+            responder,
             propagatedEventResponders,
           )
         ) {
           continue;
         }
         currentInstance = targetEventResponderInstance;
         eventListener(responderEvent, eventResponderContext, props, state);
+        checkForLocalPropagationContinuation(
+          responder,
+          propagatedEventResponders,
+        );
       }
     }
   }
@@ -836,7 +825,9 @@ function traverseAndHandleEventResponderInstances(
       const {responder, props, state} = rootEventResponderInstance;
       const eventListener = responder.onRootEvent;
       if (eventListener !== undefined) {
-        if (shouldSkipEventComponent(rootEventResponderInstance, null)) {
+        if (
+          shouldSkipEventComponent(rootEventResponderInstance, responder, null)
+        ) {
           continue;
         }
         currentInstance = rootEventResponderInstance;
@@ -846,18 +837,13 @@ function traverseAndHandleEventResponderInstances(
   }
 }
 
-function triggerOwnershipListeners(
-  limitByResponder: null | ReactEventResponder,
-): void {
+function triggerOwnershipListeners(): void {
   const listeningInstances = Array.from(ownershipChangeListeners);
   const previousInstance = currentInstance;
   try {
     for (let i = 0; i < listeningInstances.length; i++) {
       const instance = listeningInstances[i];
       const {props, responder, state} = instance;
-      if (limitByResponder !== null && limitByResponder !== responder) {
-        continue;
-      }
       currentInstance = instance;
       const onOwnershipChange = responder.onOwnershipChange;
       if (onOwnershipChange !== undefined) {

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

@@ -27,7 +27,6 @@ function createReactEventComponent({
   onMount,
   onUnmount,
   onOwnershipChange,
-  stopLocalPropagation,
   allowMultipleHostChildren,
 }) {
   const testEventResponder = {
@@ -40,7 +39,6 @@ function createReactEventComponent({
     onMount,
     onUnmount,
     onOwnershipChange,
-    stopLocalPropagation: stopLocalPropagation || false,
     allowMultipleHostChildren: allowMultipleHostChildren || false,
   };
 
@@ -215,6 +213,7 @@ describe('DOMEventResponderSystem', () => {
     const ClickEventComponent = createReactEventComponent({
       targetEventTypes: ['click'],
       onEvent: (event, context, props) => {
+        context.continueLocalPropagation();
         eventResponderFiredCount++;
         eventLog.push({
           name: event.type,
@@ -224,6 +223,7 @@ describe('DOMEventResponderSystem', () => {
         });
       },
       onEventCapture: (event, context, props) => {
+        context.continueLocalPropagation();
         eventResponderFiredCount++;
         eventLog.push({
           name: event.type,
@@ -324,19 +324,20 @@ describe('DOMEventResponderSystem', () => {
     ]);
   });
 
-  it('nested event responders should fire in the correct order without stopLocalPropagation', () => {
+  it('nested event responders should fire in the correct order with continueLocalPropagation', () => {
     let eventLog = [];
     const buttonRef = React.createRef();
 
     const ClickEventComponent = createReactEventComponent({
       targetEventTypes: ['click'],
       onEvent: (event, context, props) => {
+        context.continueLocalPropagation();
         eventLog.push(`${props.name} [bubble]`);
       },
       onEventCapture: (event, context, props) => {
+        context.continueLocalPropagation();
         eventLog.push(`${props.name} [capture]`);
       },
-      stopLocalPropagation: false,
     });
 
     const Test = () => (
@@ -361,7 +362,7 @@ describe('DOMEventResponderSystem', () => {
     ]);
   });
 
-  it('nested event responders should fire in the correct order with stopLocalPropagation', () => {
+  it('nested event responders should fire in the correct order', () => {
     let eventLog = [];
     const buttonRef = React.createRef();
 
@@ -373,7 +374,6 @@ describe('DOMEventResponderSystem', () => {
       onEventCapture: (event, context, props) => {
         eventLog.push(`${props.name} [capture]`);
       },
-      stopLocalPropagation: true,
     });
 
     const Test = () => (
@@ -686,6 +686,7 @@ describe('DOMEventResponderSystem', () => {
     const EventComponent = createReactEventComponent({
       targetEventTypes: ['pointerout'],
       onEvent: (event, context) => {
+        context.continueLocalPropagation();
         const isWithin = context.isTargetWithinEventResponderScope(
           event.nativeEvent.relatedTarget,
         );

packages/react-events/README.md

@@ -82,12 +82,6 @@ Called before an Event Component in unmounted.
 
 Defines the DOM events to listen to on the root of the app.
 
-### stopLocalPropagation: boolean
-
-Defines whether or not synthetic events propagate to other Event Components *of
-the same type*. This has no effect on propagation of the source DOM events or
-the synthetic events dispatched to Event Components of different types.
-
 ### targetEventTypes?: Array<ResponderEventType>
 
 Defines the DOM events to listen to within the Event Component subtree.
@@ -159,14 +153,6 @@ has global ownership, only that instance and its responder are active. To releas
 either `releaseOwnership()` must be called or the Event Component instance that had global ownership must be
 unmounted. Calling `requestGlobalOwnership` also returns `true`/`false` if the request was successful.
 
-### requestResponderOwnership(): boolean
-
-The current Event Component instance can request responder ownership within the event system. When an Event Component
-instance has responder ownership, all other Event Component instances that have the same responder as the Event Component
-instance will no longer be active. To release ownership to other event responders, either `releaseOwnership()` must be
-called or the Event Component instance that had global ownership must be unmounted. Calling `requestResponderOwnership`
-also returns `true`/`false` if the request was successful.
-
 ### setTimeout(func: () => void, delay: number): Symbol
 
 This can be used to dispatch async events, e.g., those that fire after a delay.

packages/react-events/src/Drag.js

@@ -98,7 +98,6 @@ const DragResponder = {
     };
   },
   allowMultipleHostChildren: false,
-  stopLocalPropagation: true,
   onEvent(
     event: ReactResponderEvent,
     context: ReactResponderContext,

packages/react-events/src/Focus.js

@@ -228,7 +228,6 @@ const FocusResponder = {
     };
   },
   allowMultipleHostChildren: false,
-  stopLocalPropagation: true,
   onEvent(
     event: ReactResponderEvent,
     context: ReactResponderContext,