From de6e6816e077647fc75c3a9abcffe46366e18d36 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa 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 e65b12deb64b..15f9fc94410f 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 b7bef18896d1..8893360673fd 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -713,12 +713,13 @@ function BaseSelectionList( 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 4c7fd330ec18..09a1ca1f8b15 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 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 15f9fc94410f..3aeb6a4c76d2 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 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 3aeb6a4c76d2..fa253050912a 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([]); const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState({}); + const isWeb = getPlatform() === CONST.PLATFORM.WEB; + const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP; + const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(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 cc854ff926c3..c28128bb2133 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 8893360673fd..cb5e8eb4f86c 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -114,6 +114,7 @@ function BaseSelectionList( shouldKeepFocusedItemAtTopOfViewableArea = false, shouldDebounceScrolling = false, shouldPreventActiveCellVirtualization = false, + shouldScrollToFocusedIndexOnFirstRender = true, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -316,12 +317,14 @@ function BaseSelectionList( 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( 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 09a1ca1f8b15..7b889228332f 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -612,13 +612,16 @@ type BaseSelectionListProps = Partial & { /** 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; 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 2de6cc251560..5691223c3c7e 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 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 fa253050912a..ae9a1ce135be 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 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 ae9a1ce135be..255abbec966d 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 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 255abbec966d..1c3c47b7cf98 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 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 1c3c47b7cf98..3f82a6582085 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([]); const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState({}); @@ -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 ( onRouterClose()} /> )} - { - 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} - /> - + + {(isDataLoaded || !!textInputValue) && ( + <> + { + 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} + /> + + + )} ); } From 2312a87fd5c9267f2e67ceeb315a6a1ec10c48ca Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa 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 c28128bb2133..9b034871ebff 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> = []; + 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 ( 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 cb5e8eb4f86c..43b60505f1eb 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -114,7 +114,7 @@ function BaseSelectionList( shouldKeepFocusedItemAtTopOfViewableArea = false, shouldDebounceScrolling = false, shouldPreventActiveCellVirtualization = false, - shouldScrollToFocusedIndexOnFirstRender = true, + shouldScrollToFocusedIndex = true, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -317,12 +317,12 @@ function BaseSelectionList( 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( 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 7b889228332f..680004745440 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -613,8 +613,8 @@ type BaseSelectionListProps = Partial & { /** 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; type SelectionListHandle = { diff --git a/src/hooks/useArrowKeyFocusManager.ts b/src/hooks/useArrowKeyFocusManager.ts index 5691223c3c7e..40c63c509b30 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 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 3f82a6582085..69bdeca10215 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 680004745440..ac5dab87354c 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 40c63c509b30..2de6cc251560 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 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 69bdeca10215..e788cc8701b9 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) && ( <> 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 5f5a0bbd2f80..24e499643777 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 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 24e499643777..8e63a60b25e4 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([]); const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState({}); - const isWeb = getPlatform() === CONST.PLATFORM.WEB; - const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP; + const {isLargeScreenWidth} = useResponsiveLayout(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(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 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 8e63a60b25e4..17924fea898d 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 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 17924fea898d..86f8859a57d4 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 a2399b814615..db0036faeb2d 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 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 86f8859a57d4..d177c4303569 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 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 d177c4303569..3bed65e697f4 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([]); const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState({}); - const {isLargeScreenWidth} = useResponsiveLayout(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(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 db0036faeb2d..d8c52b5897d1 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 ( sections={sections} diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 77d26c70a4ad..f4c364f1a652 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -721,13 +721,12 @@ function BaseSelectionList( 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 ac5dab87354c..06e3d9eb724f 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 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 c9efe0377d92..f6fd595e6a6e 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 (