Process responder events for touches whose target unmounted (#59522)

Summary:
With `enableNativeEventTargetEventDispatching` on, a touch that ends after its view unmounted never reaches the responder, so the old responder sticks around and `trackedTouchCount` stays one too high, which drops the next tap. `processResponderEvent` already handles a null target, but `dispatchNativeEvent` only accepts a non-null one and would crash in `dispatchTrustedEvent` if it got null. It now takes `EventTarget | null` and returns right after the responder step when there is no target. The renderer's `dispatchEvent` (`ReactFabricEventEmitter.js` in react/react) still skips the call for a null target, so that guard has to go too before the bug is fully fixed, and this change needs to land first.

Fixes #59519

## Changelog:

[GENERAL] [FIXED] - Fix the responder not being released when a touch ends after its view unmounted

Pull Request resolved: #59522

Test Plan: Added a Fantom test to `ResponderEventTarget-itest.js` that grants the responder, sends `topTouchEnd` with a null target through `dispatchNativeEvent`, and checks that the release fires and the next touch is granted again. I couldn't build the Fantom runner locally, so I also ran the null-target case as a throwaway Jest test: on `main` it throws `TypeError: Cannot read properties of null` from `dispatchTrustedEvent`, and it passes with this change. `flow check`, eslint and prettier are clean.

Reviewed By: javache

Differential Revision: D127796330

Pulled By: rubennorte

fbshipit-source-id: 3c3547998b3b079a540e8cdf8e904ee95a855515

Author: lazerg

packages/react-native/src/private/renderer/core/__tests__/ResponderEventTarget-itest.js

@@ -14,6 +14,7 @@ import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 import * as Fantom from '@react-native/fantom';
 import * as React from 'react';
 import {View} from 'react-native';
+import {ReactNativeFeatureFlags} from 'react-native/react-private-interface';
 
 // Helpers for common touch event payloads
 function touchStart(identifier: number = 0): {
@@ -132,6 +133,68 @@ describe('Responder System', () => {
     expect(onResponderRelease).toHaveBeenCalledTimes(1);
   });
 
+  // TODO(react/react#38006): run this with the flag on too once the synced
+  // renderer stops dropping events whose target is null.
+  (ReactNativeFeatureFlags.enableNativeEventTargetEventDispatching()
+    ? it.skip
+    : it)(
+    'releases the responder when the touched view unmounts before the touch ends',
+    () => {
+      const root = Fantom.createRoot();
+      const firstRef = React.createRef<React.ElementRef<typeof View>>();
+      const secondRef = React.createRef<React.ElementRef<typeof View>>();
+      const onFirstResponderGrant = jest.fn();
+      const onSecondResponderGrant = jest.fn();
+
+      Fantom.runTask(() => {
+        root.render(
+          <View
+            key="first"
+            ref={firstRef}
+            onStartShouldSetResponder={() => true}
+            onResponderGrant={onFirstResponderGrant}
+          />,
+        );
+      });
+
+      Fantom.dispatchNativeEvent(firstRef, 'onTouchStart', touchStart(), {
+        category: Fantom.NativeEventCategory.Discrete,
+      });
+
+      expect(onFirstResponderGrant).toHaveBeenCalledTimes(1);
+
+      // Queue the touch end without flushing it, then unmount the view, so the
+      // event reaches JS without a target.
+      Fantom.enqueueNativeEvent(firstRef, 'onTouchEnd', touchEnd(), {
+        category: Fantom.NativeEventCategory.Discrete,
+      });
+
+      Fantom.runTask(() => {
+        root.render(
+          <View
+            key="second"
+            ref={secondRef}
+            onStartShouldSetResponder={() => true}
+            onResponderGrant={onSecondResponderGrant}
+          />,
+        );
+      });
+
+      Fantom.flushAllNativeEvents();
+
+      // The responder was released, so the next touch is granted
+      Fantom.dispatchNativeEvent(secondRef, 'onTouchStart', touchStart(), {
+        category: Fantom.NativeEventCategory.Discrete,
+      });
+
+      expect(onSecondResponderGrant).toHaveBeenCalledTimes(1);
+
+      Fantom.dispatchNativeEvent(secondRef, 'onTouchEnd', touchEnd(), {
+        category: Fantom.NativeEventCategory.Discrete,
+      });
+    },
+  );
+
   it('dispatches responderTerminate on touch cancel', () => {
     const root = Fantom.createRoot();
     const ref = React.createRef<React.ElementRef<typeof View>>();

packages/react-native/src/private/renderer/events/ReactNativeResponder.js

@@ -591,7 +591,7 @@ function isResponderRelevantTopLevelType(topLevelType: string): boolean {
  */
 export function processResponderEvent(
   topLevelType: string,
-  eventTarget: EventTarget | null,
+  eventTarget: ?EventTarget,
   nativeEvent: {[string]: unknown},
 ): void {
   // Fast path: if this event isn't one the responder system cares about and

packages/react-native/src/private/renderer/events/dispatchNativeEvent.js

@@ -37,17 +37,23 @@ import {
  * enableNativeEventTargetEventDispatching is enabled.
  */
 export default function dispatchNativeEvent(
-  target: EventTarget,
+  target: ?EventTarget,
   type: string,
   payload: {[string]: unknown},
 ): void {
   // $FlowFixMe[incompatible-type] The global is backed by this implementation.
-  const internalTarget = target as InternalEventTarget;
+  const internalTarget = target as ?InternalEventTarget;
 
   // Process responder events before normal event dispatch.
   processResponderEvent(type, internalTarget, payload);
 
   try {
+    // The target is missing when its view unmounted during the touch, so only
+    // the responder step above applies.
+    if (internalTarget == null) {
+      return;
+    }
+
     // Normal EventTarget dispatch
     const bubbleConfig = customBubblingEventTypes[type];
     const directConfig = customDirectEventTypes[type];