From de6e6816e077647fc75c3a9abcffe46366e18d36 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Mon, 11 Nov 2024 10:16:43 +0800
Subject: [PATCH 01/17] Make sure the first result in most recents is
 highlighted when user uses CMD+K

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 12 +++++++++++-
 src/components/SelectionList/BaseSelectionList.tsx  |  3 ++-
 src/components/SelectionList/types.ts               |  1 +
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index e65b12deb64..15f9fc94410 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -325,6 +325,16 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
         Report.searchInServer(debouncedInputValue.trim());
     }, [debouncedInputValue]);
 
+    const setInitialFocus = useCallback(() => {
+        const initialFocusIndex = sortedRecentSearches?.slice(0, 5).length + (contextualReportData ? 1 : 0);
+        listRef.current?.setFocusedIndex(initialFocusIndex);
+        listRef.current?.scrollToIndex(0, false);
+    }, [sortedRecentSearches, contextualReportData]);
+
+    useEffect(() => {
+        setInitialFocus();
+    }, [sortedRecentSearches]);
+
     const onSearchChange = useCallback(
         (userQuery: string) => {
             let newUserQuery = userQuery;
@@ -341,7 +351,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
             if (newUserQuery) {
                 listRef.current?.updateAndScrollToFocusedIndex(0);
             } else {
-                listRef.current?.updateAndScrollToFocusedIndex(-1);
+                setInitialFocus();
             }
         },
         [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete],
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index b7bef18896d..8893360673f 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -713,12 +713,13 @@ function BaseSelectionList<TItem extends ListItem>(
         isTextInputFocusedRef.current = isTextInputFocused;
     }, []);
 
-    useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, scrollToIndex}), [
+    useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, scrollToIndex, setFocusedIndex}), [
         scrollAndHighlightItem,
         clearInputAfterSelect,
         updateAndScrollToFocusedIndex,
         updateExternalTextInputFocus,
         scrollToIndex,
+        setFocusedIndex,
     ]);
 
     /** Selects row when pressing Enter */
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 4c7fd330ec1..09a1ca1f8b1 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -618,6 +618,7 @@ type SelectionListHandle = {
     scrollAndHighlightItem?: (items: string[], timeout: number) => void;
     clearInputAfterSelect?: () => void;
     scrollToIndex: (index: number, animated?: boolean) => void;
+    setFocusedIndex: (index: number) => void;
     updateAndScrollToFocusedIndex: (newFocusedIndex: number) => void;
     updateExternalTextInputFocus: (isTextInputFocused: boolean) => void;
 };

From ac997b5a16cb15472f70e654bc10818035699a31 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Mon, 11 Nov 2024 11:46:11 +0800
Subject: [PATCH 02/17] lint fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 15f9fc94410..3aeb6a4c76d 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -326,14 +326,14 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
     }, [debouncedInputValue]);
 
     const setInitialFocus = useCallback(() => {
-        const initialFocusIndex = sortedRecentSearches?.slice(0, 5).length + (contextualReportData ? 1 : 0);
+        const initialFocusIndex = (sortedRecentSearches?.slice(0, 5).length ?? 0) + (contextualReportData ? 1 : 0);
         listRef.current?.setFocusedIndex(initialFocusIndex);
         listRef.current?.scrollToIndex(0, false);
     }, [sortedRecentSearches, contextualReportData]);
 
     useEffect(() => {
         setInitialFocus();
-    }, [sortedRecentSearches]);
+    }, [sortedRecentSearches, setInitialFocus]);
 
     const onSearchChange = useCallback(
         (userQuery: string) => {
@@ -354,7 +354,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
                 setInitialFocus();
             }
         },
-        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete],
+        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, setInitialFocus],
     );
 
     const onSearchSubmit = useCallback(

From 10077168a4ff51dea577302fccbd779c41afb0fc Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 14 Nov 2024 21:39:57 +0800
Subject: [PATCH 03/17] initial focus only for web and desktop, and don't
 scroll on initial focus

---
 .../Search/SearchRouter/SearchRouter.tsx      | 16 ++++++++---
 .../Search/SearchRouter/SearchRouterList.tsx  |  1 +
 .../SelectionList/BaseSelectionList.tsx       | 13 ++++++---
 src/components/SelectionList/types.ts         |  5 +++-
 src/hooks/useArrowKeyFocusManager.ts          | 27 +++++++++++++------
 5 files changed, 45 insertions(+), 17 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 3aeb6a4c76d..fa253050912 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -17,6 +17,7 @@ import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
+import getPlatform from '@libs/getPlatform';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import type {OptionData} from '@libs/ReportUtils';
@@ -57,6 +58,9 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
     const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<AutocompleteItemData[] | undefined>([]);
     const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
 
+    const isWeb = getPlatform() === CONST.PLATFORM.WEB;
+    const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP;
+
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const listRef = useRef<SelectionListHandle>(null);
 
@@ -327,13 +331,15 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
 
     const setInitialFocus = useCallback(() => {
         const initialFocusIndex = (sortedRecentSearches?.slice(0, 5).length ?? 0) + (contextualReportData ? 1 : 0);
-        listRef.current?.setFocusedIndex(initialFocusIndex);
-        listRef.current?.scrollToIndex(0, false);
+        listRef.current?.setFocusedIndex(initialFocusIndex, false);
     }, [sortedRecentSearches, contextualReportData]);
 
     useEffect(() => {
+        if (!isWeb && !isDesktop) {
+            return;
+        }
         setInitialFocus();
-    }, [sortedRecentSearches, setInitialFocus]);
+    }, [sortedRecentSearches, setInitialFocus, isWeb, isDesktop]);
 
     const onSearchChange = useCallback(
         (userQuery: string) => {
@@ -350,11 +356,13 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
 
             if (newUserQuery) {
                 listRef.current?.updateAndScrollToFocusedIndex(0);
+            } else if (!isWeb && !isDesktop) {
+                listRef.current?.updateAndScrollToFocusedIndex(-1);
             } else {
                 setInitialFocus();
             }
         },
-        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, setInitialFocus],
+        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, setInitialFocus, isWeb, isDesktop],
     );
 
     const onSearchSubmit = useCallback(
diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
index cc854ff926c..c28128bb213 100644
--- a/src/components/Search/SearchRouter/SearchRouterList.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -273,6 +273,7 @@ function SearchRouterList(
             sectionTitleStyles={styles.mhn2}
             shouldSingleExecuteRowSelect
             onArrowFocus={onArrowFocus}
+            shouldScrollToFocusedIndexOnFirstRender={false}
         />
     );
 }
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index 8893360673f..cb5e8eb4f86 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -114,6 +114,7 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldKeepFocusedItemAtTopOfViewableArea = false,
         shouldDebounceScrolling = false,
         shouldPreventActiveCellVirtualization = false,
+        shouldScrollToFocusedIndexOnFirstRender = true,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -316,12 +317,14 @@ function BaseSelectionList<TItem extends ListItem>(
         maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage - 1),
         disabledIndexes: disabledArrowKeyIndexes,
         isActive: isFocused,
-        onFocusedIndexChange: (index: number) => {
+        onFocusedIndexChange: (index: number, shouldScrollToIndex = true) => {
             const focusedItem = flattenedSections.allOptions.at(index);
             if (focusedItem) {
                 onArrowFocus(focusedItem);
             }
-            (shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
+            if (shouldScrollToIndex) {
+                (shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
+            }
         },
         isFocused,
     });
@@ -586,10 +589,12 @@ function BaseSelectionList<TItem extends ListItem>(
             if (!isInitialSectionListRender) {
                 return;
             }
-            scrollToIndex(focusedIndex, false);
+            if (shouldScrollToFocusedIndexOnFirstRender) {
+                scrollToIndex(focusedIndex, false);
+            }
             setIsInitialSectionListRender(false);
         },
-        [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch],
+        [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch, shouldScrollToFocusedIndexOnFirstRender],
     );
 
     const onSectionListLayout = useCallback(
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 09a1ca1f8b1..7b889228332 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -612,13 +612,16 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Whether to prevent the active cell from being virtualized and losing focus in browsers */
     shouldPreventActiveCellVirtualization?: boolean;
+
+    /** Whether to scroll to the focused index on the first render. */
+    shouldScrollToFocusedIndexOnFirstRender?: boolean;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {
     scrollAndHighlightItem?: (items: string[], timeout: number) => void;
     clearInputAfterSelect?: () => void;
     scrollToIndex: (index: number, animated?: boolean) => void;
-    setFocusedIndex: (index: number) => void;
+    setFocusedIndex: (index: number, shouldScrollToIndex?: boolean) => void;
     updateAndScrollToFocusedIndex: (newFocusedIndex: number) => void;
     updateExternalTextInputFocus: (isTextInputFocused: boolean) => void;
 };
diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
index 2de6cc25156..5691223c3c7 100644
--- a/src/hooks/useArrowKeyFocusManager.ts
+++ b/src/hooks/useArrowKeyFocusManager.ts
@@ -5,7 +5,7 @@ import usePrevious from './usePrevious';
 
 type Config = {
     maxIndex: number;
-    onFocusedIndexChange?: (index: number) => void;
+    onFocusedIndexChange?: (index: number, shouldScrollToIndex?: boolean) => void;
     initialFocusedIndex?: number;
     disabledIndexes?: readonly number[];
     shouldExcludeTextAreaNodes?: boolean;
@@ -17,7 +17,7 @@ type Config = {
     isFocused?: boolean;
 };
 
-type UseArrowKeyFocusManager = [number, (index: number) => void];
+type UseArrowKeyFocusManager = [number, (index: number, shouldScrollToIndex?: boolean) => void];
 
 /**
  * A hook that makes it easy to use the arrow keys to manage focus of items in a list
@@ -51,8 +51,15 @@ export default function useArrowKeyFocusManager({
     allowNegativeIndexes = false,
     isFocused = true,
 }: Config): UseArrowKeyFocusManager {
-    const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
+    const [focusedIndex, setFocusedIndexState] = useState(initialFocusedIndex);
+    const [shouldScrollToIndex, setShouldScrollToIndex] = useState(true);
     const prevIsFocusedIndex = usePrevious(focusedIndex);
+
+    const setFocusedIndex = useCallback((index: number, shouldScroll = true) => {
+        setFocusedIndexState(index);
+        setShouldScrollToIndex(shouldScroll);
+    }, []);
+
     const arrowConfig = useMemo(
         () => ({
             excludedNodes: shouldExcludeTextAreaNodes ? ['TEXTAREA'] : [],
@@ -73,7 +80,7 @@ export default function useArrowKeyFocusManager({
         if (prevIsFocusedIndex === focusedIndex) {
             return;
         }
-        onFocusedIndexChange(focusedIndex);
+        onFocusedIndexChange(focusedIndex, shouldScrollToIndex);
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [focusedIndex, prevIsFocusedIndex]);
 
@@ -83,7 +90,8 @@ export default function useArrowKeyFocusManager({
         }
         const nextIndex = disableCyclicTraversal ? -1 : maxIndex;
 
-        setFocusedIndex((actualIndex) => {
+        setShouldScrollToIndex(true);
+        setFocusedIndexState((actualIndex) => {
             const currentFocusedIndex = actualIndex > 0 ? actualIndex - (itemsPerRow ?? 1) : nextIndex;
             let newFocusedIndex = currentFocusedIndex;
 
@@ -116,7 +124,8 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? maxIndex : 0;
 
-        setFocusedIndex((actualIndex) => {
+        setShouldScrollToIndex(true);
+        setFocusedIndexState((actualIndex) => {
             let currentFocusedIndex = -1;
 
             if (actualIndex === -1) {
@@ -161,7 +170,8 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? -1 : maxIndex;
 
-        setFocusedIndex((actualIndex) => {
+        setShouldScrollToIndex(true);
+        setFocusedIndexState((actualIndex) => {
             const currentFocusedIndex = actualIndex > 0 ? actualIndex - 1 : nextIndex;
 
             let newFocusedIndex = currentFocusedIndex;
@@ -187,7 +197,8 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? maxIndex : 0;
 
-        setFocusedIndex((actualIndex) => {
+        setShouldScrollToIndex(true);
+        setFocusedIndexState((actualIndex) => {
             const currentFocusedIndex = actualIndex < maxIndex ? actualIndex + 1 : nextIndex;
 
             let newFocusedIndex = currentFocusedIndex;

From f03e1e0bdc778772a4ead8c34b5d79ba5a800259 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 14 Nov 2024 22:02:27 +0800
Subject: [PATCH 04/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index fa253050912..ae9a1ce135b 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -339,7 +339,9 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
             return;
         }
         setInitialFocus();
-    }, [sortedRecentSearches, setInitialFocus, isWeb, isDesktop]);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sortedRecentSearches]);
 
     const onSearchChange = useCallback(
         (userQuery: string) => {

From dd17a400e01061e45bce7d42df35a530d4bf9ff8 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 14 Nov 2024 22:08:42 +0800
Subject: [PATCH 05/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index ae9a1ce135b..255abbec966 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -341,7 +341,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
         setInitialFocus();
         // eslint-disable-next-line react-compiler/react-compiler
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sortedRecentSearches]);
+    }, [sortedRecentSearches, contextualReportData]);
 
     const onSearchChange = useCallback(
         (userQuery: string) => {

From fe78ba687b64d9e59c45456106128b41e9e01d93 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 14 Nov 2024 22:15:03 +0800
Subject: [PATCH 06/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 255abbec966..1c3c47b7cf9 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -335,13 +335,11 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
     }, [sortedRecentSearches, contextualReportData]);
 
     useEffect(() => {
-        if (!isWeb && !isDesktop) {
+        if ((!isWeb && !isDesktop) || textInputValue) {
             return;
         }
         setInitialFocus();
-        // eslint-disable-next-line react-compiler/react-compiler
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sortedRecentSearches, contextualReportData]);
+    }, [setInitialFocus, textInputValue, isWeb, isDesktop]);
 
     const onSearchChange = useCallback(
         (userQuery: string) => {

From b86b260df700c618239bd25f58c63e1147cb188a Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 21 Nov 2024 16:17:05 +0800
Subject: [PATCH 07/17] Render SearchRouterList in SearchRouter component only
 after fetching all data

---
 .../Search/SearchRouter/SearchRouter.tsx      | 68 +++++++++++--------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 1c3c47b7cf9..3f82a658208 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -38,6 +38,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type PersonalDetails from '@src/types/onyx/PersonalDetails';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import {getQueryWithSubstitutions} from './getQueryWithSubstitutions';
 import type {SubstitutionMap} from './getQueryWithSubstitutions';
 import {getUpdatedSubstitutionsMap} from './getUpdatedSubstitutionsMap';
@@ -53,7 +54,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [betas] = useOnyx(ONYXKEYS.BETAS);
-    const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
+    const [recentSearches, recentSearchesMetadata] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
     const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<AutocompleteItemData[] | undefined>([]);
     const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
@@ -358,8 +359,6 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
                 listRef.current?.updateAndScrollToFocusedIndex(0);
             } else if (!isWeb && !isDesktop) {
                 listRef.current?.updateAndScrollToFocusedIndex(-1);
-            } else {
-                setInitialFocus();
             }
         },
         [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, setInitialFocus, isWeb, isDesktop],
@@ -396,6 +395,10 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
 
     const modalWidth = shouldUseNarrowLayout ? styles.w100 : {width: variables.searchRouterPopoverWidth};
 
+    const isDataLoaded = useMemo(() => {
+        return (!contextualReportID || contextualReportData !== undefined) && !isLoadingOnyxValue(recentSearchesMetadata) && recentReports.length > 0;
+    }, [contextualReportID, contextualReportData, recentSearchesMetadata, recentReports]);
+
     return (
         <View
             style={[styles.flex1, modalWidth, styles.h100, !shouldUseNarrowLayout && styles.mh85vh]}
@@ -407,33 +410,38 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
                     onBackButtonPress={() => onRouterClose()}
                 />
             )}
-            <SearchRouterInput
-                value={textInputValue}
-                isFullWidth={shouldUseNarrowLayout}
-                updateSearch={onSearchChange}
-                onSubmit={() => {
-                    onSearchSubmit(textInputValue);
-                }}
-                routerListRef={listRef}
-                shouldShowOfflineMessage
-                wrapperStyle={[styles.border, styles.alignItemsCenter]}
-                outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]}
-                wrapperFocusedStyle={[styles.borderColorFocus]}
-                isSearchingForReports={isSearchingForReports}
-            />
-            <SearchRouterList
-                textInputValue={textInputValue}
-                updateSearchValue={onSearchChange}
-                setTextInputValue={setTextInputValue}
-                reportForContextualSearch={contextualReportData}
-                recentSearches={sortedRecentSearches?.slice(0, 5)}
-                recentReports={recentReports}
-                autocompleteSuggestions={autocompleteSuggestions}
-                onSearchSubmit={onSearchSubmit}
-                closeRouter={onRouterClose}
-                onAutocompleteSuggestionClick={onAutocompleteSuggestionClick}
-                ref={listRef}
-            />
+
+            {(isDataLoaded || !!textInputValue) && (
+                <>
+                    <SearchRouterInput
+                        value={textInputValue}
+                        isFullWidth={shouldUseNarrowLayout}
+                        updateSearch={onSearchChange}
+                        onSubmit={() => {
+                            onSearchSubmit(textInputValue);
+                        }}
+                        routerListRef={listRef}
+                        shouldShowOfflineMessage
+                        wrapperStyle={[styles.border, styles.alignItemsCenter]}
+                        outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]}
+                        wrapperFocusedStyle={[styles.borderColorFocus]}
+                        isSearchingForReports={isSearchingForReports}
+                    />
+                    <SearchRouterList
+                        textInputValue={textInputValue}
+                        updateSearchValue={onSearchChange}
+                        setTextInputValue={setTextInputValue}
+                        reportForContextualSearch={contextualReportData}
+                        recentSearches={sortedRecentSearches?.slice(0, 5)}
+                        recentReports={recentReports}
+                        autocompleteSuggestions={autocompleteSuggestions}
+                        onSearchSubmit={onSearchSubmit}
+                        closeRouter={onRouterClose}
+                        onAutocompleteSuggestionClick={onAutocompleteSuggestionClick}
+                        ref={listRef}
+                    />
+                </>
+            )}
         </View>
     );
 }

From 2312a87fd5c9267f2e67ceeb315a6a1ec10c48ca Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 21 Nov 2024 17:07:46 +0800
Subject: [PATCH 08/17] dont scroll to focused index in initial render search
 router list

---
 .../Search/SearchRouter/SearchRouterList.tsx  | 18 ++++++++++---
 .../SelectionList/BaseSelectionList.tsx       | 10 +++----
 src/components/SelectionList/types.ts         |  4 +--
 src/hooks/useArrowKeyFocusManager.ts          | 26 ++++++-------------
 4 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
index c28128bb213..9b034871ebf 100644
--- a/src/components/Search/SearchRouter/SearchRouterList.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback} from 'react';
+import React, {forwardRef, useCallback, useEffect, useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -137,6 +137,8 @@ function SearchRouterList(
     const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
     const sections: Array<SectionListDataType<OptionData | SearchQueryItem>> = [];
 
+    const [isInitialRender, setIsInitialRender] = useState(true);
+
     if (textInputValue) {
         sections.push({
             data: [
@@ -258,6 +260,13 @@ function SearchRouterList(
         [setTextInputValue, textInputValue, onAutocompleteSuggestionClick],
     );
 
+    useEffect(() => {
+        if (textInputValue) {
+            return;
+        }
+        setIsInitialRender(true);
+    }, [textInputValue]);
+
     return (
         <SelectionList<OptionData | SearchQueryItem>
             sections={sections}
@@ -267,13 +276,16 @@ function SearchRouterList(
             sectionListStyle={[shouldUseNarrowLayout ? styles.ph5 : styles.ph2, styles.pb2]}
             listItemWrapperStyle={[styles.pr3, styles.pl3]}
             getItemHeight={getItemHeight}
-            onLayout={setPerformanceTimersEnd}
+            onLayout={() => {
+                setPerformanceTimersEnd();
+                setIsInitialRender(false);
+            }}
             ref={ref}
             showScrollIndicator={!shouldUseNarrowLayout}
             sectionTitleStyles={styles.mhn2}
             shouldSingleExecuteRowSelect
             onArrowFocus={onArrowFocus}
-            shouldScrollToFocusedIndexOnFirstRender={false}
+            shouldScrollToFocusedIndex={!isInitialRender}
         />
     );
 }
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index cb5e8eb4f86..43b60505f1e 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -114,7 +114,7 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldKeepFocusedItemAtTopOfViewableArea = false,
         shouldDebounceScrolling = false,
         shouldPreventActiveCellVirtualization = false,
-        shouldScrollToFocusedIndexOnFirstRender = true,
+        shouldScrollToFocusedIndex = true,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -317,12 +317,12 @@ function BaseSelectionList<TItem extends ListItem>(
         maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage - 1),
         disabledIndexes: disabledArrowKeyIndexes,
         isActive: isFocused,
-        onFocusedIndexChange: (index: number, shouldScrollToIndex = true) => {
+        onFocusedIndexChange: (index: number) => {
             const focusedItem = flattenedSections.allOptions.at(index);
             if (focusedItem) {
                 onArrowFocus(focusedItem);
             }
-            if (shouldScrollToIndex) {
+            if (shouldScrollToFocusedIndex) {
                 (shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
             }
         },
@@ -589,12 +589,12 @@ function BaseSelectionList<TItem extends ListItem>(
             if (!isInitialSectionListRender) {
                 return;
             }
-            if (shouldScrollToFocusedIndexOnFirstRender) {
+            if (shouldScrollToFocusedIndex) {
                 scrollToIndex(focusedIndex, false);
             }
             setIsInitialSectionListRender(false);
         },
-        [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch, shouldScrollToFocusedIndexOnFirstRender],
+        [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch, shouldScrollToFocusedIndex],
     );
 
     const onSectionListLayout = useCallback(
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 7b889228332..68000474544 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -613,8 +613,8 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether to prevent the active cell from being virtualized and losing focus in browsers */
     shouldPreventActiveCellVirtualization?: boolean;
 
-    /** Whether to scroll to the focused index on the first render. */
-    shouldScrollToFocusedIndexOnFirstRender?: boolean;
+    /** Whether to scroll to the focused index */
+    shouldScrollToFocusedIndex?: boolean;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {
diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
index 5691223c3c7..40c63c509b3 100644
--- a/src/hooks/useArrowKeyFocusManager.ts
+++ b/src/hooks/useArrowKeyFocusManager.ts
@@ -5,7 +5,7 @@ import usePrevious from './usePrevious';
 
 type Config = {
     maxIndex: number;
-    onFocusedIndexChange?: (index: number, shouldScrollToIndex?: boolean) => void;
+    onFocusedIndexChange?: (index: number) => void;
     initialFocusedIndex?: number;
     disabledIndexes?: readonly number[];
     shouldExcludeTextAreaNodes?: boolean;
@@ -17,7 +17,7 @@ type Config = {
     isFocused?: boolean;
 };
 
-type UseArrowKeyFocusManager = [number, (index: number, shouldScrollToIndex?: boolean) => void];
+type UseArrowKeyFocusManager = [number, (index: number) => void];
 
 /**
  * A hook that makes it easy to use the arrow keys to manage focus of items in a list
@@ -51,15 +51,9 @@ export default function useArrowKeyFocusManager({
     allowNegativeIndexes = false,
     isFocused = true,
 }: Config): UseArrowKeyFocusManager {
-    const [focusedIndex, setFocusedIndexState] = useState(initialFocusedIndex);
-    const [shouldScrollToIndex, setShouldScrollToIndex] = useState(true);
+    const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
     const prevIsFocusedIndex = usePrevious(focusedIndex);
 
-    const setFocusedIndex = useCallback((index: number, shouldScroll = true) => {
-        setFocusedIndexState(index);
-        setShouldScrollToIndex(shouldScroll);
-    }, []);
-
     const arrowConfig = useMemo(
         () => ({
             excludedNodes: shouldExcludeTextAreaNodes ? ['TEXTAREA'] : [],
@@ -80,7 +74,7 @@ export default function useArrowKeyFocusManager({
         if (prevIsFocusedIndex === focusedIndex) {
             return;
         }
-        onFocusedIndexChange(focusedIndex, shouldScrollToIndex);
+        onFocusedIndexChange(focusedIndex);
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [focusedIndex, prevIsFocusedIndex]);
 
@@ -90,8 +84,7 @@ export default function useArrowKeyFocusManager({
         }
         const nextIndex = disableCyclicTraversal ? -1 : maxIndex;
 
-        setShouldScrollToIndex(true);
-        setFocusedIndexState((actualIndex) => {
+        setFocusedIndex((actualIndex) => {
             const currentFocusedIndex = actualIndex > 0 ? actualIndex - (itemsPerRow ?? 1) : nextIndex;
             let newFocusedIndex = currentFocusedIndex;
 
@@ -124,8 +117,7 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? maxIndex : 0;
 
-        setShouldScrollToIndex(true);
-        setFocusedIndexState((actualIndex) => {
+        setFocusedIndex((actualIndex) => {
             let currentFocusedIndex = -1;
 
             if (actualIndex === -1) {
@@ -170,8 +162,7 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? -1 : maxIndex;
 
-        setShouldScrollToIndex(true);
-        setFocusedIndexState((actualIndex) => {
+        setFocusedIndex((actualIndex) => {
             const currentFocusedIndex = actualIndex > 0 ? actualIndex - 1 : nextIndex;
 
             let newFocusedIndex = currentFocusedIndex;
@@ -197,8 +188,7 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? maxIndex : 0;
 
-        setShouldScrollToIndex(true);
-        setFocusedIndexState((actualIndex) => {
+        setFocusedIndex((actualIndex) => {
             const currentFocusedIndex = actualIndex < maxIndex ? actualIndex + 1 : nextIndex;
 
             let newFocusedIndex = currentFocusedIndex;

From fd76ed70de5e3b70e1207117dd1141b634c5d751 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 21 Nov 2024 17:11:41 +0800
Subject: [PATCH 09/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 2 +-
 src/components/SelectionList/types.ts               | 2 +-
 src/hooks/useArrowKeyFocusManager.ts                | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 3f82a658208..69bdeca1021 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -332,7 +332,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
 
     const setInitialFocus = useCallback(() => {
         const initialFocusIndex = (sortedRecentSearches?.slice(0, 5).length ?? 0) + (contextualReportData ? 1 : 0);
-        listRef.current?.setFocusedIndex(initialFocusIndex, false);
+        listRef.current?.setFocusedIndex(initialFocusIndex);
     }, [sortedRecentSearches, contextualReportData]);
 
     useEffect(() => {
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 68000474544..ac5dab87354 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -621,7 +621,7 @@ type SelectionListHandle = {
     scrollAndHighlightItem?: (items: string[], timeout: number) => void;
     clearInputAfterSelect?: () => void;
     scrollToIndex: (index: number, animated?: boolean) => void;
-    setFocusedIndex: (index: number, shouldScrollToIndex?: boolean) => void;
+    setFocusedIndex: (index: number) => void;
     updateAndScrollToFocusedIndex: (newFocusedIndex: number) => void;
     updateExternalTextInputFocus: (isTextInputFocused: boolean) => void;
 };
diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts
index 40c63c509b3..2de6cc25156 100644
--- a/src/hooks/useArrowKeyFocusManager.ts
+++ b/src/hooks/useArrowKeyFocusManager.ts
@@ -53,7 +53,6 @@ export default function useArrowKeyFocusManager({
 }: Config): UseArrowKeyFocusManager {
     const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
     const prevIsFocusedIndex = usePrevious(focusedIndex);
-
     const arrowConfig = useMemo(
         () => ({
             excludedNodes: shouldExcludeTextAreaNodes ? ['TEXTAREA'] : [],

From e502f959ca2bd99df64bf83b6d02f31ce2b26b8d Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 21 Nov 2024 17:22:56 +0800
Subject: [PATCH 10/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 69bdeca1021..e788cc8701b 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -411,7 +411,7 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
                 />
             )}
 
-            {(isDataLoaded || !!textInputValue) && (
+            {(isDataLoaded || !!debouncedInputValue) && (
                 <>
                     <SearchRouterInput
                         value={textInputValue}

From 913a0590e66fc58fe95a8a0deeb535401e1b5827 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 21 Nov 2024 17:43:30 +0800
Subject: [PATCH 11/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 5f5a0bbd2f8..24e49964377 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -368,7 +368,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
             // Store the previous newUserQuery
             prevUserQueryRef.current = newUserQuery;
         },
-        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, setInitialFocus, isWeb, isDesktop],
+        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, isWeb, isDesktop],
     );
 
     const onSearchSubmit = useCallback(

From e9bea23df90f5487cc6a030aefe09632884cd166 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Fri, 22 Nov 2024 11:50:20 +0800
Subject: [PATCH 12/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 24e49964377..8e63a60b25e 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -62,8 +62,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
     const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<AutocompleteItemData[] | undefined>([]);
     const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
 
-    const isWeb = getPlatform() === CONST.PLATFORM.WEB;
-    const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP;
+    const {isLargeScreenWidth} = useResponsiveLayout();
 
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const listRef = useRef<SelectionListHandle>(null);
@@ -340,11 +339,11 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
     }, [sortedRecentSearches, contextualReportData]);
 
     useEffect(() => {
-        if ((!isWeb && !isDesktop) || textInputValue) {
+        if (!isLargeScreenWidth || textInputValue) {
             return;
         }
         setInitialFocus();
-    }, [setInitialFocus, textInputValue, isWeb, isDesktop]);
+    }, [setInitialFocus, textInputValue, isLargeScreenWidth]);
 
     const onSearchChange = useCallback(
         (userQuery: string) => {
@@ -361,14 +360,14 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
 
             if (newUserQuery || !isEmpty(prevUserQueryRef.current)) {
                 listRef.current?.updateAndScrollToFocusedIndex(0);
-            } else if (!isWeb && !isDesktop) {
+            } else if (!isLargeScreenWidth) {
                 listRef.current?.updateAndScrollToFocusedIndex(-1);
             }
 
             // Store the previous newUserQuery
             prevUserQueryRef.current = newUserQuery;
         },
-        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, isWeb, isDesktop],
+        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, isLargeScreenWidth],
     );
 
     const onSearchSubmit = useCallback(

From a9ab8027a6a352ad1cc3391964ef2c753279e580 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Fri, 22 Nov 2024 13:14:27 +0800
Subject: [PATCH 13/17] lint fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 8e63a60b25e..17924fea898 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -19,7 +19,6 @@ import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
-import getPlatform from '@libs/getPlatform';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import type {OptionData} from '@libs/ReportUtils';

From 7861d453a233d53c69b7ec71741d3d8bbf2d1f84 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Tue, 26 Nov 2024 11:47:35 +0800
Subject: [PATCH 14/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx     | 9 ++-------
 src/components/Search/SearchRouter/SearchRouterList.tsx | 3 ++-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 17924fea898..86f8859a57d 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -337,13 +337,6 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
         listRef.current?.setFocusedIndex(initialFocusIndex);
     }, [sortedRecentSearches, contextualReportData]);
 
-    useEffect(() => {
-        if (!isLargeScreenWidth || textInputValue) {
-            return;
-        }
-        setInitialFocus();
-    }, [setInitialFocus, textInputValue, isLargeScreenWidth]);
-
     const onSearchChange = useCallback(
         (userQuery: string) => {
             let newUserQuery = userQuery;
@@ -361,6 +354,8 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
                 listRef.current?.updateAndScrollToFocusedIndex(0);
             } else if (!isLargeScreenWidth) {
                 listRef.current?.updateAndScrollToFocusedIndex(-1);
+            } else {
+                setInitialFocus();
             }
 
             // Store the previous newUserQuery
diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
index a2399b81461..db0036faeb2 100644
--- a/src/components/Search/SearchRouter/SearchRouterList.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -148,7 +148,7 @@ function SearchRouterList(
 ) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout();
 
     const personalDetails = usePersonalDetails();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
@@ -325,6 +325,7 @@ function SearchRouterList(
             sectionTitleStyles={styles.mhn2}
             shouldSingleExecuteRowSelect
             onArrowFocus={onArrowFocus}
+            initiallyFocusedOptionKey={isLargeScreenWidth ? styledRecentReports.at(0)?.keyForList : undefined}
             shouldScrollToFocusedIndex={!isInitialRender}
         />
     );

From e4e2ab1907faa0826a17fb56838d0b183148c79a Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Tue, 26 Nov 2024 12:09:35 +0800
Subject: [PATCH 15/17] lint fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index 86f8859a57d..d177c430356 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -361,7 +361,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
             // Store the previous newUserQuery
             prevUserQueryRef.current = newUserQuery;
         },
-        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, isLargeScreenWidth],
+        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, isLargeScreenWidth, setInitialFocus],
     );
 
     const onSearchSubmit = useCallback(

From ef484ce627e7a993f142c705bd45b6bd25f5406f Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Wed, 27 Nov 2024 15:59:46 +0800
Subject: [PATCH 16/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 13 ++-----------
 .../Search/SearchRouter/SearchRouterList.tsx        |  7 -------
 src/components/SelectionList/BaseSelectionList.tsx  |  3 +--
 src/components/SelectionList/types.ts               |  1 -
 4 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index d177c430356..3bed65e697f 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -61,8 +61,6 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
     const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<AutocompleteItemData[] | undefined>([]);
     const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
 
-    const {isLargeScreenWidth} = useResponsiveLayout();
-
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const listRef = useRef<SelectionListHandle>(null);
 
@@ -332,11 +330,6 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
         Report.searchInServer(debouncedInputValue.trim());
     }, [debouncedInputValue]);
 
-    const setInitialFocus = useCallback(() => {
-        const initialFocusIndex = (sortedRecentSearches?.slice(0, 5).length ?? 0) + (contextualReportData ? 1 : 0);
-        listRef.current?.setFocusedIndex(initialFocusIndex);
-    }, [sortedRecentSearches, contextualReportData]);
-
     const onSearchChange = useCallback(
         (userQuery: string) => {
             let newUserQuery = userQuery;
@@ -352,16 +345,14 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
 
             if (newUserQuery || !isEmpty(prevUserQueryRef.current)) {
                 listRef.current?.updateAndScrollToFocusedIndex(0);
-            } else if (!isLargeScreenWidth) {
-                listRef.current?.updateAndScrollToFocusedIndex(-1);
             } else {
-                setInitialFocus();
+                listRef.current?.updateAndScrollToFocusedIndex(-1);
             }
 
             // Store the previous newUserQuery
             prevUserQueryRef.current = newUserQuery;
         },
-        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, isLargeScreenWidth, setInitialFocus],
+        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete],
     );
 
     const onSearchSubmit = useCallback(
diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
index db0036faeb2..d8c52b5897d 100644
--- a/src/components/Search/SearchRouter/SearchRouterList.tsx
+++ b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -300,13 +300,6 @@ function SearchRouterList(
         [setTextInputValue, textInputValue, onAutocompleteSuggestionClick],
     );
 
-    useEffect(() => {
-        if (textInputValue) {
-            return;
-        }
-        setIsInitialRender(true);
-    }, [textInputValue]);
-
     return (
         <SelectionList<OptionData | SearchQueryItem>
             sections={sections}
diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
index 77d26c70a4a..f4c364f1a65 100644
--- a/src/components/SelectionList/BaseSelectionList.tsx
+++ b/src/components/SelectionList/BaseSelectionList.tsx
@@ -721,13 +721,12 @@ function BaseSelectionList<TItem extends ListItem>(
         isTextInputFocusedRef.current = isTextInputFocused;
     }, []);
 
-    useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, scrollToIndex, setFocusedIndex}), [
+    useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, scrollToIndex}), [
         scrollAndHighlightItem,
         clearInputAfterSelect,
         updateAndScrollToFocusedIndex,
         updateExternalTextInputFocus,
         scrollToIndex,
-        setFocusedIndex,
     ]);
 
     /** Selects row when pressing Enter */
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index ac5dab87354..06e3d9eb724 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -621,7 +621,6 @@ type SelectionListHandle = {
     scrollAndHighlightItem?: (items: string[], timeout: number) => void;
     clearInputAfterSelect?: () => void;
     scrollToIndex: (index: number, animated?: boolean) => void;
-    setFocusedIndex: (index: number) => void;
     updateAndScrollToFocusedIndex: (newFocusedIndex: number) => void;
     updateExternalTextInputFocus: (isTextInputFocused: boolean) => void;
 };

From ee1acd6d8bf796f1a057b1127bcc23fcacbd4577 Mon Sep 17 00:00:00 2001
From: I Nyoman Jyotisa <jyotisa1616@gmail.com>
Date: Thu, 28 Nov 2024 14:59:45 +0800
Subject: [PATCH 17/17] minor fix

---
 src/components/Search/SearchRouter/SearchRouter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
index c9efe0377d9..f6fd595e6a6 100644
--- a/src/components/Search/SearchRouter/SearchRouter.tsx
+++ b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -313,7 +313,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
 
     const isDataLoaded = useMemo(() => {
         return (!contextualReportID || contextualReportID !== undefined) && !isLoadingOnyxValue(recentSearchesMetadata) && recentReports.length > 0;
-    }, [contextualReportID, contextualReportID, recentSearchesMetadata, recentReports]);
+    }, [contextualReportID, recentSearchesMetadata, recentReports]);
 
     return (
         <View
