Add onLongPress to TextInput

TextInput already handles its presses through Pressability and exposes
onPress, onPressIn and onPressOut, but not onLongPress, so a held press
on a TextInput cannot be told apart from a tap.

TextInput now hands onLongPress to Pressability. Once a touch is held
past the long press delay, onLongPress is called, and the release that
follows does not call onPress, as on Pressable. Without onLongPress a
held press is still a press.

Author: YevheniiKotyrlo

packages/react-native/Libraries/Components/TextInput/TextInput.flow.js

@@ -854,6 +854,12 @@ type TextInputBaseProps = Readonly<{
    */
   onKeyPress?: ?(e: TextInputKeyPressEvent) => unknown,
 
+  /**
+   * Called when a touch is held for 500ms. The release that follows does not
+   * call `onPress`.
+   */
+  onLongPress?: ?(event: GestureResponderEvent) => unknown,
+
   /**
    * Called when a single tap gesture is detected.
    */

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -468,6 +468,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
   const {
     editable,
     hitSlop,
+    onLongPress,
     onPress,
     onPressIn,
     onPressOut,
@@ -478,6 +479,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     () => ({
       cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
       hitSlop,
+      onLongPress,
       onPress: (event: GestureResponderEvent) => {
         onPress?.(event);
         if (editable !== false) {
@@ -492,6 +494,7 @@ function InternalTextInput(props: TextInputProps): React.Node {
     [
       editable,
       hitSlop,
+      onLongPress,
       onPress,
       onPressIn,
       onPressOut,

packages/react-native/Libraries/Components/TextInput/__tests__/TextInput-itest.js

@@ -18,6 +18,30 @@ import * as React from 'react';
 import {createRef, useEffect, useLayoutEffect, useRef} from 'react';
 import {TextInput} from 'react-native';
 
+function touchStart(element: HostInstance): void {
+  Fantom.dispatchNativeEvent(
+    element,
+    'onTouchStart',
+    {
+      touches: [{identifier: 0, pageX: 5, pageY: 5, timestamp: 0}],
+      changedTouches: [{identifier: 0, pageX: 5, pageY: 5, timestamp: 0}],
+    },
+    {category: Fantom.NativeEventCategory.Discrete},
+  );
+}
+
+function touchEnd(element: HostInstance): void {
+  Fantom.dispatchNativeEvent(
+    element,
+    'onTouchEnd',
+    {
+      touches: [],
+      changedTouches: [{identifier: 0, pageX: 5, pageY: 5, timestamp: 200}],
+    },
+    {category: Fantom.NativeEventCategory.Discrete},
+  );
+}
+
 describe('<TextInput>', () => {
   describe('props', () => {
     describe('selection', () => {
@@ -255,6 +279,134 @@ describe('<TextInput>', () => {
       });
     });
 
+    describe('onLongPress', () => {
+      let timers: Fantom.TimerMock;
+
+      beforeEach(() => {
+        timers = Fantom.installTimerMock();
+      });
+
+      afterEach(() => {
+        timers.uninstall();
+      });
+
+      it('is called once a touch is held past the long press delay', () => {
+        const root = Fantom.createRoot();
+        const nodeRef = createRef<HostInstance>();
+        const onLongPress = jest.fn();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TextInput
+              onLongPress={onLongPress}
+              ref={nodeRef}
+              style={{height: 100, width: 100}}
+            />,
+          );
+        });
+
+        const element = nullthrows(nodeRef.current);
+        touchStart(element);
+        timers.advanceTimersByTime(499);
+        expect(onLongPress).toHaveBeenCalledTimes(0);
+
+        timers.advanceTimersByTime(1);
+        expect(onLongPress).toHaveBeenCalledTimes(1);
+      });
+
+      it('takes the place of the press, so the release calls no onPress and sends no focus command', () => {
+        const root = Fantom.createRoot();
+        const nodeRef = createRef<HostInstance>();
+        const onPress = jest.fn();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TextInput
+              nativeID="text-input"
+              onLongPress={() => {}}
+              onPress={onPress}
+              ref={nodeRef}
+              style={{height: 100, width: 100}}
+            />,
+          );
+        });
+
+        root.takeMountingManagerLogs();
+
+        const element = nullthrows(nodeRef.current);
+        touchStart(element);
+        timers.advanceTimersByTime(500);
+        touchEnd(element);
+        timers.runAllTimers();
+
+        expect(onPress).toHaveBeenCalledTimes(0);
+        expect(root.takeMountingManagerLogs()).toEqual([]);
+      });
+
+      it('leaves a press released before the delay a press that focuses', () => {
+        const root = Fantom.createRoot();
+        const nodeRef = createRef<HostInstance>();
+        const onLongPress = jest.fn();
+        const onPress = jest.fn();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TextInput
+              nativeID="text-input"
+              onLongPress={onLongPress}
+              onPress={onPress}
+              ref={nodeRef}
+              style={{height: 100, width: 100}}
+            />,
+          );
+        });
+
+        root.takeMountingManagerLogs();
+
+        const element = nullthrows(nodeRef.current);
+        touchStart(element);
+        timers.advanceTimersByTime(100);
+        touchEnd(element);
+        timers.runAllTimers();
+
+        expect(onLongPress).toHaveBeenCalledTimes(0);
+        expect(onPress).toHaveBeenCalledTimes(1);
+        expect(root.takeMountingManagerLogs()).toEqual([
+          'Command {type: "AndroidTextInput", nativeID: "text-input", name: "focus"}',
+        ]);
+      });
+
+      it('leaves a held press a press that focuses when it is not set', () => {
+        const root = Fantom.createRoot();
+        const nodeRef = createRef<HostInstance>();
+        const onPress = jest.fn();
+
+        Fantom.runTask(() => {
+          root.render(
+            <TextInput
+              nativeID="text-input"
+              onPress={onPress}
+              ref={nodeRef}
+              style={{height: 100, width: 100}}
+            />,
+          );
+        });
+
+        root.takeMountingManagerLogs();
+
+        const element = nullthrows(nodeRef.current);
+        touchStart(element);
+        timers.advanceTimersByTime(500);
+        touchEnd(element);
+        timers.runAllTimers();
+
+        expect(onPress).toHaveBeenCalledTimes(1);
+        expect(root.takeMountingManagerLogs()).toEqual([
+          'Command {type: "AndroidTextInput", nativeID: "text-input", name: "focus"}',
+        ]);
+      });
+    });
+
     describe('id and nativeID', () => {
       it(`has 'id' propagated as 'nativeID' to the mounting layer`, () => {
         const root = Fantom.createRoot();

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<b0c8c41e65758fde472ddf1c5b106a27>>
+ * @generated SignedSource<<1b73a40ce1edc05ec461e82434a82f45>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -5048,6 +5048,7 @@ declare type TextInputBaseProps = {
   readonly onEndEditing?: (e: TextInputEndEditingEvent) => unknown
   readonly onFocus?: (e: TextInputFocusEvent) => unknown
   readonly onKeyPress?: (e: TextInputKeyPressEvent) => unknown
+  readonly onLongPress?: (event: GestureResponderEvent) => unknown
   readonly onPress?: (event: GestureResponderEvent) => unknown
   readonly onPressIn?: (event: GestureResponderEvent) => unknown
   readonly onPressOut?: (event: GestureResponderEvent) => unknown
@@ -6022,7 +6023,7 @@ export {
   TaskProvider, // 266dedf2
   Text, // 6f8269c1
   TextContentType, // 239b3ecc
-  TextInput, // cf6467dc
+  TextInput, // 33a0ccfa
   TextInputAndroidProps, // 9ebbc103
   TextInputBlurEvent, // b4c7a58c
   TextInputChangeEvent, // 92363e10
@@ -6032,7 +6033,7 @@ export {
   TextInputIOSProps, // fb3c9327
   TextInputInstance, // 53fe7b73
   TextInputKeyPressEvent, // cbbc322a
-  TextInputProps, // bb087c92
+  TextInputProps, // 3ea65957
   TextInputSelectionChangeEvent, // 4a8f10c2
   TextInputSubmitEditingEvent, // e811fdbd
   TextInstance, // 7c7e2069

packages/react-native/types_DEPRECATED/Libraries/Components/TextInput/TextInput.d.ts

@@ -828,6 +828,13 @@ export interface TextInputProps
    */
   onEndEditing?: ((e: TextInputEndEditingEvent) => void) | undefined;
 
+  /**
+   * Called when a touch is held for 500ms. The release that follows does not
+   * call `onPress`.
+   */
+  onLongPress?:
+    ((e: NativeSyntheticEvent<NativeTouchEvent>) => void) | undefined;
+
   /**
    * Called when a single tap gesture is detected.
    */