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

[joekaufmanexpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.98-7
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: @joekaufmanexpensify
Slack conversation: #design

Action Performed:

Note: below is just an example of one place this issue occurs. There are others, like the country list when adding a personal bank account on the Wallet. We'd like to fix this here for all relevant lists in the app at once.

1. Login to device on mobile (iOS or Android).
2. Go to Workspaces.
3. Go to Company cards.
4. Tap Add cards, which opens the country list.

Expected Result:

We should show the pre-selected country at the top of the list, similar to how we show the pre-selected category at the top in the category list selector. This ensures the pre-selected item in the list is always visible when it opens, even on mobile and when the search input is focused/keyboard opened.

Actual Result:

We show the pre-selected country where it appears in the list, and scroll the list so that item appears in the middle. Because the search field is focused when we open the list, this means the pre-selected item is often hidden behind the keyboard on mobile. This leads the user to often unnecessarily search for what is already selected, adding friction to the flow.

Workaround:

N/A

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Pre-selected item on country list with keyboard open (it's hidden)

Pre-selected item on country list with keyboard closed (it's shown)

Pre-selected item on category selector at top of list

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021960884844686682023
• Upwork Job ID: 1960884844686682023
• Last Price Increase: 2025-08-28
• Automatic offers:
• linhvovan29546 | Reviewer | 110178207

Issue Owner

Current Issue Owner: @marufsharifi

Issue Owner

Current Issue Owner: @linhvovan29546

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We show the pre-selected country where it appears in the list, and scroll the list so that item appears in the middle. Because the search field is focused when we open the list, this means the pre-selected item is often hidden behind the keyboard on mobile. This leads the user to often unnecessarily search for what is already selected, adding friction to the flow.

What is the root cause of that problem?

Improvement

What changes do you think we should make in order to solve the problem?

We have two approaches:

1. Apply fixes outside of SelectionList component

We should sort data before passing to SelectionList component. For country selector, we can update here

App/src/libs/searchOptions.ts

Line 16 in d0d75ed

function searchOptions(searchValue: string, options: Option[]): Option[] {

function sortSelectedFunction(a: Option, b: Option, additionalSort?: (a: Option, b: Option) => number) {
    if (a.isSelected && b.isSelected) {
        return 0;
    }
    if (a.isSelected) {
        return -1;
    }
    if (b.isSelected) {
        return 1;
    }
    return additionalSort ? additionalSort(a, b) : 0;
}

...

function searchOptions(searchValue: string, options: Option[], shouldSortSelected = true): Option[] {

App/src/libs/searchOptions.ts

Lines 17 to 19 in d0d75ed

	if (!searchValue) {
	return options;
	}

    if (!searchValue) {
        if (shouldSortSelected) {
            return options.sort(sortSelectedFunction);
        }
        return options;
    }

Make similar changes here:

App/src/libs/searchOptions.ts

Lines 48 to 58 in d0d75ed

	fullSorted = halfSorted.sort((a, b) => {
	const unsanitizedOptionA = a.text.toLowerCase();
	const unsanitizedOptionB = b.text.toLowerCase();
	if (unsanitizedOptionA.includes(unsanitizedSearchValue)) {
	return -1;
	}
	if (unsanitizedOptionB.includes(unsanitizedSearchValue)) {
	return 1;
	}
	return 0;
	});

App/src/libs/searchOptions.ts

Lines 62 to 70 in d0d75ed

	fullSorted = halfSorted.sort((a, b) => {
	if (a.value.toLowerCase() === trimmedSearchValue) {
	return -1;
	}
	if (b.value.toLowerCase() === trimmedSearchValue) {
	return 1;
	}
	return 0;
	});

And make the same changes for all selection lists usage throughout the App if needed.

This approach is more time-consuming, but is risk-free.

2. Apply fix inside SelectionList

Add a flag shouldSortSelected and a callback getSortedData

    const getSortedData = useCallback((data: TItem[]) => {
        if (!shouldSortSelected) {
            return data;
        }
        return data.sort((a, b) => {
            if (a.isSelected && b.isSelected) {
                return 0;
            }
            if (a.isSelected) {
                return -1;
            }
            if (b.isSelected) {
                return 1;
            }
            return 0;
        });
    }, [shouldSortSelected]);

Use in these places

App/src/components/SelectionList/BaseSelectionList.tsx

Line 237 in d0d75ed

sections.forEach((section, sectionIndex) => {

            const sortedData = getSortedData(section.data)
            sortedData?.forEach((item, optionIndex) => {

And here

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 302 to 308 in d0d75ed

	const data = !isEmpty(section.data) && remainingOptionsLimit > 0 ? section.data.slice(0, remainingOptionsLimit) : [];
	remainingOptionsLimit -= data.length;
	return {
	...section,
	data,
	};

                const sortedData = getSortedData(section.data)
                const data = !isEmpty(sortedData) && remainingOptionsLimit > 0 ? sortedData.slice(0, remainingOptionsLimit) : [];

More changes and behaviours can be figured out in the PR phase.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[SAYAN02-DEV]

Proposal

Please re-state the problem that we are trying to solve in this issue.

We should show the pre-selected item at the top of selection lists, similar to how we show the pre-selected category at the top in the category list selector. This ensures the pre-selected item is always visible when the list opens, even on mobile and when the search input is focused/keyboard is open.

What is the root cause of that problem?

Currently, we show the pre-selected item where it appears in the list and scroll the list so the item appears in the middle. Because the search field is focused when we open the list, this means the pre-selected item is often hidden behind the keyboard on mobile. This leads users to unnecessarily search for what is already selected, adding friction to the flow.

What changes do you think we should make in order to solve the problem?

I've implemented a consistent pattern across all selection components to show the selected item at the top when not searching. Here's the implementation approach:

const [selectedKey, setSelectedKey] = useState(initialSelectedKey);

const items = useMemo(() => {
    const allItems = data.map(item => ({
        ...item,
        isSelected: item.keyForList === selectedKey,
    }));

    // Move selected item to top when not searching
    if (!searchTerm && selectedKey) {
        const selectedIndex = allItems.findIndex(item => item.isSelected);
        if (selectedIndex > 0) {
            const selectedItem = allItems[selectedIndex];
            return [
                selectedItem,
                ...allItems.slice(0, selectedIndex),
                ...allItems.slice(selectedIndex + 1)
            ];
        }
    }
    return allItems;
}, [data, selectedKey, searchTerm]);

I've implemented a consistent pattern across all selection components to show the selected item at the top when not searching. Here are the files that can be updated to implement the change:

1. src/components/CountryPicker/CountrySelectorModal.tsx
2. src/components/StatePicker/StateSelectorModal.tsx
3. src/components/CategoryPicker.tsx
4. src/components/TaxPicker.tsx
5. src/components/UnitPicker.tsx
6. src/components/CurrencySelectionList/index.tsx
7. src/components/Search/SearchSingleSelectionPicker.tsx
8. src/components/DatePicker/CalendarPicker/YearPickerModal.tsx
9. src/components/PushRowWithModal/PushRowModal.tsx
10. src/components/AddPaymentCard/PaymentCardChangeCurrencyForm.tsx

Before Fix

After Fix

More UX adjustments can be talked about during the PR phase.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore?

N/A

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-29 10:31:46 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

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

What is the root cause of that problem?

We have several places that doesn't handle this case such as

App/src/components/UnitPicker.tsx

Line 24 in f9775a2

function UnitPicker({defaultValue, onOptionSelected}: UnitPickerProps) {

App/src/components/ValuePicker/ValueSelectionList.tsx

Line 6 in 5a8f82a

function ValueSelectionList({items = [], selectedItem, onItemSelected, shouldShowTooltips = true}: ValueSelectionListProps) {

App/src/pages/workspace/companyCards/WorkspaceCompanyCardStatementCloseDateSelectionList/CustomCloseDateSelectionList.tsx

Line 20 in 3c2a24d

function CustomCloseDateSelectionList({initiallySelectedDay, onConfirmSelectedDay}: CustomCloseDateSelectionListProps) {

What changes do you think we should make in order to solve the problem?

We introduce new util moveSelectedOptionsToTop in searchOptions.ts

/**
 * Moves selected items to the top of the list while maintaining original sorting for non-selected items
 * @param options - An array of option objects
 * @returns An array of options with selected items at the top
 */
function moveSelectedOptionsToTop<T extends {isSelected?: boolean}>(options: T[]): T[] {
    const selectedOptions = options.filter((option) => option.isSelected);
    const unselectedOptions = options.filter((option) => !option.isSelected);

    return [...selectedOptions, ...unselectedOptions];
}

Then we should return the moved selected options to Top instead of options here

        return moveSelectedOptionsToTop(options);

App/src/libs/searchOptions.ts

Line 18 in d66962c

return options;

For the case UnitPicker, we can add this code

    const unitOptions = useMemo(() => {
        const mappedUnits = units.map((unit) => ({
            value: unit as Unit,
            text: Str.recapitalize(translate(getUnitTranslationKey(unit))),
            keyForList: unit,
            isSelected: defaultValue === unit,
        }));

        // Move selected items to the top
        const selectedUnits = mappedUnits.filter((unit) => unit.isSelected);
        const unselectedUnits = mappedUnits.filter((unit) => !unit.isSelected);

        return [...selectedUnits, ...unselectedUnits];
    }, [defaultValue, translate]);

For the case ValueSelectionList, we add this

    const sections = useMemo(() => {
        const mappedItems = items.map((item) => ({
            value: item.value,
            alternateText: item.description,
            text: item.label ?? '',
            isSelected: item === selectedItem,
            keyForList: item.value ?? ''
        }));

        // Move selected items to the top
        const selectedItems = mappedItems.filter((item) => item.isSelected);
        const unselectedItems = mappedItems.filter((item) => !item.isSelected);

        return [{data: [...selectedItems, ...unselectedItems]}];
    }, [items, selectedItem]);

For the case CustomCloseDateSelectionList

        const sortedData = moveSelectedOptionsToTop(data);

        return {
            sections: [{data: sortedData, indexOffset: 0}],
            headerMessage: data.length === 0 ? translate('common.noResultsFound') : undefined,
        };

Also we need to remove initiallyFocusedOptionKey to set it to undefined

App/src/pages/workspace/companyCards/WorkspaceCompanyCardStatementCloseDateSelectionList/CustomCloseDateSelectionList.tsx

Lines 48 to 51 in 3c2a24d

	return {
	sections: [{data, indexOffset: 0}],
	headerMessage: data.length === 0 ? translate('common.noResultsFound') : undefined,
	};

By using this way, we can make sure that all existing and future uses of these components will follow the convention that the selected item is on top

To fix the highlighted selection issue. I propose a solution that for the user manual selection, we should not auto order to top, instead keep it remains position

To address this, we can add one more props to searchOptions function called shouldMoveSelectedToTop, then we can turn on/off like this

shouldMoveSelectedToTop ? moveSelectedOptionsToTop(fullSorted) : fullSorted;

In the parent component which is CountrySelectionPage, we should add a state to track it

    const [hasUserInteracted, setHasUserInteracted] = useState(false);

...

    const searchResults = searchOptions(searchValue, countries, !hasUserInteracted);

...

 const selectCountry = useCallback(
        (option: Option) => {
            setHasUserInteracted(true);
...

Note: We need to do like this for all places

Or if we don't want to use useState to track status, we can update like this

We use useMemo to control reordering: only reorder when showing full list (no search) and only on the very first render when searchValue is empty

    const searchResults = useMemo(() => {
        if (searchValue.trim()) {
            // When searching, use normal searchOptions without reordering
            return searchOptions(searchValue, countries, false);
        }

        // When showing full list, only reorder on first render
        // We detect "first render" by checking if this is the initial empty search
        const isInitialRender = searchValue === '';
        return searchOptions(searchValue, countries, isInitialRender);
    }, [searchValue, countries]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021960884844686682023

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @linhvovan29546 (External)