From 37d89f1cc956d8e47b288f4265139af2117d7a74 Mon Sep 17 00:00:00 2001
From: krishna2323 <belivethatkg@gmail.com>
Date: Wed, 20 Nov 2024 16:49:15 +0530
Subject: [PATCH] fix: Taxes - BNP input is not auto focused in add rate page.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>
---
 .../AmountPicker/AmountSelectorModal.tsx      | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/components/AmountPicker/AmountSelectorModal.tsx b/src/components/AmountPicker/AmountSelectorModal.tsx
index b54f6301b798..d8510aef0499 100644
--- a/src/components/AmountPicker/AmountSelectorModal.tsx
+++ b/src/components/AmountPicker/AmountSelectorModal.tsx
@@ -1,4 +1,5 @@
-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';
@@ -6,6 +7,7 @@ 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