Focus TextInput when a long press takes the place of its press

The release of a press is where TextInput focuses itself, and a long
press removes that release, so a held field was focused only by the
platform: on Android, a field with contextMenuHidden ended focused with
no keyboard. TextInput now focuses the input when onLongPress fires, as
it does on a press. Without onLongPress nothing changes.

The first onLongPress case now lifts its finger: the touch it left down
kept the responder, so the next case's touches never reached its field.

Author: YevheniiKotyrlo

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

@@ -855,8 +855,8 @@ type TextInputBaseProps = Readonly<{
   onKeyPress?: ?(e: TextInputKeyPressEvent) => unknown,
 
   /**
-   * Called when a touch is held for 500ms. The release that follows does not
-   * call `onPress`.
+   * Called when a touch is held for 500ms. The input is focused then, as on a
+   * press, and the release that follows does not call `onPress`.
    */
   onLongPress?: ?(event: GestureResponderEvent) => unknown,
 

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

@@ -475,32 +475,38 @@ function InternalTextInput(props: TextInputProps): React.Node {
     rejectResponderTermination,
   } = props;
 
-  const config = useMemo(
-    () => ({
+  const config = useMemo(() => {
+    const focusIfEditable = () => {
+      if (editable !== false && inputRef.current != null) {
+        inputRef.current.focus();
+      }
+    };
+    return {
       cancelable: Platform.OS === 'ios' ? !rejectResponderTermination : null,
       hitSlop,
-      onLongPress,
+      onLongPress:
+        onLongPress == null
+          ? null
+          : (event: GestureResponderEvent) => {
+              onLongPress(event);
+              focusIfEditable();
+            },
       onPress: (event: GestureResponderEvent) => {
         onPress?.(event);
-        if (editable !== false) {
-          if (inputRef.current != null) {
-            inputRef.current.focus();
-          }
-        }
+        focusIfEditable();
       },
       onPressIn,
       onPressOut,
-    }),
-    [
-      editable,
-      hitSlop,
-      onLongPress,
-      onPress,
-      onPressIn,
-      onPressOut,
-      rejectResponderTermination,
-    ],
-  );
+    };
+  }, [
+    editable,
+    hitSlop,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    rejectResponderTermination,
+  ]);
 
   // Hide caret during test runs due to a flashing caret
   // makes screenshot tests flakey

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

@@ -312,9 +312,12 @@ describe('<TextInput>', () => {
 
         timers.advanceTimersByTime(1);
         expect(onLongPress).toHaveBeenCalledTimes(1);
+
+        touchEnd(element);
+        timers.runAllTimers();
       });
 
-      it('takes the place of the press, so the release calls no onPress and sends no focus command', () => {
+      it('focuses the input as a press does, and the release that follows calls no onPress', () => {
         const root = Fantom.createRoot();
         const nodeRef = createRef<HostInstance>();
         const onPress = jest.fn();
@@ -336,14 +339,18 @@ describe('<TextInput>', () => {
         const element = nullthrows(nodeRef.current);
         touchStart(element);
         timers.advanceTimersByTime(500);
+
+        expect(root.takeMountingManagerLogs()).toEqual([
+          'Command {type: "AndroidTextInput", nativeID: "text-input", name: "focus"}',
+        ]);
+
         touchEnd(element);
         timers.runAllTimers();
 
         expect(onPress).toHaveBeenCalledTimes(0);
-        expect(root.takeMountingManagerLogs()).toEqual([]);
       });
 
-      it('leaves a press released before the delay a press that focuses', () => {
+      it('does not change a press released before the delay, which calls onPress and focuses', () => {
         const root = Fantom.createRoot();
         const nodeRef = createRef<HostInstance>();
         const onLongPress = jest.fn();
@@ -376,7 +383,7 @@ describe('<TextInput>', () => {
         ]);
       });
 
-      it('leaves a held press a press that focuses when it is not set', () => {
+      it('when not set, leaves a held press calling onPress and focusing', () => {
         const root = Fantom.createRoot();
         const nodeRef = createRef<HostInstance>();
         const onPress = jest.fn();

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

@@ -829,8 +829,8 @@ export interface TextInputProps
   onEndEditing?: ((e: TextInputEndEditingEvent) => void) | undefined;
 
   /**
-   * Called when a touch is held for 500ms. The release that follows does not
-   * call `onPress`.
+   * Called when a touch is held for 500ms. The input is focused then, as on a
+   * press, and the release that follows does not call `onPress`.
    */
   onLongPress?:
     ((e: NativeSyntheticEvent<NativeTouchEvent>) => void) | undefined;