Merge pull request #30675 from tienifr/fix/29009

Fix: Merchant is not focused when back from search page
Expensify · Nov 6, 2023 · ee0fb61 · ee0fb61
2 parents 3b13827 + 91f9a52
commit ee0fb61
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/hooks/useAutoFocusInput.js b/src/hooks/useAutoFocusInput.js
@@ -14,6 +14,7 @@ export default function useAutoFocusInput() {
             return;
         }
         inputRef.current.focus();
+        setIsScreenTransitionEnded(false);
     }, [isScreenTransitionEnded, isInputInitialized]);
 
     useFocusEffect(

diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -1,13 +1,14 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useCallback, useEffect} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import Form from '@components/Form';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import styles from '@styles/styles';
@@ -47,7 +48,7 @@ const defaultProps = {
 
 function MoneyRequestMerchantPage({iou, route}) {
     const {translate} = useLocalize();
-    const inputRef = useRef(null);
+    const {inputCallbackRef} = useAutoFocusInput();
     const iouType = lodashGet(route, 'params.iouType', '');
     const reportID = lodashGet(route, 'params.reportID', '');
 
@@ -92,7 +93,6 @@ function MoneyRequestMerchantPage({iou, route}) {
         <ScreenWrapper
             includeSafeAreaPaddingBottom={false}
             shouldEnableMaxHeight
-            onEntryTransitionEnd={() => inputRef.current && inputRef.current.focus()}
             testID={MoneyRequestMerchantPage.displayName}
         >
             <HeaderWithBackButton
@@ -116,7 +116,7 @@ function MoneyRequestMerchantPage({iou, route}) {
                         label={translate('common.merchant')}
                         accessibilityLabel={translate('common.merchant')}
                         accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                        ref={(el) => (inputRef.current = el)}
+                        ref={inputCallbackRef}
                     />
                 </View>
             </Form>