fix: Android - Search - Keyboard is not automatically opened despite input being focused.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Author: Krishna2323

src/components/Search/SearchAutocompleteInput.tsx

@@ -239,6 +239,7 @@ function SearchAutocompleteInput(
                         multiline={false}
                         parser={parser}
                         selection={selection}
+                        shouldDelayFocus
                     />
                 </View>
                 {!!value && (

src/components/TextInput/BaseTextInput/implementation/index.native.tsx

@@ -1,3 +1,4 @@
+import {useFocusEffect} from '@react-navigation/native';
 import {Str} from 'expensify-common';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
@@ -78,6 +79,7 @@ function BaseTextInput(
         placeholderTextColor,
         onClearInput,
         iconContainerStyle,
+        shouldDelayFocus = false,
         ...props
     }: BaseTextInputProps,
     ref: ForwardedRef<BaseTextInputRef>,
@@ -92,6 +94,7 @@ function BaseTextInput(
     const markdownStyle = useMarkdownStyle(false, excludedMarkdownStyles);
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
+    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     const {hasError = false} = inputProps;
     // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null
@@ -281,6 +284,23 @@ function BaseTextInput(
     // Height fix is needed only for Text single line inputs
     const shouldApplyHeight = !shouldUseFullInputHeight && !isMultiline && !isMarkdownEnabled;
 
+    useFocusEffect(
+        useCallback(() => {
+            if (!shouldDelayFocus || !inputProps.autoFocus) {
+                return;
+            }
+
+            focusTimeoutRef.current = setTimeout(() => {
+                if (!input.current) {
+                    return;
+                }
+                input.current.focus();
+            }, CONST.ANIMATED_TRANSITION);
+
+            return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current);
+        }, [shouldDelayFocus, inputProps.autoFocus]),
+    );
+
     return (
         <>
             <View style={[containerStyles]}>
@@ -417,6 +437,7 @@ function BaseTextInput(
                                 readOnly={isReadOnly}
                                 defaultValue={defaultValue}
                                 markdownStyle={markdownStyle}
+                                autoFocus={shouldDelayFocus ? false : inputProps.autoFocus}
                             />
                             {!!suffixCharacter && (
                                 <View style={[styles.textInputSuffixWrapper, suffixContainerStyle]}>

src/components/TextInput/BaseTextInput/implementation/index.tsx

@@ -1,3 +1,4 @@
+import {useFocusEffect} from '@react-navigation/native';
 import {Str} from 'expensify-common';
 import type {ForwardedRef, RefObject} from 'react';
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
@@ -80,6 +81,7 @@ function BaseTextInput(
         placeholderTextColor,
         onClearInput,
         iconContainerStyle,
+        shouldDelayFocus = false,
         ...inputProps
     }: BaseTextInputProps,
     ref: ForwardedRef<BaseTextInputRef>,
@@ -94,6 +96,7 @@ function BaseTextInput(
     const {hasError = false} = inputProps;
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
+    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
     // Disabling this line for safeness as nullish coalescing works only if value is undefined or null
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
@@ -286,6 +289,23 @@ function BaseTextInput(
     // If we need some other inputMode (eg. 'decimal'), then the autocomplete bar will show, but we can do nothing about it as it's a known Chrome bug.
     const inputMode = inputProps.inputMode ?? (isMobileChrome() ? 'search' : undefined);
 
+    useFocusEffect(
+        useCallback(() => {
+            if (!shouldDelayFocus || !inputProps.autoFocus) {
+                return;
+            }
+
+            focusTimeoutRef.current = setTimeout(() => {
+                if (!input.current) {
+                    return;
+                }
+                input.current.focus();
+            }, CONST.ANIMATED_TRANSITION);
+
+            return () => focusTimeoutRef.current && clearTimeout(focusTimeoutRef.current);
+        }, [shouldDelayFocus, inputProps.autoFocus]),
+    );
+
     return (
         <>
             <View
@@ -430,6 +450,7 @@ function BaseTextInput(
                                 readOnly={isReadOnly}
                                 defaultValue={defaultValue}
                                 markdownStyle={markdownStyle}
+                                autoFocus={shouldDelayFocus ? false : inputProps.autoFocus}
                             />
                             {!!suffixCharacter && (
                                 <View style={[styles.textInputSuffixWrapper, suffixContainerStyle]}>

src/components/TextInput/BaseTextInput/types.ts

@@ -186,6 +186,9 @@ type CustomBaseTextInputProps = {
 
     /** Whether the input should be enforced to take full height of container. Default is `false` */
     shouldUseFullInputHeight?: boolean;
+
+    /** Whether focus event should be delayed */
+    shouldDelayFocus?: boolean;
 };
 
 type BaseTextInputRef = HTMLFormElement | AnimatedTextInputRef;