Event API: follow up fixes for FocusScope + context changes (#15496)

Author: trueadm

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

@@ -896,8 +896,8 @@ export function mountEventComponent(
   eventComponentInstance: ReactEventComponentInstance,
 ): void {
   if (enableEventAPI) {
-    mountEventResponder(eventComponentInstance);
     updateEventComponent(eventComponentInstance);
+    mountEventResponder(eventComponentInstance);
   }
 }
 

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

@@ -84,10 +84,13 @@ const eventListeners:
       ($Shape<PartialEventObject>) => void,
     > = new PossiblyWeakMap();
 
-let alreadyDispatching = false;
+const responderOwners: Map<
+  ReactEventResponder,
+  ReactEventComponentInstance,
+> = new Map();
+let globalOwner = null;
 
 let currentTimers = new Map();
-let currentOwner = null;
 let currentInstance: null | ReactEventComponentInstance = null;
 let currentEventQueue: null | EventQueue = null;
 
@@ -131,8 +134,9 @@ const eventResponderContext: ReactResponderContext = {
     eventListeners.set(eventObject, listener);
     eventQueue.events.push(eventObject);
   },
-  isPositionWithinTouchHitTarget(doc: Document, x: number, y: number): boolean {
+  isPositionWithinTouchHitTarget(x: number, y: number): boolean {
     validateResponderContext();
+    const doc = getActiveDocument();
     // This isn't available in some environments (JSDOM)
     if (typeof doc.elementFromPoint !== 'function') {
       return false;
@@ -188,6 +192,27 @@ const eventResponderContext: ReactResponderContext = {
     }
     return false;
   },
+  isTargetWithinEventResponderScope(target: Element | Document): boolean {
+    validateResponderContext();
+    const responder = ((currentInstance: any): ReactEventComponentInstance)
+      .responder;
+    if (target != null) {
+      let fiber = getClosestInstanceFromNode(target);
+      while (fiber !== null) {
+        if (fiber.stateNode === currentInstance) {
+          return true;
+        }
+        if (
+          fiber.tag === EventComponent &&
+          fiber.stateNode.responder === responder
+        ) {
+          return false;
+        }
+        fiber = fiber.return;
+      }
+    }
+    return false;
+  },
   isTargetWithinElement(
     childTarget: Element | Document,
     parentTarget: Element | Document,
@@ -204,12 +229,10 @@ const eventResponderContext: ReactResponderContext = {
     }
     return false;
   },
-  addRootEventTypes(
-    doc: Document,
-    rootEventTypes: Array<ReactEventResponderEventType>,
-  ): void {
+  addRootEventTypes(rootEventTypes: Array<ReactEventResponderEventType>): void {
     validateResponderContext();
-    listenToResponderEventTypesImpl(rootEventTypes, doc);
+    const activeDocument = getActiveDocument();
+    listenToResponderEventTypesImpl(rootEventTypes, activeDocument);
     for (let i = 0; i < rootEventTypes.length; i++) {
       const rootEventType = rootEventTypes[i];
       const topLevelEventType =
@@ -265,25 +288,38 @@ const eventResponderContext: ReactResponderContext = {
   },
   hasOwnership(): boolean {
     validateResponderContext();
-    return currentOwner === currentInstance;
+    const responder = ((currentInstance: any): ReactEventComponentInstance)
+      .responder;
+    return (
+      globalOwner === currentInstance ||
+      responderOwners.get(responder) === currentInstance
+    );
   },
-  requestOwnership(): boolean {
+  requestGlobalOwnership(): boolean {
     validateResponderContext();
-    if (currentOwner !== null) {
+    if (globalOwner !== null) {
       return false;
     }
-    currentOwner = currentInstance;
-    triggerOwnershipListeners();
+    globalOwner = currentInstance;
+    triggerOwnershipListeners(null);
     return true;
   },
-  releaseOwnership(): boolean {
+  requestResponderOwnership(): boolean {
     validateResponderContext();
-    if (currentOwner !== currentInstance) {
+    const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
+    const responder = eventComponentInstance.responder;
+    if (responderOwners.has(responder)) {
       return false;
     }
-    currentOwner = null;
-    triggerOwnershipListeners();
-    return false;
+    responderOwners.set(responder, eventComponentInstance);
+    triggerOwnershipListeners(responder);
+    return true;
+  },
+  releaseOwnership(): boolean {
+    validateResponderContext();
+    return releaseOwnershipForEventComponentInstance(
+      ((currentInstance: any): ReactEventComponentInstance),
+    );
   },
   setTimeout(func: () => void, delay): Symbol {
     validateResponderContext();
@@ -330,9 +366,6 @@ const eventResponderContext: ReactResponderContext = {
     let node = ((eventComponentInstance.currentFiber: any): Fiber).child;
 
     while (node !== null) {
-      if (node.stateNode === currentInstance) {
-        break;
-      }
       if (isFiberHostComponentFocusable(node)) {
         focusableElements.push(node.stateNode);
       } else {
@@ -353,13 +386,44 @@ const eventResponderContext: ReactResponderContext = {
       if (parent === null) {
         break;
       }
+      if (parent.stateNode === currentInstance) {
+        break;
+      }
       node = parent.sibling;
     }
 
     return focusableElements;
   },
+  getActiveDocument,
 };
 
+function getActiveDocument(): Document {
+  const eventComponentInstance = ((currentInstance: any): ReactEventComponentInstance);
+  const rootElement = ((eventComponentInstance.rootInstance: any): Element);
+  return rootElement.ownerDocument;
+}
+
+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);
+    return true;
+  } else {
+    return false;
+  }
+}
+
 function isFiberHostComponentFocusable(fiber: Fiber): boolean {
   if (fiber.tag !== HostComponent) {
     return false;
@@ -368,18 +432,22 @@ function isFiberHostComponentFocusable(fiber: Fiber): boolean {
   if (memoizedProps.tabIndex === -1 || memoizedProps.disabled) {
     return false;
   }
-  if (memoizedProps.tabIndex === 0) {
+  if (memoizedProps.tabIndex === 0 || memoizedProps.contentEditable === true) {
     return true;
   }
   if (type === 'a' || type === 'area') {
-    return !!memoizedProps.href;
+    return !!memoizedProps.href && memoizedProps.rel !== 'ignore';
+  }
+  if (type === 'input') {
+    return memoizedProps.type !== 'hidden' && memoizedProps.type !== 'file';
   }
   return (
     type === 'button' ||
     type === 'textarea' ||
-    type === 'input' ||
     type === 'object' ||
-    type === 'select'
+    type === 'select' ||
+    type === 'iframe' ||
+    type === 'embed'
   );
 }
 
@@ -487,15 +555,13 @@ function getTargetEventResponderInstances(
     // Traverse up the fiber tree till we find event component fibers.
     if (node.tag === EventComponent) {
       const eventComponentInstance = node.stateNode;
-      if (currentOwner === null || currentOwner === eventComponentInstance) {
-        const responder = eventComponentInstance.responder;
-        const targetEventTypes = responder.targetEventTypes;
-        // Validate the target event type exists on the responder
-        if (targetEventTypes !== undefined) {
-          const targetEventTypesSet = getTargetEventTypesSet(targetEventTypes);
-          if (targetEventTypesSet.has(topLevelType)) {
-            eventResponderInstances.push(eventComponentInstance);
-          }
+      const responder = eventComponentInstance.responder;
+      const targetEventTypes = responder.targetEventTypes;
+      // Validate the target event type exists on the responder
+      if (targetEventTypes !== undefined) {
+        const targetEventTypesSet = getTargetEventTypesSet(targetEventTypes);
+        if (targetEventTypesSet.has(topLevelType)) {
+          eventResponderInstances.push(eventComponentInstance);
         }
       }
     }
@@ -516,18 +582,35 @@ function getRootEventResponderInstances(
 
     for (let i = 0; i < rootEventComponentInstances.length; i++) {
       const rootEventComponentInstance = rootEventComponentInstances[i];
-
-      if (
-        currentOwner === null ||
-        currentOwner === rootEventComponentInstance
-      ) {
-        eventResponderInstances.push(rootEventComponentInstance);
-      }
+      eventResponderInstances.push(rootEventComponentInstance);
     }
   }
   return eventResponderInstances;
 }
 
+function shouldSkipEventComponent(
+  eventResponderInstance: ReactEventComponentInstance,
+  propagatedEventResponders: null | Set<ReactEventResponder>,
+): boolean {
+  const responder = eventResponderInstance.responder;
+  if (propagatedEventResponders !== null && responder.stopLocalPropagation) {
+    if (propagatedEventResponders.has(responder)) {
+      return true;
+    }
+    propagatedEventResponders.add(responder);
+  }
+  if (globalOwner && globalOwner !== eventResponderInstance) {
+    return true;
+  }
+  if (
+    responderOwners.has(responder) &&
+    responderOwners.get(responder) !== eventResponderInstance
+  ) {
+    return true;
+  }
+  return false;
+}
+
 function traverseAndHandleEventResponderInstances(
   topLevelType: DOMTopLevelEventType,
   targetFiber: null | Fiber,
@@ -564,14 +647,16 @@ function traverseAndHandleEventResponderInstances(
     for (i = length; i-- > 0; ) {
       const targetEventResponderInstance = targetEventResponderInstances[i];
       const {responder, props, state} = targetEventResponderInstance;
-      if (responder.stopLocalPropagation) {
-        if (propagatedEventResponders.has(responder)) {
-          continue;
-        }
-        propagatedEventResponders.add(responder);
-      }
       const eventListener = responder.onEventCapture;
       if (eventListener !== undefined) {
+        if (
+          shouldSkipEventComponent(
+            targetEventResponderInstance,
+            propagatedEventResponders,
+          )
+        ) {
+          continue;
+        }
         currentInstance = targetEventResponderInstance;
         eventListener(responderEvent, eventResponderContext, props, state);
       }
@@ -582,14 +667,16 @@ function traverseAndHandleEventResponderInstances(
     for (i = 0; i < length; i++) {
       const targetEventResponderInstance = targetEventResponderInstances[i];
       const {responder, props, state} = targetEventResponderInstance;
-      if (responder.stopLocalPropagation) {
-        if (propagatedEventResponders.has(responder)) {
-          continue;
-        }
-        propagatedEventResponders.add(responder);
-      }
       const eventListener = responder.onEvent;
       if (eventListener !== undefined) {
+        if (
+          shouldSkipEventComponent(
+            targetEventResponderInstance,
+            propagatedEventResponders,
+          )
+        ) {
+          continue;
+        }
         currentInstance = targetEventResponderInstance;
         eventListener(responderEvent, eventResponderContext, props, state);
       }
@@ -606,20 +693,28 @@ function traverseAndHandleEventResponderInstances(
       const {responder, props, state} = rootEventResponderInstance;
       const eventListener = responder.onRootEvent;
       if (eventListener !== undefined) {
+        if (shouldSkipEventComponent(rootEventResponderInstance, null)) {
+          continue;
+        }
         currentInstance = rootEventResponderInstance;
         eventListener(responderEvent, eventResponderContext, props, state);
       }
     }
   }
 }
 
-function triggerOwnershipListeners(): void {
+function triggerOwnershipListeners(
+  limitByResponder: null | ReactEventResponder,
+): 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) {
@@ -670,9 +765,12 @@ export function unmountEventResponder(
       currentTimers = null;
     }
   }
-  if (currentOwner === eventComponentInstance) {
-    currentOwner = null;
-    triggerOwnershipListeners();
+  try {
+    currentEventQueue = createEventQueue();
+    releaseOwnershipForEventComponentInstance(eventComponentInstance);
+    processEventQueue();
+  } finally {
+    currentEventQueue = null;
   }
   if (responder.onOwnershipChange !== undefined) {
     ownershipChangeListeners.delete(eventComponentInstance);
@@ -709,10 +807,10 @@ export function dispatchEventForResponderEventSystem(
   eventSystemFlags: EventSystemFlags,
 ): void {
   if (enableEventAPI) {
-    if (alreadyDispatching) {
-      return;
-    }
-    alreadyDispatching = true;
+    const previousEventQueue = currentEventQueue;
+    const previousInstance = currentInstance;
+    const previousTimers = currentTimers;
+    currentTimers = null;
     currentEventQueue = createEventQueue();
     try {
       traverseAndHandleEventResponderInstances(
@@ -724,10 +822,9 @@ export function dispatchEventForResponderEventSystem(
       );
       processEventQueue();
     } finally {
-      currentTimers = null;
-      currentInstance = null;
-      currentEventQueue = null;
-      alreadyDispatching = false;
+      currentTimers = previousTimers;
+      currentInstance = previousInstance;
+      currentEventQueue = previousEventQueue;
     }
   }
 }