From 0a1d1ee11ced005f2edd7b88864d2b928b40f4f9 Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 1 Nov 2023 14:12:56 +0700
Subject: [PATCH 1/2] fix: merchant is not focused when back from search page

---
 src/pages/iou/MoneyRequestMerchantPage.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/iou/MoneyRequestMerchantPage.js b/src/pages/iou/MoneyRequestMerchantPage.js
index 5c01484310ff..eff65d6ae238 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -8,6 +8,7 @@ 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>

From 6643f8804e6ebfe00cda5141743a42712b8971bc Mon Sep 17 00:00:00 2001
From: tienifr <christianwen18@gmail.com>
Date: Wed, 1 Nov 2023 16:09:00 +0700
Subject: [PATCH 2/2] focus on navigating back

---
 src/hooks/useAutoFocusInput.js            | 1 +
 src/pages/iou/MoneyRequestMerchantPage.js | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/hooks/useAutoFocusInput.js b/src/hooks/useAutoFocusInput.js
index 275fed67f52d..181df9359fe8 100644
--- 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
index eff65d6ae238..f072c0f78535 100644
--- a/src/pages/iou/MoneyRequestMerchantPage.js
+++ b/src/pages/iou/MoneyRequestMerchantPage.js
@@ -1,6 +1,6 @@
 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';