[react-events] Refactor getCurrentTarget to getResponderNode (#16660)

Author: trueadm

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

@@ -66,7 +66,6 @@ type ResponderTimer = {|
   instance: ReactDOMEventResponderInstance,
   func: () => void,
   id: number,
-  targetFiber: Fiber | null,
   timeStamp: number,
 |};
 
@@ -87,7 +86,6 @@ let currentInstance: null | ReactDOMEventResponderInstance = null;
 let currentTimerIDCounter = 0;
 let currentDocument: null | Document = null;
 let currentPropagationBehavior: PropagationBehavior = DoNotPropagateToNextResponder;
-let currentTargetFiber: null | Fiber = null;
 
 const eventResponderContext: ReactDOMResponderContext = {
   dispatchEvent(
@@ -230,7 +228,6 @@ const eventResponderContext: ReactDOMResponderContext = {
       instance: ((currentInstance: any): ReactDOMEventResponderInstance),
       func,
       id: timerId,
-      targetFiber: currentTargetFiber,
       timeStamp: currentTimeStamp,
     });
     activeTimeouts.set(timerId, timeout);
@@ -273,23 +270,14 @@ const eventResponderContext: ReactDOMResponderContext = {
     currentPropagationBehavior = PropagateToNextResponder;
   },
   enqueueStateRestore,
-  getCurrentTarget(): Element | null {
+  getResponderNode(): Element | null {
     validateResponderContext();
     const responderFiber = ((currentInstance: any): ReactDOMEventResponderInstance)
       .fiber;
-    let fiber = currentTargetFiber;
-    let currentTarget = null;
-
-    while (fiber !== null) {
-      if (fiber.tag === HostComponent) {
-        currentTarget = fiber.stateNode;
-      }
-      if (fiber === responderFiber || fiber.alternate === responderFiber) {
-        break;
-      }
-      fiber = fiber.return;
+    if (responderFiber.tag === ScopeComponent) {
+      return null;
     }
-    return currentTarget;
+    return responderFiber.stateNode;
   },
 };
 
@@ -373,9 +361,8 @@ function processTimers(
   try {
     batchedEventUpdates(() => {
       for (let i = 0; i < timersArr.length; i++) {
-        const {instance, func, id, timeStamp, targetFiber} = timersArr[i];
+        const {instance, func, id, timeStamp} = timersArr[i];
         currentInstance = instance;
-        currentTargetFiber = targetFiber;
         currentTimeStamp = timeStamp + delay;
         try {
           func();
@@ -388,7 +375,6 @@ function processTimers(
     currentTimers = null;
     currentInstance = null;
     currentTimeStamp = 0;
-    currentTargetFiber = null;
   }
 }
 
@@ -599,10 +585,8 @@ export function dispatchEventForResponderEventSystem(
     const previousTimeStamp = currentTimeStamp;
     const previousDocument = currentDocument;
     const previousPropagationBehavior = currentPropagationBehavior;
-    const previousTargetFiber = currentTargetFiber;
     currentPropagationBehavior = DoNotPropagateToNextResponder;
     currentTimers = null;
-    currentTargetFiber = targetFiber;
     // nodeType 9 is DOCUMENT_NODE
     currentDocument =
       (nativeEventTarget: any).nodeType === 9
@@ -626,7 +610,6 @@ export function dispatchEventForResponderEventSystem(
       currentTimeStamp = previousTimeStamp;
       currentDocument = previousDocument;
       currentPropagationBehavior = previousPropagationBehavior;
-      currentTargetFiber = previousTargetFiber;
     }
   }
 }

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

@@ -1017,7 +1017,7 @@ describe('DOMEventResponderSystem', () => {
         const obj = {
           counter,
           timeStamp: context.getTimeStamp(),
-          target: context.getCurrentTarget(),
+          target: context.getResponderNode(),
           type: 'click-test',
         };
         context.dispatchEvent(obj, props.onClick, DiscreteEvent);

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

@@ -289,7 +289,7 @@ const focusResponderImpl = {
 
     switch (type) {
       case 'focus': {
-        state.focusTarget = context.getCurrentTarget();
+        state.focusTarget = context.getResponderNode();
         // Limit focus events to the direct child of the event component.
         // Browser focus is not expected to bubble.
         if (!state.isFocused && state.focusTarget === target) {
@@ -427,7 +427,7 @@ const focusWithinResponderImpl = {
 
     switch (type) {
       case 'focus': {
-        state.focusTarget = context.getCurrentTarget();
+        state.focusTarget = context.getResponderNode();
         // Limit focus events to the direct child of the event component.
         // Browser focus is not expected to bubble.
         if (!state.isFocused) {

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

@@ -235,7 +235,7 @@ const hoverResponderImpl = {
       // START
       case 'pointerover': {
         if (!state.isHovered && pointerType !== 'touch') {
-          state.hoverTarget = context.getCurrentTarget();
+          state.hoverTarget = context.getResponderNode();
           dispatchHoverStartEvents(event, context, props, state);
         }
         break;
@@ -295,7 +295,7 @@ const hoverResponderFallbackImpl = {
       // START
       case 'mouseover': {
         if (!state.isHovered && !state.ignoreEmulatedMouseEvents) {
-          state.hoverTarget = context.getCurrentTarget();
+          state.hoverTarget = context.getResponderNode();
           dispatchHoverStartEvents(event, context, props, state);
         }
         break;

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

@@ -184,7 +184,7 @@ const inputResponderImpl = {
     if (props.disabled) {
       return;
     }
-    const currentTarget = context.getCurrentTarget();
+    const currentTarget = context.getResponderNode();
     if (target !== currentTarget || currentTarget === null) {
       return;
     }

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

@@ -143,7 +143,6 @@ function createKeyboardEvent(
     repeat,
     shiftKey,
   } = nativeEvent;
-  const target = ((context.getCurrentTarget(): any): Element);
 
   return {
     altKey,
@@ -155,7 +154,7 @@ function createKeyboardEvent(
     metaKey,
     repeat,
     shiftKey,
-    target,
+    target: event.target,
     timeStamp: context.getTimeStamp(),
     type,
   };

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

@@ -582,7 +582,7 @@ const pressResponderImpl = {
           // We set these here, before the button check so we have this
           // data around for handling of the context menu
           state.pointerType = pointerType;
-          const pressTarget = (state.pressTarget = context.getCurrentTarget());
+          const pressTarget = (state.pressTarget = context.getResponderNode());
           if (isPointerEvent) {
             state.activePointerId = pointerId;
           } else if (isTouchEvent) {
@@ -634,7 +634,7 @@ const pressResponderImpl = {
 
         if (isFunction(onPress) && isScreenReaderVirtualClick(nativeEvent)) {
           state.pointerType = 'keyboard';
-          state.pressTarget = context.getCurrentTarget();
+          state.pressTarget = context.getResponderNode();
           const preventDefault = props.preventDefault;
 
           if (preventDefault !== false) {

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

@@ -412,7 +412,7 @@ const pressResponderImpl = {
     if (type === 'topTouchStart') {
       if (!state.isPressed) {
         state.pointerType = 'touch';
-        const pressTarget = (state.pressTarget = context.getCurrentTarget());
+        const pressTarget = (state.pressTarget = context.getResponderNode());
         const touchEvent = getTouchFromPressEvent(nativeEvent);
         if (touchEvent === null) {
           return;

packages/react-native-renderer/src/ReactFabricEventResponderSystem.js

@@ -52,7 +52,6 @@ type ResponderTimer = {|
   instance: ReactNativeEventResponderInstance,
   func: () => void,
   id: number,
-  targetFiber: Fiber | null,
   timeStamp: number,
 |};
 
@@ -78,7 +77,6 @@ let currentTimeStamp = 0;
 let currentTimers = new Map();
 let currentInstance: null | ReactNativeEventResponderInstance = null;
 let currentTimerIDCounter = 0;
-let currentTargetFiber: Fiber | null = null;
 
 const eventResponderContext: ReactNativeResponderContext = {
   dispatchEvent(
@@ -198,7 +196,6 @@ const eventResponderContext: ReactNativeResponderContext = {
       instance: ((currentInstance: any): ReactNativeEventResponderInstance),
       func,
       id: timerId,
-      targetFiber: currentTargetFiber,
       timeStamp: currentTimeStamp,
     });
     activeTimeouts.set(timerId, timeout);
@@ -220,23 +217,14 @@ const eventResponderContext: ReactNativeResponderContext = {
     validateResponderContext();
     return currentTimeStamp;
   },
-  getCurrentTarget(): ReactNativeEventTarget | null {
+  getResponderNode(): ReactNativeEventTarget | null {
     validateResponderContext();
     const responderFiber = ((currentInstance: any): ReactNativeEventResponderInstance)
       .fiber;
-    let fiber = currentTargetFiber;
-    let currentTarget = null;
-
-    while (fiber !== null) {
-      if (fiber.tag === HostComponent) {
-        currentTarget = fiber.stateNode;
-      }
-      if (fiber === responderFiber || fiber.alternate === responderFiber) {
-        break;
-      }
-      fiber = fiber.return;
+    if (responderFiber.tag === ScopeComponent) {
+      return null;
     }
-    return currentTarget;
+    return responderFiber.stateNode;
   },
 };
 
@@ -308,9 +296,8 @@ function processTimers(
   try {
     batchedEventUpdates(() => {
       for (let i = 0; i < timersArr.length; i++) {
-        const {instance, func, id, targetFiber, timeStamp} = timersArr[i];
+        const {instance, func, id, timeStamp} = timersArr[i];
         currentInstance = instance;
-        currentTargetFiber = targetFiber;
         currentTimeStamp = timeStamp + delay;
         try {
           func();
@@ -323,7 +310,6 @@ function processTimers(
     currentTimers = null;
     currentInstance = null;
     currentTimeStamp = 0;
-    currentTargetFiber = null;
   }
 }
 
@@ -450,9 +436,7 @@ export function dispatchEventForResponderEventSystem(
   const previousInstance = currentInstance;
   const previousTimers = currentTimers;
   const previousTimeStamp = currentTimeStamp;
-  const previousTargetFiber = currentTargetFiber;
   currentTimers = null;
-  currentTargetFiber = targetFiber;
   // We might want to control timeStamp another way here
   currentTimeStamp = Date.now();
   try {
@@ -467,7 +451,6 @@ export function dispatchEventForResponderEventSystem(
     currentTimers = previousTimers;
     currentInstance = previousInstance;
     currentTimeStamp = previousTimeStamp;
-    currentTargetFiber = previousTargetFiber;
   }
 }
 

packages/react-native-renderer/src/ReactNativeTypes.js

@@ -219,7 +219,7 @@ export type ReactNativeResponderContext = {
   setTimeout: (func: () => void, timeout: number) => number,
   clearTimeout: (timerId: number) => void,
   getTimeStamp: () => number,
-  getCurrentTarget(): ReactNativeEventTarget | null,
+  getResponderNode(): ReactNativeEventTarget | null,
 };
 
 export type PointerType =

packages/shared/ReactDOMTypes.js

@@ -75,5 +75,5 @@ export type ReactDOMResponderContext = {
   continuePropagation(): void,
   // Used for controller components
   enqueueStateRestore(Element | Document): void,
-  getCurrentTarget(): Element | null,
+  getResponderNode(): Element | null,
 };