Do not call onPress on buttons while dismissing keyboard (#4281)

## Description

Currently, when buttons are inside `ScrolView` with
`keyboardShouldPersistTaps={never}` they still call `onPress` even
though press was meant to dismiss keyboard.

This PR fixes that behavior. It attaches listeners for keyboard state
and based on that it blocks `onPress*` callbacks on JS side.

Fixes #992

## Test plan

Tested on Keyboard Should Persist Taps example

Author: m-bert

apps/common-app/src/new_api/tests/keyboardShouldPersistTaps/index.tsx

@@ -13,20 +13,22 @@ import {
   Pressable as RNGHPressable,
   ScrollView as RNGHScrollView,
   TextInput as RNGHTextInput,
+  Touchable as RNGHTouchable,
   useTapGesture,
 } from 'react-native-gesture-handler';
 
 import type { FeedbackHandle } from '../../../common';
 import { COLORS, Feedback, InfoSection } from '../../../common';
 
 type Mode = 'never' | 'handled' | 'always';
-type Example = 'pressable' | 'tap';
+type Example = 'pressable' | 'touchable' | 'tap';
 
 const MODES: Mode[] = ['never', 'handled', 'always'];
-const EXAMPLES: Example[] = ['pressable', 'tap'];
+const EXAMPLES: Example[] = ['pressable', 'touchable', 'tap'];
 
 const EXAMPLE_LABELS: Record<Example, string> = {
   pressable: 'GH Pressable',
+  touchable: 'GH Touchable',
   tap: 'useTapGesture',
 };
 
@@ -105,6 +107,12 @@ export default function KeyboardShouldPersistTapsExample() {
               onPress={() => report('GH Pressable onPress')}>
               <Text style={styles.buttonText}>Press me</Text>
             </RNGHPressable>
+          ) : example === 'touchable' ? (
+            <RNGHTouchable
+              style={[styles.button, { backgroundColor: COLORS.GREEN }]}
+              onPress={() => report('GH Touchable onPress')}>
+              <Text style={styles.buttonText}>Press me</Text>
+            </RNGHTouchable>
           ) : (
             <GestureTapButton
               onTap={() => report('useTapGesture onActivate')}

packages/react-native-gesture-handler/src/__tests__/api_v3.test.tsx

@@ -1,11 +1,15 @@
 import { render, renderHook } from '@testing-library/react-native';
 import { act } from 'react';
-import { View } from 'react-native';
+import { Keyboard, View } from 'react-native';
 
 import GestureHandlerRootView from '../components/GestureHandlerRootView';
 import { fireGestureHandler, getByGestureTestId } from '../jestUtils';
 import { State } from '../State';
 import { Pressable, RectButton, ScrollView, Touchable } from '../v3/components';
+import {
+  isKeyboardDismissingTap,
+  type JSResponderContextValue,
+} from '../v3/components/ScrollViewResponderInterceptor';
 import { GestureDetector } from '../v3/detectors';
 import { useSimultaneousGestures } from '../v3/hooks';
 import { usePanGesture, useTapGesture } from '../v3/hooks/gestures';
@@ -133,7 +137,7 @@ describe('[API v3] Components', () => {
 
   describe('ScrollView', () => {
     test('handles responder event passed through Pressable for keyboardShouldPersistTaps handled', async () => {
-      const { getByTestId, UNSAFE_getAllByType } = render(
+      const { UNSAFE_getAllByType } = render(
         <GestureHandlerRootView>
           <ScrollView keyboardShouldPersistTaps="handled">
             <Pressable testID="pressable" />
@@ -143,22 +147,22 @@ describe('[API v3] Components', () => {
 
       await act(flushImmediate);
 
-      const pressable = getByTestId('pressable');
+      const nativeDetector = getNativeDetector(UNSAFE_getAllByType);
       const scrollViewResponder = getScrollViewResponder(UNSAFE_getAllByType);
 
       expect(scrollViewResponder).toBeDefined();
       expect(
         scrollViewResponder?.props.onStartShouldSetResponderCapture()
       ).toBe(false);
-      expect(pressable.props.onStartShouldSetResponder()).toBe(false);
+      expect(nativeDetector?.props.onStartShouldSetResponder()).toBe(false);
       expect(scrollViewResponder?.props.onStartShouldSetResponder()).toBe(true);
       expect(scrollViewResponder?.props.onStartShouldSetResponder()).toBe(
         false
       );
     });
 
     test('does not handle responder event passed through Pressable without keyboardShouldPersistTaps handled', async () => {
-      const { getByTestId, UNSAFE_getAllByType } = render(
+      const { UNSAFE_getAllByType } = render(
         <GestureHandlerRootView>
           <ScrollView>
             <Pressable testID="pressable" />
@@ -168,14 +172,14 @@ describe('[API v3] Components', () => {
 
       await act(flushImmediate);
 
-      const pressable = getByTestId('pressable');
+      const nativeDetector = getNativeDetector(UNSAFE_getAllByType);
       const scrollViewResponder = getScrollViewResponder(UNSAFE_getAllByType);
 
       expect(scrollViewResponder).toBeDefined();
       expect(
         scrollViewResponder?.props.onStartShouldSetResponderCapture()
       ).toBe(false);
-      expect(pressable.props.onStartShouldSetResponder()).toBe(false);
+      expect(nativeDetector?.props.onStartShouldSetResponder()).toBe(false);
       expect(scrollViewResponder?.props.onStartShouldSetResponder()).toBe(
         false
       );
@@ -278,6 +282,159 @@ describe('[API v3] Components', () => {
     });
   });
 
+  describe('keyboardShouldPersistTaps="never" drop', () => {
+    // The keyboard-visibility tracker subscribes via Keyboard.addListener when a
+    // ScrollView mounts. We spy on it to grab the captured `keyboardDidShow`
+    // handler and invoke it, simulating the keyboard being open.
+    const showKeyboard = (addListenerSpy: jest.SpyInstance, height = 300) => {
+      const showCall = addListenerSpy.mock.calls.find(
+        (call) => call[0] === 'keyboardDidShow'
+      );
+      act(() => {
+        showCall?.[1]?.({ endCoordinates: { height } });
+      });
+    };
+
+    const makeContext = (
+      keyboardShouldPersistTaps: JSResponderContextValue['keyboardShouldPersistTaps']
+    ): JSResponderContextValue => ({
+      isRNGHResponderEvent: { current: false },
+      keyboardShouldPersistTaps,
+    });
+
+    const fireTap = (testID: string) =>
+      act(() => {
+        fireGestureHandler(getByGestureTestId(testID), [
+          { state: State.BEGAN },
+          { state: State.ACTIVE },
+          { state: State.END },
+        ]);
+      });
+
+    test('isKeyboardDismissingTap is true only in never mode while the keyboard is visible', async () => {
+      const addListenerSpy = jest.spyOn(Keyboard, 'addListener');
+
+      render(
+        <GestureHandlerRootView>
+          <ScrollView keyboardShouldPersistTaps="never" />
+        </GestureHandlerRootView>
+      );
+      await act(flushImmediate);
+
+      // Keyboard not shown yet -> nothing to dismiss.
+      expect(isKeyboardDismissingTap(makeContext('never'))).toBe(false);
+
+      showKeyboard(addListenerSpy);
+
+      // `never` (and its default, undefined) drops the tap; the others never do.
+      expect(isKeyboardDismissingTap(makeContext('never'))).toBe(true);
+      expect(isKeyboardDismissingTap(makeContext(undefined))).toBe(true);
+      expect(isKeyboardDismissingTap(makeContext('handled'))).toBe(false);
+      expect(isKeyboardDismissingTap(makeContext('always'))).toBe(false);
+      // Outside an RNGH ScrollView there is no context, so nothing is dropped.
+      expect(isKeyboardDismissingTap(null)).toBe(false);
+
+      addListenerSpy.mockRestore();
+    });
+
+    test('isKeyboardDismissingTap is false for a detached (height 0) keyboard', async () => {
+      const addListenerSpy = jest.spyOn(Keyboard, 'addListener');
+
+      render(
+        <GestureHandlerRootView>
+          <ScrollView keyboardShouldPersistTaps="never" />
+        </GestureHandlerRootView>
+      );
+      await act(flushImmediate);
+
+      // A detached/floating keyboard reports height 0 - nothing to dismiss.
+      showKeyboard(addListenerSpy, 0);
+
+      expect(isKeyboardDismissingTap(makeContext('never'))).toBe(false);
+
+      addListenerSpy.mockRestore();
+    });
+
+    test('Touchable does NOT fire any press callback on the keyboard-dismissing tap (never)', async () => {
+      const addListenerSpy = jest.spyOn(Keyboard, 'addListener');
+      const onPress = jest.fn();
+      const onPressIn = jest.fn();
+      const onPressOut = jest.fn();
+
+      render(
+        <GestureHandlerRootView>
+          <ScrollView keyboardShouldPersistTaps="never">
+            <Touchable
+              testID="touchable"
+              onPress={onPress}
+              onPressIn={onPressIn}
+              onPressOut={onPressOut}
+            />
+          </ScrollView>
+        </GestureHandlerRootView>
+      );
+      await act(flushImmediate);
+      showKeyboard(addListenerSpy);
+
+      // Includes a move (second ACTIVE) so the onUpdate path is exercised too.
+      act(() => {
+        fireGestureHandler(getByGestureTestId('touchable'), [
+          { state: State.BEGAN },
+          { state: State.ACTIVE },
+          { state: State.ACTIVE },
+          { state: State.END },
+        ]);
+      });
+
+      // The whole interaction is swallowed - not just onPress, but the press-in/
+      // out side effects too (incl. via onUpdate as the finger moves).
+      expect(onPress).not.toHaveBeenCalled();
+      expect(onPressIn).not.toHaveBeenCalled();
+      expect(onPressOut).not.toHaveBeenCalled();
+      addListenerSpy.mockRestore();
+    });
+
+    test('Touchable fires onPress in never mode when the keyboard is not visible', async () => {
+      const onPress = jest.fn();
+
+      render(
+        <GestureHandlerRootView>
+          <ScrollView keyboardShouldPersistTaps="never">
+            <Touchable testID="touchable" onPress={onPress} />
+          </ScrollView>
+        </GestureHandlerRootView>
+      );
+      await act(flushImmediate);
+
+      fireTap('touchable');
+
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    test.each(['handled', 'always'] as const)(
+      'Touchable fires onPress in %s mode even while the keyboard is visible',
+      async (mode) => {
+        const addListenerSpy = jest.spyOn(Keyboard, 'addListener');
+        const onPress = jest.fn();
+
+        render(
+          <GestureHandlerRootView>
+            <ScrollView keyboardShouldPersistTaps={mode}>
+              <Touchable testID="touchable" onPress={onPress} />
+            </ScrollView>
+          </GestureHandlerRootView>
+        );
+        await act(flushImmediate);
+        showKeyboard(addListenerSpy);
+
+        fireTap('touchable');
+
+        expect(onPress).toHaveBeenCalledTimes(1);
+        addListenerSpy.mockRestore();
+      }
+    );
+  });
+
   describe('Touchable', () => {
     test('calls onPress on successful press', () => {
       const pressFn = jest.fn();

packages/react-native-gesture-handler/src/v3/components/Pressable.tsx

@@ -45,8 +45,8 @@ import {
 } from '../hooks';
 import { PureNativeButton } from './GestureButtons';
 import {
+  isKeyboardDismissingTap,
   JSResponderContext,
-  updateResponderEventValue,
 } from './ScrollViewResponderInterceptor';
 
 const DEFAULT_LONG_PRESS_DURATION = 500;
@@ -92,6 +92,11 @@ const Pressable = (props: PressableProps) => {
     height: 0,
   });
 
+  // When the touch that begins a press is the one dismissing the keyboard
+  // (keyboardShouldPersistTaps="never"), the press is swallowed to match RN's
+  // touchables.
+  const dropKeyboardTapRef = useRef<boolean | null>(null);
+
   const normalizedHitSlop: Insets = useMemo(
     () =>
       typeof hitSlop === 'number'
@@ -153,11 +158,16 @@ const Pressable = (props: PressableProps) => {
 
   const handleFinalize = useCallback(() => {
     isCurrentlyPressed.current = false;
+    dropKeyboardTapRef.current = null;
     cancelLongPress();
     cancelDelayedPress();
     setPressedState(false);
   }, [cancelDelayedPress, cancelLongPress]);
 
+  const captureKeyboardDismiss = useCallback(() => {
+    dropKeyboardTapRef.current ??= isKeyboardDismissingTap(jsResponderContext);
+  }, [jsResponderContext]);
+
   const handlePressIn = useCallback(
     (event: PressableEvent, skipBoundsCheck = false) => {
       if (
@@ -265,6 +275,12 @@ const Pressable = (props: PressableProps) => {
     maxDistance: INT32_MAX, // Stops long press from cancelling on touch move
     cancelsTouchesInView: false,
     onTouchesDown: (event) => {
+      captureKeyboardDismiss();
+
+      if (dropKeyboardTapRef.current) {
+        return;
+      }
+
       const pressableEvent = gestureTouchToPressableEvent(event);
       stateMachine.handleEvent(
         StateMachineEvent.LONG_PRESS_TOUCHES_DOWN,
@@ -314,6 +330,12 @@ const Pressable = (props: PressableProps) => {
       }
     },
     onBegin: () => {
+      captureKeyboardDismiss();
+
+      if (dropKeyboardTapRef.current) {
+        return;
+      }
+
       if (Platform.isTV) {
         // tvOS drives this native gesture from the focus-engine Select press.
         // The press state machine is touch-based and never
@@ -398,23 +420,11 @@ const Pressable = (props: PressableProps) => {
     [onLayout]
   );
 
-  // Let RN components higher in the tree handle JS responder negotiation.
-  // RNGH ScrollView uses this marker to preserve keyboardShouldPersistTaps='handled'
-  // when there are no RN responder components between it and this Pressable.
-  const handleStartShouldSetResponder = useCallback(() => {
-    if (!disabled) {
-      updateResponderEventValue(jsResponderContext, true);
-    }
-
-    return false;
-  }, [disabled, jsResponderContext]);
-
   const tvProps = getTVProps(remainingProps);
 
   return (
     <GestureDetector gesture={gesture}>
       <PureNativeButton
-        onStartShouldSetResponder={handleStartShouldSetResponder}
         {...remainingProps}
         {...tvProps}
         onLayout={setDimensions}