[Due for payment 2025-10-21] Add search input field to top of "Add unreported expense" screen

[jamesdeanexpensify]

Background

Coming from this convo is an idea that will especially help migrated members with lots of unreported expenses (and eventually, NewDot natives with lots of unreported expenses).

Problem

For members with lots of unreported expenses, this list becomes difficult to search easily:

Solution

Add a search input field to the top, that searches by merchant. It should be similar to what we already have for categories, tags, and members.

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[aadil42]

@jamesdeanexpensify, the images in OP leads to 404 pages. I also can't access the conversation. Would you mind giving more context?

[jamesdeanexpensify]

Ah, apologies! Try refreshing.

[Eskalifer1]

🚨 Edited by proposal-police: This proposal was edited at 2025-09-08 07:32:06 UTC.

Proposal

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

Add search input field to top of "Add unreported expense" screen

What is the root cause of that problem?

Improvement

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

Add state:

const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(‘’);

Pass the parameter to the createUnreportedExpenseSections function and filter by merchant (maybe by something else too):

function createUnreportedExpenseSections(transactions: Array<Transaction | undefined>, search?: string): Array<{shouldShow: boolean; data: UnreportedExpenseListItemType[]}> {
    return [
        {
            shouldShow: true,
            data: transactions
                .filter((t): t is Transaction => t !== undefined)
                .filter((transaction) => (search ? transaction.merchant.includes(search) : true))
                .map(
                    (transaction): UnreportedExpenseListItemType => ({
                        ...transaction,
                        isDisabled: isTransactionPendingDelete(transaction),
                        keyForList: transaction.transactionID,
                        errors: transaction.errors as Errors | undefined,
                    }),
                ),
        },
    ];
}

Get a length:

 const dataLength = sections.at(0)?.data.length ?? 0;

Change to this condition:

dataLength > CONST.STANDARD_LIST_ITEM_LIMIT

App/src/pages/AddUnreportedExpense.tsx

Line 192 in 374af8c

shouldShowTextInput={false}

And pass also textInputValue:

textInputValue={searchValue}

Additionally, we need to decide what to do with emptyState, since we currently display a separate element, but since we now have an input that needs to be displayed at all times, there are two options:

1. Display emptyState with listEmptyContent and shouldShowListEmptyContent props

2. Display a message saying that there are no results, as we do everywhere
   For example, as we do here:
   

   App/src/components/Search/FilterDropdowns/UserSelectPopup.tsx

   Lines 139 to 155 in 374af8c

   	const {sections, headerMessage} = useMemo(() => {
   	const newSections: Section[] = [
   	{
   	title: '',
   	data: listData,
   	shouldShow: !isEmpty(listData),
   	},
   	];
   	const noResultsFound = isEmpty(listData);
   	const message = noResultsFound ? translate('common.noResultsFound') : undefined;
   	return {
   	sections: newSections,
   	headerMessage: message,
   	};
   	}, [listData, translate]);

I think we should choose the second option, as it is consistent with the approach used throughout the project.

Also pass textInputLabel with new translation

Additionally, we need to create a new prop for SelectionList: textInputIcon, which we will pass to the input:

App/src/components/SelectionList/BaseSelectionList.tsx

Line 732 in 374af8c

<TextInput

icon={textInputIcon}

And we pass this icon as a search icon:

textInputIcon={Expensicons.MagnifyingGlass}

PS: I deliberately did not mention states such as empty or loading, because there was no information about this in the attached design, so such decisions will be discussed during the PR stage, but in general, the same approach should be followed as in other places.

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? (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.

[lorretheboy]

Proposal

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

Add search input field to top of "Add unreported expense" screen

What is the root cause of that problem?

UI Improvement

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

Add search value by using useDebouncedState

    const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');

App/src/pages/AddUnreportedExpense.tsx

Line 39 in 7517650

function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {

Update current sections and condition - This is important changes since we have to detect whether we should show empty state or not found state, since if user try to search some non-existing expenses, it should be able to show not found instead of empty state

Also, we need to handle the case where if user only have limited expenses, we shouldn't show the search bar (example users only have 3 expenses)

    // Filter transactions based on search value
    const filteredTransactions = useMemo(() => {
        if (!debouncedSearchValue.trim()) {
            return transactions;
        }

        return tokenizedSearch(transactions, debouncedSearchValue, (transaction) => [getMerchant(transaction)]);
    }, [transactions, debouncedSearchValue]);

    const sections: Array<SectionListDataType<Transaction & ListItem>> = useMemo(() => createUnreportedExpenseSections(filteredTransactions), [filteredTransactions]);

    // Determine if search input should be shown based on transaction count
    const shouldShowTextInput = useMemo(() => {
        // For now I set it to be, but it can be adjustable
        return transactions.length >= 5; // Can add to const
    }, [transactions.length]);

    // Header message for search results
    const headerMessage = useMemo(() => {
        if (debouncedSearchValue.trim() && sections.at(0)?.data.length === 0) {
            return translate('common.noResultsFound');
        }
        return '';
    }, [debouncedSearchValue, sections, translate]);

    const hasSearchTerm = debouncedSearchValue.trim().length > 0;
    // Only show empty state if there's no search term AND no unreported transactions available
    // If there's a search term, let the listEmptyContent handle the "no results" case
    const isShowingEmptyState = !hasSearchTerm && transactions.length === 0;

App/src/pages/AddUnreportedExpense.tsx

Lines 95 to 97 in 7517650

	const sections: Array<SectionListDataType<Transaction & ListItem>> = useMemo(() => createUnreportedExpenseSections(transactions), [transactions]);
	const thereIsNoUnreportedTransaction = !((sections.at(0)?.data.length ?? 0) > 0);

Then, update condition to show loading skeleton to

    if (isShowingEmptyState && isLoadingUnreportedTransactions) {

App/src/pages/AddUnreportedExpense.tsx

Line 99 in 7517650

if (thereIsNoUnreportedTransaction && isLoadingUnreportedTransactions) {

Update condition to show empty state and button to

    if (isShowingEmptyState) {

App/src/pages/AddUnreportedExpense.tsx

Line 118 in 7517650

if (thereIsNoUnreportedTransaction) {

Finally, update props to pass to SelectionList

                shouldShowTextInput={shouldShowTextInput}
                textInputValue={searchValue}
                textInputLabel={shouldShowTextInput ? translate('iou.findMerchant') : undefined} // Need to add to translation files
                textInputIcon={Expensicons.MagnifyingGlass}
                onChangeText={setSearchValue}
                headerMessage={headerMessage}

App/src/pages/AddUnreportedExpense.tsx

Line 192 in 7517650

shouldShowTextInput={false}

We need to add props to BaseSelectionList and pass the icon from parent component prop textInputIcon to here

App/src/components/SelectionList/BaseSelectionList.tsx

Line 749 in 942587f

autoCorrect={autoCorrect}

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)

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.

[PiyushChandra17]

Proposal

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

Add search input field to top of "Add unreported expense" screen

What is the root cause of that problem?

Improvement

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

• Add SearchBar input component abhove SelectionList component
  

  App/src/pages/AddUnreportedExpense.tsx

  Line 174 in 34c2f92

  />

<HeaderWithBackButton
    title={translate('iou.addUnreportedExpense')}
    onBackButtonPress={Navigation.goBack}
/>
{merchantList.length > CONST.SEARCH_ITEM_LIMIT && (
    <SearchBar
        label={translate('workspace.merchant.findMerchant')}
        inputValue={inputValue}
        onChangeText={setInputValue}
        shouldShowEmptyState={hasVisibleMerchant && !isLoading && filteredMerchantList.length === 0}
    />
)}
<SelectionList<Transaction & ListItem>

Just like we do in WorkspaceCategoriesPage search input

• We also need to add findMerchant translation just like we do in findCategory

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? (Optional)

n/A

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.

[brunovjk]

Thank you all for the proposals—each could work.
I’m leaning toward @PiyushChandra17’s approach, since the issue states that the search should work “similar to what we already have for categories, tags, and members,” and those screens use SearchBar.

That said, the built‑in SelectionList search suggested in the other proposals is also a solid option and keeps the code more compact. I’d appreciate any additional feedback or review to help finalize the direction. Thanks.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @mjasikowski, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[lorretheboy]

Some points I see that the selected proposal doesn't solve well

I see that the UI is not matched with the UI given in OP - missing icon. Also it is missing several key points

Such as how we handle search. We should have a customize one like my proposal which use tokenizedSearch

The selected proposal also doesn't mention about how we handle the empty state, not found state - This is important changes and not trivial changes, since we have to detect whether we should show empty state or not found state, since if user try to search some non-existing expenses, it should be able to show not found instead of empty state

@brunovjk Could you please re-consider my proposal? The way I reuse SelectionList built in search is also used in places in codebase (Not new pattern). And my proposal covers well cases mentioned in OP