Move pre-selected list items to top of list throughout the app

src/CONST/index.ts

@@ -261,6 +261,7 @@ const CONST = {
     POPOVER_DROPDOWN_MAX_HEIGHT: 416,
     POPOVER_MENU_MAX_HEIGHT: 496,
     POPOVER_MENU_MAX_HEIGHT_MOBILE: 432,
+    MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD: 8,
     POPOVER_DATE_WIDTH: 338,
     POPOVER_DATE_RANGE_WIDTH: 672,
     POPOVER_DATE_MAX_HEIGHT: 366,

src/components/CountryPicker/CountrySelectorModal.tsx

@@ -5,10 +5,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
+import useInitialSelection from '@hooks/useInitialSelection';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import searchOptions from '@libs/searchOptions';
 import type {Option} from '@libs/searchOptions';
+import moveInitialSelectionToTop from '@libs/SelectionListOrderUtils';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
@@ -36,6 +38,8 @@ type CountrySelectorModalProps = {
 function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onClose, label, onBackdropPress}: CountrySelectorModalProps) {
     const {translate} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+    const initialSelectedValue = useInitialSelection(currentCountry || undefined, {isVisible});
+    const initialSelectedValues = initialSelectedValue ? [initialSelectedValue] : [];
 
     const countries = useMemo(
         () =>
@@ -51,8 +55,8 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
             }),
         [translate, currentCountry],
     );
-
-    const searchResults = searchOptions(debouncedSearchValue, countries);
+    const orderedCountries = moveInitialSelectionToTop(countries, initialSelectedValues);
+    const searchResults = searchOptions(debouncedSearchValue, debouncedSearchValue ? countries : orderedCountries);
     const headerMessage = debouncedSearchValue.trim() && !searchResults.length ? translate('common.noResultsFound') : '';
 
     const styles = useThemeStyles();
@@ -89,9 +93,10 @@ function CountrySelectorModal({isVisible, currentCountry, onCountrySelected, onC
                 <SelectionList
                     data={searchResults}
                     textInputOptions={textInputOptions}
+                    searchValueForFocusSync={debouncedSearchValue}
                     onSelectRow={onCountrySelected}
                     ListItem={SingleSelectListItem}
-                    initiallyFocusedItemKey={currentCountry}
+                    initiallyFocusedItemKey={initialSelectedValue}
                     shouldSingleExecuteRowSelect
                     shouldStopPropagation
                 />

src/components/PushRowWithModal/PushRowModal.tsx

@@ -5,8 +5,10 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
+import useInitialSelection from '@hooks/useInitialSelection';
 import useLocalize from '@hooks/useLocalize';
 import searchOptions from '@libs/searchOptions';
+import moveInitialSelectionToTop from '@libs/SelectionListOrderUtils';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 
@@ -44,6 +46,8 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
     const {translate} = useLocalize();
 
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+    const initialSelectedValue = useInitialSelection(selectedOption || undefined, {isVisible});
+    const initialSelectedValues = initialSelectedValue ? [initialSelectedValue] : [];
 
     const options = useMemo(
         () =>
@@ -57,6 +61,8 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
         [optionsList, selectedOption],
     );
 
+    const orderedOptions = moveInitialSelectionToTop(options, initialSelectedValues);
+
     const handleSelectRow = (option: ListItemType) => {
         onOptionChange(option.value);
         onClose();
@@ -67,7 +73,7 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
         setSearchValue('');
     };
 
-    const searchResults = searchOptions(debouncedSearchValue, options);
+    const searchResults = searchOptions(debouncedSearchValue, debouncedSearchValue ? options : orderedOptions);
 
     const textInputOptions = useMemo(
         () => ({
@@ -102,7 +108,8 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
                     ListItem={SingleSelectListItem}
                     onSelectRow={handleSelectRow}
                     textInputOptions={textInputOptions}
-                    initiallyFocusedItemKey={selectedOption}
+                    searchValueForFocusSync={debouncedSearchValue}
+                    initiallyFocusedItemKey={initialSelectedValue}
                     disableMaintainingScrollPosition
                     shouldShowTooltips={false}
                     showScrollIndicator

src/components/SelectionList/BaseSelectionList.tsx

@@ -43,6 +43,7 @@ function BaseSelectionList<TItem extends ListItem>({
     ref,
     ListItem,
     textInputOptions,
+    searchValueForFocusSync,
     initiallyFocusedItemKey,
     onSelectRow,
     onSelectAll,
@@ -230,6 +231,7 @@ function BaseSelectionList<TItem extends ListItem>({
     // Including data.length ensures FlashList resets its layout cache when the list size changes
     // This prevents "index out of bounds" errors when filtering reduces the list size
     const extraData = useMemo(() => [data.length], [data.length]);
+    const syncedSearchValue = searchValueForFocusSync ?? textInputOptions?.value;
 
     const selectRow = useCallback(
         (item: TItem, indexToFocus?: number) => {
@@ -529,7 +531,7 @@ function BaseSelectionList<TItem extends ListItem>({
         initiallyFocusedItemKey,
         isItemSelected,
         focusedIndex,
-        searchValue: textInputOptions?.value,
+        searchValue: syncedSearchValue,
         setFocusedIndex,
     });
 
@@ -538,7 +540,7 @@ function BaseSelectionList<TItem extends ListItem>({
     }, []);
 
     useSearchFocusSync({
-        searchValue: textInputOptions?.value,
+        searchValue: syncedSearchValue,
         data,
         selectedOptionsCount: dataDetails.selectedOptions.length,
         isItemSelected,

src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -42,6 +42,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
     ref,
     ListItem,
     textInputOptions,
+    searchValueForFocusSync,
     initiallyFocusedItemKey,
     confirmButtonOptions,
     initialScrollIndex,
@@ -250,6 +251,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
 
     // Disable `Enter` shortcut if the active element is a button, checkbox, or switch
     const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX, CONST.ROLE.SWITCH].includes(activeElementRole as InteractiveElementRoles);
+    const syncedSearchValue = searchValueForFocusSync ?? textInputOptions?.value;
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedItem, {
         captureOnInputs: true,
@@ -288,7 +290,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
         initiallyFocusedItemKey,
         isItemSelected,
         focusedIndex,
-        searchValue: textInputOptions?.value,
+        searchValue: syncedSearchValue,
         setFocusedIndex,
     });
 
@@ -297,7 +299,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
     };
 
     useSearchFocusSync({
-        searchValue: textInputOptions?.value,
+        searchValue: syncedSearchValue,
         data: flattenedData,
         selectedOptionsCount: selectedItems.length,
         isItemSelected,

src/components/SelectionList/types.ts

@@ -58,6 +58,9 @@ type BaseSelectionListProps<TItem extends ListItem> = {
     /** Configuration options for the text input */
     textInputOptions?: TextInputOptions;
 
+    /** Search value used for focus synchronization. Defaults to textInputOptions.value */
+    searchValueForFocusSync?: string;
+
     /** Whether to show the text input */
     shouldShowTextInput?: boolean;
 

src/components/StatePicker/StateSelectorModal.tsx

@@ -6,10 +6,12 @@ import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
 import useDebouncedState from '@hooks/useDebouncedState';
+import useInitialSelection from '@hooks/useInitialSelection';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import searchOptions from '@libs/searchOptions';
 import type {Option} from '@libs/searchOptions';
+import moveInitialSelectionToTop from '@libs/SelectionListOrderUtils';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 
@@ -39,6 +41,8 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
     const {translate} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
     const styles = useThemeStyles();
+    const initialSelectedValue = useInitialSelection(currentState || undefined, {isVisible});
+    const initialSelectedValues = initialSelectedValue ? [initialSelectedValue] : [];
 
     const countryStates = useMemo(
         () =>
@@ -57,7 +61,8 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
         [translate, currentState],
     );
 
-    const searchResults = searchOptions(debouncedSearchValue, countryStates);
+    const orderedCountryStates = moveInitialSelectionToTop(countryStates, initialSelectedValues);
+    const searchResults = searchOptions(debouncedSearchValue, debouncedSearchValue ? countryStates : orderedCountryStates);
 
     const textInputOptions = useMemo(
         () => ({
@@ -93,7 +98,8 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
                     ListItem={SingleSelectListItem}
                     onSelectRow={onStateSelected}
                     textInputOptions={textInputOptions}
-                    initiallyFocusedItemKey={currentState}
+                    searchValueForFocusSync={debouncedSearchValue}
+                    initiallyFocusedItemKey={initialSelectedValue}
                     disableMaintainingScrollPosition
                     shouldSingleExecuteRowSelect
                     shouldStopPropagation

src/components/ValuePicker/ValueSelectionList.tsx

@@ -1,6 +1,8 @@
 import React, {useMemo} from 'react';
 import SelectionList from '@components/SelectionList';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
+import useInitialSelection from '@hooks/useInitialSelection';
+import moveInitialSelectionToTop from '@libs/SelectionListOrderUtils';
 import type {ValueSelectionListProps} from './types';
 
 function ValueSelectionList({
@@ -11,20 +13,26 @@ function ValueSelectionList({
     addBottomSafeAreaPadding = true,
     disableKeyboardShortcuts = false,
     alternateNumberOfSupportedLines,
+    isVisible,
 }: ValueSelectionListProps) {
-    const options = useMemo(
-        () => items.map((item) => ({value: item.value, alternateText: item.description, text: item.label ?? '', isSelected: item === selectedItem, keyForList: item.value ?? ''})),
-        [items, selectedItem],
-    );
+    const initialSelectedValue = useInitialSelection(selectedItem?.value ? selectedItem.value : undefined, isVisible === undefined ? {resetOnFocus: true} : {isVisible});
+
+    const options = useMemo(() => {
+        const mappedOptions = items.map((item) => ({value: item.value ?? '', alternateText: item.description, text: item.label ?? '', keyForList: item.value ?? ''}));
+        const orderedOptions = moveInitialSelectionToTop(mappedOptions, initialSelectedValue ? [initialSelectedValue] : []);
+
+        return orderedOptions.map((item) => ({...item, isSelected: item.value === selectedItem?.value}));
+    }, [initialSelectedValue, items, selectedItem?.value]);
 
     return (
         <SelectionList
             data={options}
             onSelectRow={(item) => onItemSelected?.(item)}
-            initiallyFocusedItemKey={selectedItem?.value}
+            initiallyFocusedItemKey={initialSelectedValue}
             shouldStopPropagation
             shouldShowTooltips={shouldShowTooltips}
-            shouldUpdateFocusedIndex
+            shouldScrollToFocusedIndex={false}
+            shouldScrollToFocusedIndexOnMount={false}
             ListItem={SingleSelectListItem}
             addBottomSafeAreaPadding={addBottomSafeAreaPadding}
             disableKeyboardShortcuts={disableKeyboardShortcuts}

src/components/ValuePicker/ValueSelectorModal.tsx

@@ -42,6 +42,7 @@ function ValueSelectorModal({
                 <ValueSelectionList
                     items={items}
                     selectedItem={selectedItem}
+                    isVisible={isVisible}
                     onItemSelected={onItemSelected}
                     shouldShowTooltips={shouldShowTooltips}
                     disableKeyboardShortcuts={disableKeyboardShortcuts}

src/components/ValuePicker/types.ts

@@ -54,7 +54,10 @@ type ValueSelectorModalProps = {
 type ValueSelectionListProps = Pick<
     ValueSelectorModalProps,
     'items' | 'selectedItem' | 'onItemSelected' | 'shouldShowTooltips' | 'addBottomSafeAreaPadding' | 'disableKeyboardShortcuts' | 'alternateNumberOfSupportedLines'
->;
+> & {
+    /** Whether the parent modal is visible */
+    isVisible?: boolean;
+};
 
 type ValuePickerProps = ForwardedFSClassProps & {
     /** Item to display */

src/hooks/useInitialSelection.ts

@@ -0,0 +1,56 @@
+import {useFocusEffect} from '@react-navigation/native';
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+type UseInitialSelectionOptions = {
+    /** Whether the current cycle is visible; refresh the snapshot when it becomes visible */
+    isVisible?: boolean;
+
+    /** Whether to refresh the snapshot whenever the screen gains focus */
+    resetOnFocus?: boolean;
+};
+
+/**
+ * Keeps an immutable snapshot of the initial selection for the current open/focus cycle.
+ * Callers can refresh the snapshot when a modal becomes visible or via screen focus.
+ */
+function useInitialSelection<T>(selection: T, options: UseInitialSelectionOptions = {}) {
+    const {isVisible, resetOnFocus = false} = options;
+    const [initialSelection, setInitialSelection] = useState(selection);
+    const latestSelectionRef = useRef(selection);
+    const previousIsVisibleRef = useRef(isVisible);
+
+    const updateInitialSelection = useCallback((nextSelection: T) => {
+        setInitialSelection((previousSelection) => (Object.is(previousSelection, nextSelection) ? previousSelection : nextSelection));
+    }, []);
+
+    useEffect(() => {
+        latestSelectionRef.current = selection;
+    }, [selection]);
+
+    useEffect(() => {
+        const wasVisible = previousIsVisibleRef.current;
+        previousIsVisibleRef.current = isVisible;
+
+        if (isVisible === undefined || !isVisible || wasVisible === isVisible) {
+            return;
+        }
+
+        // Refresh only when a new visible cycle starts.
+        // Live selection changes while the picker stays open should not repin or refocus the list.
+        updateInitialSelection(latestSelectionRef.current);
+    }, [isVisible, updateInitialSelection]);
+
+    useFocusEffect(
+        useCallback(() => {
+            if (!resetOnFocus) {
+                return;
+            }
+
+            updateInitialSelection(latestSelectionRef.current);
+        }, [resetOnFocus, updateInitialSelection]),
+    );
+
+    return initialSelection;
+}
+
+export default useInitialSelection;

src/libs/SelectionListOrderUtils.ts

@@ -0,0 +1,24 @@
+import CONST from '@src/CONST';
+
+function moveInitialSelectionToTop<T extends {value: string}>(items: T[], initialSelectedValues: string[]): T[] {
+    if (initialSelectedValues.length === 0 || items.length <= CONST.MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD) {
+        return items;
+    }
+
+    const selectedValues = new Set(initialSelectedValues);
+    const selected: T[] = [];
+    const remaining: T[] = [];
+
+    for (const item of items) {
+        if (selectedValues.has(item.value)) {
+            selected.push(item);
+            continue;
+        }
+
+        remaining.push(item);
+    }
+
+    return [...selected, ...remaining];
+}
+
+export default moveInitialSelectionToTop;