[Due for Payment 2026-02-25] [$250] Search - Not able to select multiple users with comma, when use Reports tab search page

[lanitochka17]

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: 9.3.2-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2966/folder/13176922/41237512/1125946875
Email or phone of affected tester (no customers): forexmater+23782@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows 10/Chrome
App Component: Search

Action Performed:

Preconditions: User is logged in, Sent several expenses to different users;

1. Go to https://staging.new.expensify.com/
2. Click "Reports" tab
3. Enter "to:" in the search field
4. Select first user
5. Enter comma
6. Select second user
7. Click "Inbox" tab
8. Click on the search icon
9. Repeat steps 3-6

Expected Result:

User can select multiple users with comma on search page in Report tab.

Actual Result:

When the user add comma in the search field after the first selected user, clicking on second user replace the first one.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7050096_1768487377375.2026-01-15_16-27-41.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022013305463459502079
• Upwork Job ID: 2013305463459502079
• Last Price Increase: 2026-01-19
• Automatic offers:
• aimane-chnaif | Reviewer | 110175421
• MobileMage | Contributor | 110175423

Issue Owner

Current Issue Owner: @MobileMage

[melvin-bot]

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

[annaweber830]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-19 18:56:49 UTC.

Proposal

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

When users add a comma after selecting a user in the Reports search (e.g., to:alice,) and then select another user from autocomplete, the second selection replaces the first instead of appending, preventing multi-user selection.

What is the root cause of that problem?

The Reports search input (SearchPageHeaderInput.tsx) builds the next query on autocomplete selection by trimming the input back to just fieldKey: (e.g. to:). That logic drops any existing comma-separated values like to:alice,, so selecting the second user overwrites the first. The Inbox search path already contains comma-aware continuation handling for these “name fields”, but the Reports path does not.

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

Update the autocomplete-selection trimming logic in the Reports search input to be comma-aware for “name fields” (e.g. to, from, assignee, etc.):

• Detect when the current filter key is a “name field” (using the existing CONTINUATION_DETECTION_SEARCH_FILTER_KEYS list).
• When selecting an autocomplete suggestion for such a field:
  • Find the last occurrence of fieldKey: in the current input.
  • If the text after that key already contains comma-separated values, preserve everything up to the last comma so the new selection appends rather than replaces.
  • Otherwise, preserve up to fieldKey: as today.
• Keep the existing fallback behavior (getQueryWithoutAutocompletedPart) when the key isn’t found.
  This aligns the Reports search behavior with the existing Inbox search behavior and prevents commas in other filters from affecting the to: continuation.
  

  App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

  Lines 253 to 259 in 8f123f4

  	const keyIndex = fieldKey ? textInputValue.toLowerCase().lastIndexOf(`${fieldKey}:`) : -1;
  	const trimmedUserSearchQuery =
  	keyIndex !== -1 && fieldKey ? textInputValue.substring(0, keyIndex + fieldKey.length + 1) : getQueryWithoutAutocompletedPart(textInputValue);
  	const newSearchQuery = `${trimmedUserSearchQuery}${sanitizeSearchValue(item.searchQuery)}\u00A0`;
  	onSearchQueryChange(newSearchQuery);

let trimmedUserSearchQuery = getQueryWithoutAutocompletedPart(textInputValue);
                        if (keyIndex !== -1 && fieldKey) {
                            const fieldPatternLength = fieldKey.length + 1; // + ':' character
                            const afterFieldKey = textInputValue.substring(keyIndex + fieldPatternLength);
                            const lastCommaIndex = afterFieldKey.lastIndexOf(',');

                            trimmedUserSearchQuery =
                                lastCommaIndex !== -1
                                    ? textInputValue.substring(0, keyIndex + fieldPatternLength + lastCommaIndex + 1)
                                    : textInputValue.substring(0, keyIndex + fieldPatternLength);
                        }
                        const newSearchQuery = `${trimmedUserSearchQuery}${sanitizeSearchValue(item.searchQuery)}\u00A0`;

What alternative solutions did you explore? (Optional)

• Always using the “query without autocompleted part” instead of trimming to field
• Changing the parser to treat comma-separated values as distinct ranges .

[MobileMage]

Proposal

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

In the Reports tab search, when users type to: and select a first user, then enter a comma and select a second user, the second selection replaces the first one instead of adding to it. This prevents users from searching for reports involving multiple people. The same functionality works correctly in the Inbox tab search.

What is the root cause of that problem?

The Reports tab uses SearchPageHeaderInput.tsx for its search input, while the Inbox tab uses SearchRouter.tsx.

Back in commit ed0bb986a07 ("enabling to select multiple users with comma"), the comma handling logic was added to SearchRouter.tsx and SearchAutocompleteList.tsx, but SearchPageHeaderInput.tsx was missed.

In SearchRouter.tsx (lines 387-412), there's proper handling for "name fields" (to, from, assignee, payer, exporter, attendee) that preserves already-selected values when adding more:

const isNameField = fieldKey && CONTINUATION_DETECTION_SEARCH_FILTER_KEYS.includes(fieldKey as SearchFilterKey);

if (isNameField && fieldKey) {
    const fieldPattern = `${fieldKey}:`;
    const keyIndex = textInputValue.toLowerCase().lastIndexOf(fieldPattern.toLowerCase());

    if (keyIndex !== -1) {
        const afterFieldKey = textInputValue.substring(keyIndex + fieldPattern.length);
        const lastCommaIndex = afterFieldKey.lastIndexOf(',');

        if (lastCommaIndex !== -1) {
            // Preserves "to:user1," when selecting user2
            trimmedUserSearchQuery = textInputValue.substring(0, keyIndex + fieldPattern.length + lastCommaIndex + 1);
        } else {
            trimmedUserSearchQuery = textInputValue.substring(0, keyIndex + fieldPattern.length);
        }
    }
}

But in SearchPageHeaderInput.tsx (lines 251-256), this logic is completely missing:

const fieldKey = item.mapKey?.includes(':') ? item.mapKey.split(':').at(0) : item.mapKey;
const keyIndex = fieldKey ? textInputValue.toLowerCase().lastIndexOf(`${fieldKey}:`) : -1;

const trimmedUserSearchQuery =
    keyIndex !== -1 && fieldKey ? textInputValue.substring(0, keyIndex + fieldKey.length + 1) : getQueryWithoutAutocompletedPart(textInputValue);

This always truncates to just fieldKey:, losing any existing comma-separated values like to:user1,.

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

Add the same CONTINUATION_DETECTION_SEARCH_FILTER_KEYS handling to SearchPageHeaderInput.tsx that exists in SearchRouter.tsx.

In src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx:

1. Import CONTINUATION_DETECTION_SEARCH_FILTER_KEYS:

-import CONST from '@src/CONST';
+import CONST, {CONTINUATION_DETECTION_SEARCH_FILTER_KEYS} from '@src/CONST';

2. Add the SearchFilterKey type import:

-import type {SearchQueryJSON, SearchQueryString} from '@components/Search/types';
+import type {SearchFilterKey, SearchQueryJSON, SearchQueryString} from '@components/Search/types';

3. Replace the simplified trimming logic (lines 251-256) with the full comma-aware version:

                    if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.AUTOCOMPLETE_SUGGESTION && textInputValue) {
                        const fieldKey = item.mapKey?.includes(':') ? item.mapKey.split(':').at(0) : item.mapKey;
-                        const keyIndex = fieldKey ? textInputValue.toLowerCase().lastIndexOf(`${fieldKey}:`) : -1;
+                        const isNameField = fieldKey && CONTINUATION_DETECTION_SEARCH_FILTER_KEYS.includes(fieldKey as SearchFilterKey);

-                        const trimmedUserSearchQuery =
-                            keyIndex !== -1 && fieldKey ? textInputValue.substring(0, keyIndex + fieldKey.length + 1) : getQueryWithoutAutocompletedPart(textInputValue);
+                        let trimmedUserSearchQuery;
+                        if (isNameField && fieldKey) {
+                            const fieldPattern = `${fieldKey}:`;
+                            const keyIndex = textInputValue.toLowerCase().lastIndexOf(fieldPattern.toLowerCase());
+
+                            if (keyIndex !== -1) {
+                                const afterFieldKey = textInputValue.substring(keyIndex + fieldPattern.length);
+                                const lastCommaIndex = afterFieldKey.lastIndexOf(',');
+
+                                if (lastCommaIndex !== -1) {
+                                    trimmedUserSearchQuery = textInputValue.substring(0, keyIndex + fieldPattern.length + lastCommaIndex + 1);
+                                } else {
+                                    trimmedUserSearchQuery = textInputValue.substring(0, keyIndex + fieldPattern.length);
+                                }
+                            } else {
+                                trimmedUserSearchQuery = getQueryWithoutAutocompletedPart(textInputValue);
+                            }
+                        } else {
+                            const keyIndex = fieldKey ? textInputValue.toLowerCase().lastIndexOf(`${fieldKey}:`) : -1;
+                            trimmedUserSearchQuery =
+                                keyIndex !== -1 && fieldKey ? textInputValue.substring(0, keyIndex + fieldKey.length + 1) : getQueryWithoutAutocompletedPart(textInputValue);
+                        }
                        const newSearchQuery = `${trimmedUserSearchQuery}${sanitizeSearchValue(item.searchQuery)}\u00A0`;

This mirrors the exact implementation in SearchRouter.tsx lines 387-412.

What alternative solutions did you explore? (Optional)

I considered extracting the comma-handling logic into a shared utility function to avoid duplication. However, looking at the codebase pattern, SearchRouter.tsx and SearchAutocompleteList.tsx both have their own copies of this logic already, suggesting the preferred approach is to keep the logic inline in each component. Adding a utility would require touching multiple files and changing an established pattern.

[melvin-bot]

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

[melvin-bot]

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

[CortneyOfstad]

Hey @aimane-chnaif! We have a few proposals above for review. Thanks!