Merge pull request #52810 from Krishna2323/krishna2323/issue/51543

fix: Taxes - BNP input is not auto focused in add rate page.

src/components/AmountPicker/AmountSelectorModal.tsx

@@ -1,11 +1,13 @@
-import React, {useState} from 'react';
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useCallback, useRef, useState} from 'react';
 import {View} from 'react-native';
 import AmountForm from '@components/AmountForm';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import ScrollView from '@components/ScrollView';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -16,6 +18,28 @@ function AmountSelectorModal({value, description = '', onValueSelected, isVisibl
     const styles = useThemeStyles();
 
     const [currentValue, setValue] = useState(value);
+    const inputRef = useRef<BaseTextInputRef | null>(null);
+    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const inputCallbackRef = (ref: BaseTextInputRef | null) => {
+        inputRef.current = ref;
+    };
+
+    useFocusEffect(
+        useCallback(() => {
+            focusTimeoutRef.current = setTimeout(() => {
+                if (inputRef.current && isVisible) {
+                    inputRef.current.focus();
+                }
+                return () => {
+                    if (!focusTimeoutRef.current || !isVisible) {
+                        return;
+                    }
+                    clearTimeout(focusTimeoutRef.current);
+                };
+            }, CONST.ANIMATED_TRANSITION);
+        }, [isVisible, inputRef]),
+    );
 
     return (
         <Modal
@@ -42,9 +66,9 @@ function AmountSelectorModal({value, description = '', onValueSelected, isVisibl
                         <AmountForm
                             // eslint-disable-next-line react/jsx-props-no-spreading
                             {...rest}
-                            autoFocus
                             value={currentValue}
                             onInputChange={setValue}
+                            ref={(ref) => inputCallbackRef(ref)}
                         />
                         <Button
                             success