fix: stabilize reopen ordering in basic pickers

src/CONST/index.ts

@@ -252,6 +252,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_MAX_HEIGHT: 366,
     POPOVER_DATE_MIN_HEIGHT: 322,

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

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 useInitialSelection from '@hooks/useInitialSelection';
 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,6 +46,9 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
     const {translate} = useLocalize();
 
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+    const initialSelectedValue = useInitialSelection(selectedOption || undefined, {resetDeps: [isVisible]});
+    const initialSelectedValues = initialSelectedValue ? [initialSelectedValue] : [];
+    const initiallyFocusedOption = initialSelectedValue;
 
     const options = useMemo(
         () =>
@@ -57,6 +62,8 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
         [optionsList, selectedOption],
     );
 
+    const orderedOptions = moveInitialSelectionToTopByValue(options, initialSelectedValues);
+
     const handleSelectRow = (option: ListItemType) => {
         onOptionChange(option.value);
         onClose();
@@ -67,7 +74,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 +109,8 @@ function PushRowModal({isVisible, selectedOption, onOptionChange, onClose, optio
                     ListItem={RadioListItem}
                     onSelectRow={handleSelectRow}
                     textInputOptions={textInputOptions}
-                    initiallyFocusedItemKey={selectedOption}
+                    searchValueForFocusSync={debouncedSearchValue}
+                    initiallyFocusedItemKey={initiallyFocusedOption}
                     disableMaintainingScrollPosition
                     shouldShowTooltips={false}
                     showScrollIndicator

src/components/SelectionList/BaseSelectionList.tsx

@@ -42,6 +42,7 @@ function BaseSelectionList<TItem extends ListItem>({
     ref,
     ListItem,
     textInputOptions,
+    searchValueForFocusSync,
     initiallyFocusedItemKey,
     onSelectRow,
     onSelectAll,
@@ -205,6 +206,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) => {
@@ -493,12 +495,12 @@ function BaseSelectionList<TItem extends ListItem>({
         initiallyFocusedItemKey,
         isItemSelected,
         focusedIndex,
-        searchValue: textInputOptions?.value,
+        searchValue: syncedSearchValue,
         setFocusedIndex,
     });
 
     useSearchFocusSync({
-        searchValue: textInputOptions?.value,
+        searchValue: syncedSearchValue,
         data,
         selectedOptionsCount: dataDetails.selectedOptions.length,
         isItemSelected,

src/components/SelectionList/types.ts

@@ -56,6 +56,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 RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 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 {moveInitialSelectionToTopByValue} from '@libs/SelectionListOrderUtils';
 import StringUtils from '@libs/StringUtils';
 import CONST from '@src/CONST';
 
@@ -39,6 +41,9 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
     const {translate} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
     const styles = useThemeStyles();
+    const initialSelectedValue = useInitialSelection(currentState || undefined, {resetDeps: [isVisible]});
+    const initialSelectedValues = initialSelectedValue ? [initialSelectedValue] : [];
+    const initiallyFocusedState = initialSelectedValue;
 
     const countryStates = useMemo(
         () =>
@@ -57,7 +62,8 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
         [translate, currentState],
     );
 
-    const searchResults = searchOptions(debouncedSearchValue, countryStates);
+    const orderedCountryStates = moveInitialSelectionToTopByValue(countryStates, initialSelectedValues);
+    const searchResults = searchOptions(debouncedSearchValue, debouncedSearchValue ? countryStates : orderedCountryStates);
 
     const textInputOptions = useMemo(
         () => ({
@@ -93,7 +99,8 @@ function StateSelectorModal({isVisible, currentState, onStateSelected, onClose,
                     ListItem={RadioListItem}
                     onSelectRow={onStateSelected}
                     textInputOptions={textInputOptions}
-                    initiallyFocusedItemKey={currentState}
+                    searchValueForFocusSync={debouncedSearchValue}
+                    initiallyFocusedItemKey={initiallyFocusedState}
                     disableMaintainingScrollPosition
                     shouldSingleExecuteRowSelect
                     shouldStopPropagation

src/components/ValuePicker/ValueSelectionList.tsx

@@ -1,6 +1,8 @@
 import React, {useMemo} from 'react';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
+import useInitialSelection from '@hooks/useInitialSelection';
+import {moveInitialSelectionToTopByValue} from '@libs/SelectionListOrderUtils';
 import type {ValueSelectionListProps} from './types';
 
 function ValueSelectionList({
@@ -11,20 +13,28 @@ 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} : {resetDeps: [isVisible]});
+    const initialSelectedValues = initialSelectedValue ? [initialSelectedValue] : [];
+    const initiallyFocusedItemKey = initialSelectedValue;
+
+    const options = useMemo(() => {
+        const mappedOptions = items.map((item) => ({value: item.value ?? '', alternateText: item.description, text: item.label ?? '', keyForList: item.value ?? ''}));
+        const orderedOptions = moveInitialSelectionToTopByValue(mappedOptions, initialSelectedValues);
+
+        return orderedOptions.map((item) => ({...item, isSelected: item.value === selectedItem?.value}));
+    }, [initialSelectedValues, items, selectedItem?.value]);
 
     return (
         <SelectionList
             data={options}
             onSelectRow={(item) => onItemSelected?.(item)}
-            initiallyFocusedItemKey={selectedItem?.value}
+            initiallyFocusedItemKey={initiallyFocusedItemKey}
             shouldStopPropagation
             shouldShowTooltips={shouldShowTooltips}
-            shouldUpdateFocusedIndex
+            shouldScrollToFocusedIndex={false}
+            shouldScrollToFocusedIndexOnMount={false}
             ListItem={RadioListItem}
             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,67 @@
+import {useFocusEffect} from '@react-navigation/native';
+import type {DependencyList} from 'react';
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+type UseInitialSelectionOptions<T> = {
+    /** Dependencies that should trigger refreshing the snapshot (e.g., when a modal opens) */
+    resetDeps?: DependencyList;
+
+    /** Whether to refresh the snapshot whenever the screen gains focus */
+    resetOnFocus?: boolean;
+
+    /** Whether the snapshot should continue following incoming selection changes */
+    shouldSyncSelection?: boolean;
+
+    /** Equality check used to avoid replacing the snapshot with equivalent values */
+    isEqual?: (previousSelection: T, nextSelection: T) => boolean;
+};
+
+/**
+ * Keeps an immutable snapshot of the initial selection for the current open/focus cycle.
+ * Callers can refresh the snapshot by changing `resetDeps` or via screen focus.
+ */
+function useInitialSelection<T>(selection: T, options: UseInitialSelectionOptions<T> = {}) {
+    const {resetDeps = [], resetOnFocus = false, shouldSyncSelection = false, isEqual = Object.is} = options;
+    const [initialSelection, setInitialSelection] = useState(selection);
+    const latestSelectionRef = useRef(selection);
+
+    const updateInitialSelection = useCallback(
+        (nextSelection: T) => {
+            setInitialSelection((previousSelection) => (isEqual(previousSelection, nextSelection) ? previousSelection : nextSelection));
+        },
+        [isEqual],
+    );
+
+    useEffect(() => {
+        latestSelectionRef.current = selection;
+    }, [selection]);
+
+    useEffect(() => {
+        // Intentionally refresh the snapshot only when the caller marks a new open/focus cycle.
+        // Live selection changes while the picker stays open should not repin or refocus the list.
+        updateInitialSelection(selection);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, resetDeps);
+
+    useFocusEffect(
+        useCallback(() => {
+            if (!resetOnFocus) {
+                return;
+            }
+
+            updateInitialSelection(latestSelectionRef.current);
+        }, [resetOnFocus, updateInitialSelection]),
+    );
+
+    useEffect(() => {
+        if (!shouldSyncSelection) {
+            return;
+        }
+
+        updateInitialSelection(selection);
+    }, [selection, shouldSyncSelection, updateInitialSelection]);
+
+    return initialSelection;
+}
+
+export default useInitialSelection;

src/libs/SelectionListOrderUtils.ts

@@ -0,0 +1,45 @@
+import CONST from '@src/CONST';
+
+function moveInitialSelectionToTopByKey(keys: string[], initialSelectedKeys: string[]): string[] {
+    if (initialSelectedKeys.length === 0 || keys.length <= CONST.MOVE_SELECTED_ITEMS_TO_TOP_OF_LIST_THRESHOLD) {
+        return keys;
+    }
+
+    const selectedKeys = new Set(initialSelectedKeys);
+    const selected: string[] = [];
+    const remaining: string[] = [];
+
+    for (const key of keys) {
+        if (selectedKeys.has(key)) {
+            selected.push(key);
+            continue;
+        }
+
+        remaining.push(key);
+    }
+
+    return [...selected, ...remaining];
+}
+
+function moveInitialSelectionToTopByValue<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 {moveInitialSelectionToTopByKey, moveInitialSelectionToTopByValue};