Fix/move preselected items to top

src/CONST/index.ts

@@ -2128,6 +2128,8 @@ const CONST = {
         GLOBAL_CREATE: '\uE100',
     },
 
+    MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD: 8,
+
     INVISIBLE_CODEPOINTS: ['fe0f', '200d', '2066'],
 
     UNICODE: {

src/components/ApproverSelectionList.tsx

@@ -1,12 +1,14 @@
 import React, {useMemo} from 'react';
 import useDebouncedState from '@hooks/useDebouncedState';
+import useInitialSelectionRef from '@hooks/useInitialSelectionRef';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
 import {getSearchValueForPhoneOrEmail, sortAlphabetically} from '@libs/OptionsListUtils';
 import {goBackFromInvalidPolicy, isPendingDeletePolicy, isPolicyAdmin} from '@libs/PolicyUtils';
+import {reorderItemsByInitialSelection} from '@libs/SelectionListOrderUtils';
 import tokenizedSearch from '@libs/tokenizedSearch';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -76,6 +78,14 @@ function ApproverSelectionList({
     const lazyIllustrations = useMemoizedLazyIllustrations(['TurtleInShell']);
 
     const selectedMembers = useMemo(() => allApprovers.filter((approver) => approver.isSelected), [allApprovers]);
+    const initialSelectedApproverKeys = useInitialSelectionRef(
+        allApprovers
+            .filter((approver) => approver.isSelected)
+            .map((approver) => approver.keyForList?.toString() ?? '')
+            .filter(Boolean),
+        {resetDeps: [allApprovers.length], resetOnFocus: true},
+    );
+    const initialFocusedApproverKey = useInitialSelectionRef(initiallyFocusedOptionKey, {resetDeps: [allApprovers.length], resetOnFocus: true});
 
     // eslint-disable-next-line rulesdir/no-negated-variables
     const shouldShowNotFoundView = (isEmptyObject(policy) && !isLoadingReportData) || !isPolicyAdmin(policy) || isPendingDeletePolicy(policy) || shouldShowNotFoundViewProp;
@@ -86,8 +96,14 @@ function ApproverSelectionList({
                 ? tokenizedSearch(allApprovers, getSearchValueForPhoneOrEmail(debouncedSearchTerm, countryCode), (option) => [option.text ?? '', option.login ?? ''])
                 : allApprovers;
 
-        return sortAlphabetically(filteredApprovers, 'text', localeCompare);
-    }, [allApprovers, debouncedSearchTerm, countryCode, localeCompare]);
+        const sortedApprovers = sortAlphabetically(filteredApprovers, 'text', localeCompare);
+
+        if (debouncedSearchTerm || initialSelectedApproverKeys.length === 0) {
+            return sortedApprovers;
+        }
+
+        return reorderItemsByInitialSelection(sortedApprovers, initialSelectedApproverKeys);
+    }, [allApprovers, countryCode, debouncedSearchTerm, initialSelectedApproverKeys, localeCompare]);
 
     const shouldShowListEmptyContent = !debouncedSearchTerm && !data.length && shouldShowListEmptyContentProp;
 
@@ -160,14 +176,15 @@ function ApproverSelectionList({
                     shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
                     listEmptyContent={listEmptyContent}
                     shouldShowListEmptyContent={shouldShowListEmptyContent}
-                    initiallyFocusedItemKey={initiallyFocusedOptionKey}
+                    initiallyFocusedItemKey={initialFocusedApproverKey}
                     shouldShowTextInput={shouldShowTextInput}
                     shouldShowLoadingPlaceholder={shouldShowLoadingPlaceholder}
                     footerContent={footerContent}
                     addBottomSafeAreaPadding
                     shouldUpdateFocusedIndex={shouldUpdateFocusedIndex}
                     showScrollIndicator
                     isRowMultilineSupported
+                    shouldScrollToTopOnSelect={false}
                 />
             </FullPageNotFoundView>
         </ScreenWrapper>

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -5,10 +5,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
+import useInitialSelectionRef from '@hooks/useInitialSelectionRef';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import searchOptions from '@libs/searchOptions';
 import type {Option} from '@libs/searchOptions';
+import {moveInitialSelectionToTopByValue} from '@libs/SelectionListOrderUtils';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -36,10 +38,13 @@ type CountrySelectorModalProps = {
 function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onClose, label, onBackdropPress}: CountrySelectorModalProps) {
     const {translate} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+    const initialSelectedValues = useInitialSelectionRef(currentCountry ? [currentCountry] : [], {resetDeps: [isVisible]});
+
+    const countryKeys = useMemo(() => Object.keys(CONST.ALL_COUNTRIES), []);
 
     const countries = useMemo(
         () =>
-            Object.keys(CONST.ALL_COUNTRIES).map((countryISO) => {
+            countryKeys.map((countryISO) => {
                 const countryName = translate(`allCountries.${countryISO}` as TranslationPaths);
                 return {
                     value: countryISO,
@@ -49,10 +54,20 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
                     searchValue: StringUtils.sanitizeString(`${countryISO}${countryName}`),
                 };
             }),
-        [translate, currentCountry],
+        [translate, countryKeys, currentCountry],
     );
 
-    const searchResults = searchOptions(debouncedSearchValue, countries);
+    const orderedCountries = useMemo(() => {
+        const shouldReorderInitialSelection = !debouncedSearchValue && initialSelectedValues.length > 0 && countries.length > CONST.MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD;
+
+        if (!shouldReorderInitialSelection) {
+            return countries;
+        }
+
+        return moveInitialSelectionToTopByValue(countries, initialSelectedValues);
+    }, [countries, debouncedSearchValue, initialSelectedValues]);
+
+    const searchResults = useMemo(() => searchOptions(debouncedSearchValue, orderedCountries), [orderedCountries, debouncedSearchValue]);
     const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
 
     const styles = useThemeStyles();

src/components/CurrencySelectionList/index.tsx

@@ -1,10 +1,12 @@
 import {Str} from 'expensify-common';
-import React, {useState} from 'react';
+import React, {useMemo, useState} from 'react';
 import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
 import {useCurrencyListActions, useCurrencyListState} from '@hooks/useCurrencyList';
+import useInitialSelectionRef from '@hooks/useInitialSelectionRef';
 import useLocalize from '@hooks/useLocalize';
 import getMatchScore from '@libs/getMatchScore';
+import {moveInitialSelectionToTopByValue} from '@libs/SelectionListOrderUtils';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {CurrencyListItem, CurrencySelectionListProps} from './types';
 
@@ -23,6 +25,17 @@ function CurrencySelectionList({
     const [searchValue, setSearchValue] = useState('');
     const {translate} = useLocalize();
     const getUnselectedOptions = (options: CurrencyListItem[]) => options.filter((option) => !option.isSelected);
+    const initialSelectedCurrencyCodes = useMemo(() => {
+        const codes = new Set<string>();
+        if (initiallySelectedCurrencyCode) {
+            codes.add(initiallySelectedCurrencyCode);
+        }
+        for (const currencyCode of selectedCurrencies) {
+            codes.add(currencyCode);
+        }
+        return Array.from(codes);
+    }, [initiallySelectedCurrencyCode, selectedCurrencies]);
+    const initialSelectedCurrencySnapshot = useInitialSelectionRef(initialSelectedCurrencyCodes, {resetDeps: [initialSelectedCurrencyCodes], resetOnFocus: true});
 
     const currencyOptions: CurrencyListItem[] = Object.entries(currencyList).reduce((acc, [currencyCode, currencyInfo]) => {
         const isSelectedCurrency = currencyCode === initiallySelectedCurrencyCode || selectedCurrencies.includes(currencyCode);
@@ -57,11 +70,19 @@ function CurrencySelectionList({
         .filter((currencyOption) => searchRegex.test(currencyOption.text ?? '') || searchRegex.test(currencyOption.currencyName))
         .sort((currency1, currency2) => getMatchScore(currency2.text ?? '', searchValue) - getMatchScore(currency1.text ?? '', searchValue));
 
-    const isEmpty = searchValue.trim() && !filteredCurrencies.length;
+    const shouldReorderInitialSelection = !searchValue && initialSelectedCurrencySnapshot.length > 0;
+    const displayCurrencies = shouldReorderInitialSelection
+        ? moveInitialSelectionToTopByValue(
+              filteredCurrencies.map((currency) => ({...currency, value: currency.currencyCode})),
+              initialSelectedCurrencySnapshot,
+          )
+        : filteredCurrencies;
+
+    const isEmpty = searchValue.trim() && !displayCurrencies.length;
     const shouldDisplayRecentlyOptions = !isEmptyObject(recentlyUsedCurrencyOptions) && !searchValue;
-    const selectedOptions = filteredCurrencies.filter((option) => option.isSelected);
+    const selectedOptions = displayCurrencies.filter((option) => option.isSelected);
     const shouldDisplaySelectedOptionOnTop = selectedOptions.length > 0;
-    const unselectedOptions = getUnselectedOptions(filteredCurrencies);
+    const unselectedOptions = getUnselectedOptions(displayCurrencies);
     const sections = [];
 
     if (shouldDisplaySelectedOptionOnTop) {
@@ -80,12 +101,12 @@ function CurrencySelectionList({
                     data: shouldDisplaySelectedOptionOnTop ? getUnselectedOptions(recentlyUsedCurrencyOptions) : recentlyUsedCurrencyOptions,
                     sectionIndex: 1,
                 },
-                {title: translate('common.all'), data: shouldDisplayRecentlyOptions ? unselectedOptions : filteredCurrencies, sectionIndex: 2},
+                {title: translate('common.all'), data: shouldDisplayRecentlyOptions ? unselectedOptions : displayCurrencies, sectionIndex: 2},
             );
         }
     } else if (!isEmpty) {
         sections.push({
-            data: shouldDisplaySelectedOptionOnTop ? unselectedOptions : filteredCurrencies,
+            data: shouldDisplaySelectedOptionOnTop ? unselectedOptions : displayCurrencies,
             sectionIndex: 3,
         });
     }

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -5,8 +5,10 @@ import Modal from '@components/Modal';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import useInitialSelectionRef from '@hooks/useInitialSelectionRef';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {reorderItemsByInitialSelection} from '@libs/SelectionListOrderUtils';
 import CONST from '@src/CONST';
 import type CalendarPickerListItem from './types';
 
@@ -31,13 +33,18 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchText, setSearchText] = useState('');
+    const initialSelectedValues = useInitialSelectionRef([currentYear.toString()], {resetDeps: [isVisible]});
+    const initiallyFocusedYear = initialSelectedValues.at(0);
     const {data, headerMessage} = useMemo(() => {
         const yearsList = searchText === '' ? years : years.filter((year) => year.text?.includes(searchText));
+        const sortedYears = [...yearsList].sort((a, b) => b.value - a.value);
+        const orderedYears =
+            searchText || sortedYears.length <= CONST.MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD ? sortedYears : reorderItemsByInitialSelection(sortedYears, initialSelectedValues);
         return {
-            headerMessage: !yearsList.length ? translate('common.noResultsFound') : '',
-            data: yearsList.sort((a, b) => b.value - a.value),
+            headerMessage: !orderedYears.length ? translate('common.noResultsFound') : '',
+            data: orderedYears,
         };
-    }, [years, searchText, translate]);
+    }, [initialSelectedValues, searchText, translate, years]);
 
     useEffect(() => {
         if (isVisible) {
@@ -84,11 +91,13 @@ function YearPickerModal({isVisible, years, currentYear = new Date().getFullYear
                     ListItem={RadioListItem}
                     onSelectRow={(option) => {
                         Keyboard.dismiss();
-                        onYearChange?.(option.value);
+                        onYearChange?.(Number(option.keyForList));
                     }}
                     textInputOptions={textInputOptions}
-                    initiallyFocusedItemKey={currentYear.toString()}
+                    initiallyFocusedItemKey={initiallyFocusedYear}
                     disableMaintainingScrollPosition
+                    shouldScrollToFocusedIndex={false}
+                    shouldScrollToFocusedIndexOnMount={false}
                     addBottomSafeAreaPadding
                     shouldStopPropagation
                     showScrollIndicator

src/components/PushRowWithModal/PushRowModal.tsx

@@ -5,8 +5,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
+import useInitialSelectionRef from '@hooks/useInitialSelectionRef';
 import useLocalize from '@hooks/useLocalize';
 import searchOptions from '@libs/searchOptions';
+import {moveInitialSelectionToTopByValue} from '@libs/SelectionListOrderUtils';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 
@@ -44,18 +46,30 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
     const {translate} = useLocalize();
 
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+    const initialSelectedValues = useInitialSelectionRef(selectedOption ? [selectedOption] : [], {resetDeps: [isVisible]});
 
-    const options = useMemo(
-        () =>
-            Object.entries(optionsList).map(([key, value]) => ({
+    const optionKeys = useMemo(() => Object.keys(optionsList), [optionsList]);
+
+    const options = useMemo(() => {
+        const baseOptions = optionKeys.map((key) => {
+            const value = optionsList[key];
+            return {
                 value: key,
                 text: value,
                 keyForList: key,
                 isSelected: key === selectedOption,
                 searchValue: StringUtils.sanitizeString(value),
-            })),
-        [optionsList, selectedOption],
-    );
+            };
+        });
+
+        const shouldReorderInitialSelection = !debouncedSearchValue && initialSelectedValues.length > 0 && baseOptions.length > CONST.MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD;
+
+        if (!shouldReorderInitialSelection) {
+            return baseOptions;
+        }
+
+        return moveInitialSelectionToTopByValue(baseOptions, initialSelectedValues);
+    }, [debouncedSearchValue, initialSelectedValues, optionKeys, optionsList, selectedOption]);
 
     const handleSelectRow = (option: ListItemType) => {
         onOptionChange(option.value);
@@ -67,7 +81,7 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
         setSearchValue('');
     };
 
-    const searchResults = searchOptions(debouncedSearchValue, options);
+    const searchResults = useMemo(() => searchOptions(debouncedSearchValue, options), [debouncedSearchValue, options]);
 
     const textInputOptions = useMemo(
         () => ({

src/components/Rule/RuleSelectionBase.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
-import SearchSingleSelectionPicker from '@components/Search/SearchSingleSelectionPicker';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {TranslationPaths} from '@src/languages/types';
 import type {Route} from '@src/ROUTES';
 import RuleNotFoundPageWrapper from './RuleNotFoundPageWrapper';
+import RuleSelectionPicker from './RuleSelectionPicker';
 
 type SelectionItem = {
     name: string;
@@ -59,12 +59,11 @@ function RuleSelectionBase({titleKey, title, testID, selectedItem, items, onSave
                     onBackButtonPress={onBack}
                 />
                 <View style={[styles.flex1]}>
-                    <SearchSingleSelectionPicker
+                    <RuleSelectionPicker
                         backToRoute={backToRoute}
-                        initiallySelectedItem={selectedItem}
                         items={items}
+                        initiallySelectedItem={selectedItem}
                         onSaveSelection={onSave}
-                        shouldAutoSave
                     />
                 </View>
             </ScreenWrapper>

src/components/Rule/RuleSelectionPicker.tsx

@@ -0,0 +1,61 @@
+import React, {useCallback} from 'react';
+import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import SelectionListWithSections from '@components/SelectionList/SelectionListWithSections';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import type {Route} from '@src/ROUTES';
+import type {RuleSelectionListItem, SelectionItem} from './hooks/useRuleSelectionList';
+import useRuleSelectionList from './hooks/useRuleSelectionList';
+
+type RuleSelectionPickerProps = {
+    items: SelectionItem[];
+    initiallySelectedItem?: SelectionItem;
+    onSaveSelection: (value?: string) => void;
+    backToRoute: Route;
+};
+
+function RuleSelectionPicker({items, initiallySelectedItem, onSaveSelection, backToRoute}: RuleSelectionPickerProps) {
+    const {translate} = useLocalize();
+    const {sections, noResultsFound, searchTerm, setSearchTerm, initiallyFocusedItemKey} = useRuleSelectionList({
+        items,
+        initiallySelectedItem,
+    });
+
+    const onSelectRow = useCallback(
+        (item: {text?: string; keyForList?: string; isSelected?: boolean}) => {
+            if (!item.text || !item.keyForList) {
+                return;
+            }
+
+            const isRemovingSelection = !!item.isSelected;
+            const newValue = isRemovingSelection ? '' : item.keyForList;
+
+            onSaveSelection(newValue);
+            Navigation.goBack(backToRoute);
+        },
+        [backToRoute, onSaveSelection],
+    );
+
+    const textInputOptions = {
+        value: searchTerm,
+        label: translate('common.search'),
+        onChangeText: setSearchTerm,
+        headerMessage: noResultsFound ? translate('common.noResultsFound') : undefined,
+    };
+
+    return (
+        <SelectionListWithSections<RuleSelectionListItem>
+            sections={sections}
+            ListItem={SingleSelectListItem}
+            onSelectRow={onSelectRow}
+            shouldShowTextInput
+            textInputOptions={textInputOptions}
+            shouldShowLoadingPlaceholder={false}
+            initiallyFocusedItemKey={initiallyFocusedItemKey}
+            shouldStopPropagation
+            shouldScrollToTopOnSelect={false}
+        />
+    );
+}
+
+export default RuleSelectionPicker;