[$250] Add a search input when there are more than 12 expenses to potentially merge

[JmillsExpensify]

Within the merge flow, if we show more than 12 merge candidates, we should be showing the search input, for consistency with other all other lists on ND. Right now, that isn't the case.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022019852391267538195
• Upwork Job ID: 2019852391267538195
• Last Price Increase: 2026-02-06

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @RachCHopkins (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.

[melvin-bot]

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

[daledah]

Proposal

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

Within the merge expenses flow, if there are more than 12 merge candidates, the search input is not shown. This is inconsistent with all other lists in New Dot which show a search input when items >= 12 (CONST.STANDARD_LIST_ITEM_LIMIT).

What is the root cause of that problem?

This is an improvement. The MergeTransactionsListContent component renders a SelectionList without passing the shouldShowTextInput and textInputOptions props. As a result, the search input is never shown regardless of how many eligible transactions exist in the list.

https://github.com/Expensify/App/blob/main/src/pages/TransactionMerge/MergeTransactionsListContent.tsx#L149-L159

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

Add search input support to MergeTransactionsListContent following the same pattern used in AddUnreportedExpense and other list pages:

--- a/src/pages/TransactionMerge/MergeTransactionsListContent.tsx
+++ b/src/pages/TransactionMerge/MergeTransactionsListContent.tsx

 function MergeTransactionsListContent({transactionID, mergeTransaction}: MergeTransactionsListContentProps) {
+    const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
 
     // ... existing code ...
 
+    const shouldShowTextInput = data.length >= CONST.STANDARD_LIST_ITEM_LIMIT;
+
+    const filteredData = useMemo(() => {
+        if (!debouncedSearchValue.trim() || !shouldShowTextInput) {
+            return data;
+        }
+        return tokenizedSearch(data, debouncedSearchValue, (transaction) => {
+            const searchableFields: string[] = [];
+            const merchant = getMerchant(transaction);
+            if (merchant !== CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT && merchant !== CONST.TRANSACTION.DEFAULT_MERCHANT) {
+                searchableFields.push(merchant);
+            }
+            const description = getDescription(transaction);
+            if (description.trim()) {
+                searchableFields.push(description);
+            }
+            const amount = getAmount(transaction);
+            const currency = getCurrency(transaction);
+            searchableFields.push(convertToDisplayString(amount, currency));
+            searchableFields.push((amount / 100).toString());
+            return searchableFields;
+        });
+    }, [data, debouncedSearchValue, shouldShowTextInput]);
+
+    const headerMessage = useMemo(() => {
+        if (debouncedSearchValue.trim() && filteredData.length === 0) {
+            return translate('common.noResultsFound');
+        }
+        return '';
+    }, [debouncedSearchValue, filteredData.length, translate]);
+
+    const textInputOptions = useMemo(
+        () => ({
+            value: searchValue,
+            label: shouldShowTextInput ? translate('common.search') : undefined,
+            onChangeText: setSearchValue,
+            headerMessage,
+        }),
+        [searchValue, shouldShowTextInput, translate, setSearchValue, headerMessage],
+    );
 
     return (
         <SelectionList<MergeTransactionListItemType>
-            data={data}
+            data={filteredData}
             onSelectRow={handleSelectRow}
             ListItem={MergeTransactionItem}
             customListHeader={headerContent}
             confirmButtonOptions={confirmButtonOptions}
             customLoadingPlaceholder={<MergeExpensesSkeleton fixedNumItems={3} />}
             showLoadingPlaceholder
+            textInputOptions={textInputOptions}
+            shouldShowTextInput={shouldShowTextInput}
         />
     );
 }

What alternative solutions did you explore? (Optional)

We could use the standalone SearchBar component (src/components/SearchBar.tsx) rendered above the SelectionList to handle search input and filtering separately.

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.

[abbasifaizan70]

Proposal

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

In the merge-expenses flow (“Merge expenses” screen where the user selects an eligible expense to merge with), when there are more than 12 merge candidates, no search input is shown. Other selection lists in New Expensify (e.g. Report Participants, Share Bank Account, Workspace Invite) show a search field when the list has 12 or more items for consistency and usability. Additionally, when the user does search and nothing matches, the screen shows skeleton placeholders instead of a clear “no results” message.

What is the root cause of that problem?

The merge list screen (MergeTransactionsListContent) uses SelectionList with a fixed set of props and does not pass textInputOptions or any search state. So the search input is never shown regardless of list size. The component also does not pass listEmptyContent or adjust showLoadingPlaceholder when the filtered list is empty after a search, so the list falls back to the default empty behavior and shows the loading skeleton when there are zero filtered items.

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

1. Show search input when there are 12+ merge candidates

• Use the same threshold as other lists: CONST.STANDARD_LIST_ITEM_LIMIT (12).
• When data.length >= CONST.STANDARD_LIST_ITEM_LIMIT, pass textInputOptions to SelectionList with label “Search”, controlled value, and onChangeText so the user can type a search term.
• Maintain search term state with a debounced value (e.g. useDebouncedState) so filtering does not run on every keystroke.

2. Filter the list by the search term

• When the search input is shown and the debounced search term is non-empty, filter the list so only expenses whose merchant, category, description, date, or amount match the term (case-insensitive) are shown.
• Pass the filtered list as the data prop to SelectionList so the list reflects the search.

3. Show a clear empty state when nothing matches the search

• When the user has entered a search term and the filtered list is empty, show a “no results” message (e.g. “No results found matching ‘[search term]’”) instead of skeleton placeholders.
• Use listEmptyContent for that message and set showLoadingPlaceholder to false in this case so the skeleton is not shown when the empty state is due to search having no matches.

Implementation / code changes: The above changes are implemented in PR #81744: Expensify/App. The PR updates App/src/pages/TransactionMerge/MergeTransactionsListContent.tsx with the code changes: search state and debounced search term, a searchable-text helper for each transaction, conditional textInputOptions, filtered data for the list, and conditional listEmptyContent plus showLoadingPlaceholder so the merge flow matches the behavior of other New Dot selection lists and shows a proper empty state when nothing matches the search.

PR link for code changes

Link

Demo

Screen.Recording.2026-02-07.at.12.35.58.AM.mov

[github-actions]

⚠️ @twinkle-react Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[twilight2294]

Proposal

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

When merging expenses, if there are more than 12 merge candidates in the list, users have no way to search or filter through them, making it difficult to find specific transactions to merge.

What is the root cause of that problem?

The root cause is that the MergeTransactionsListContent component renders a SelectionList without the necessary props to enable the search input functionality.

In src/pages/TransactionMerge/MergeTransactionsListContent.tsx at lines 150-158, the SelectionList is rendered without shouldShowTextInput and textInputOptions props:

https://github.com/Expensify/App/blob/main/src/pages/TransactionMerge/MergeTransactionsListContent.tsx#L150-L158

<SelectionList<MergeTransactionListItemType>
    data={data}
    onSelectRow={handleSelectRow}
    ListItem={MergeTransactionItem}
    customListHeader={headerContent}
    confirmButtonOptions={confirmButtonOptions}
    customLoadingPlaceholder={<MergeExpensesSkeleton fixedNumItems={3} />}
    showLoadingPlaceholder
/>

In src/components/SelectionList/BaseSelectionList.tsx at line 87, shouldShowTextInput defaults to !!textInputOptions?.label, which evaluates to false when textInputOptions is not provided:

https://github.com/Expensify/App/blob/main/src/components/SelectionList/BaseSelectionList.tsx#L87

This is inconsistent with the established pattern used across the codebase. Other similar lists like CategoryPicker, TagPicker, TaxPicker, DestinationPicker, and ReportParticipantsPage all conditionally show a search input when the list length exceeds CONST.STANDARD_LIST_ITEM_LIMIT (which is 12):

https://github.com/Expensify/App/blob/main/src/CONST/index.ts#L4060

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

We should update src/pages/TransactionMerge/MergeTransactionsListContent.tsx to follow the standard pattern used in other selection lists:

1. Add state management for the search input value
2. Compute shouldShowTextInput based on whether the list has 12 or more items
3. Filter the transaction data based on the search value (matching against merchant, description, and date)
4. Pass shouldShowTextInput and textInputOptions to the SelectionList

Here's the implementation:

// Add these imports at the top
import {useState} from 'react';
import useDebounce from '@hooks/useDebounce';
import {getHeaderMessageForNonUserList} from '@libs/OptionsListUtils';

// Inside the component, after the existing `data` useMemo:
const [searchValue, setSearchValue] = useState('');
const debouncedSearchValue = useDebounce(searchValue, CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE);

const shouldShowTextInput = data.length >= CONST.STANDARD_LIST_ITEM_LIMIT;

const filteredData = useMemo(() => {
    if (!debouncedSearchValue) {
        return data;
    }
    const searchLower = debouncedSearchValue.toLowerCase();
    return data.filter((transaction) => {
        const merchant = TransactionUtils.getMerchant(transaction)?.toLowerCase() ?? '';
        const description = TransactionUtils.getDescription(transaction)?.toLowerCase() ?? '';
        const created = TransactionUtils.getCreated(transaction)?.toLowerCase() ?? '';
        return merchant.includes(searchLower) || description.includes(searchLower) || created.includes(searchLower);
    });
}, [data, debouncedSearchValue]);

const textInputOptions = useMemo(() => ({
    value: searchValue,
    label: translate('common.search'),
    onChangeText: setSearchValue,
    headerMessage: getHeaderMessageForNonUserList(filteredData.length > 0, debouncedSearchValue),
}), [searchValue, setSearchValue, translate, filteredData.length, debouncedSearchValue]);

// Update the SelectionList to use filteredData and add the new props:
<SelectionList<MergeTransactionListItemType>
    data={filteredData}
    onSelectRow={handleSelectRow}
    ListItem={MergeTransactionItem}
    customListHeader={headerContent}
    confirmButtonOptions={confirmButtonOptions}
    shouldShowTextInput={shouldShowTextInput}
    textInputOptions={textInputOptions}
    customLoadingPlaceholder={<MergeExpensesSkeleton fixedNumItems={3} />}
    showLoadingPlaceholder
/>

https://github.com/Expensify/App/blob/main/src/pages/TransactionMerge/MergeTransactionsListContent.tsx#L150-L158

What alternative solutions did you explore?

An alternative would be to show the search input unconditionally regardless of list length, but this would be inconsistent with the pattern established throughout the rest of the app where search inputs only appear when there are 12+ items to avoid unnecessary UI clutter for short lists.