Merge pull request #42033 from Krishna2323/krishna2323/issue/41800

fix: Taxes - When creating a Tax, the keyboard does not automatically appear in the Name menu.
Expensify · May 15, 2024 · 7ef8e8c · 7ef8e8c
2 parents edd1719 + 25f7928
commit 7ef8e8c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/src/components/TextPicker/TextSelectorModal.tsx b/src/components/TextPicker/TextSelectorModal.tsx
@@ -1,11 +1,13 @@
-import React, {useState} from 'react';
+import {useFocusEffect} from '@react-navigation/native';
+import React, {useCallback, useRef, useState} from 'react';
 import {Keyboard, View} from 'react-native';
 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 TextInput from '@components/TextInput';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -19,6 +21,25 @@ function TextSelectorModal({value, description = '', onValueSelected, isVisible,
     const [currentValue, setValue] = useState(value);
     const paddingStyle = usePaddingStyle();
 
+    const inputRef = useRef<BaseTextInputRef | null>(null);
+    const focusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    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]),
+    );
+
     return (
         <Modal
             type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
@@ -50,6 +71,12 @@ function TextSelectorModal({value, description = '', onValueSelected, isVisible,
                             {...rest}
                             value={currentValue}
                             onInputChange={setValue}
+                            ref={(ref) => {
+                                if (!ref) {
+                                    return;
+                                }
+                                inputRef.current = ref;
+                            }}
                         />
                     </View>
                     <Button

diff --git a/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx b/src/pages/workspace/taxes/WorkspaceCreateTaxPage.tsx
@@ -94,7 +94,6 @@ function WorkspaceCreateTaxPage({
                                 maxLength={CONST.TAX_RATES.NAME_MAX_LENGTH}
                                 multiline={false}
                                 role={CONST.ROLE.PRESENTATION}
-                                autoFocus
                             />
                             <InputWrapper
                                 InputComponent={AmountPicker}