[HOLD for payment 2025-02-04] [$250] Removing one value from Search filter clears the search

[luacmartins]

Coming from here, we're clearing the search when we remove one of the values from a filter, e.g. removing category:Advertising from category:Advertising tag:Accounting.

Reproduction steps:

Go to Reports page
Search for category:"Meals and Entertainment",Advertising
Click on search header and edit query to remove Advertising
Expected Result:

Search query is now type:expense status:all category:"Meals and Entertainment"
Actual Result:

Search query is cleared

Extra info:
Based on @jaydamani's investigation, submitSearch gets called twice for some reason and on second time the search query is blank so filter resets

Screen.Recording.2025-01-17.at.19.33.04.mp4

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021880343282436872367
• Upwork Job ID: 1880343282436872367
• Last Price Increase: 2025-01-17
• Automatic offers:
• ishakakkad | Contributor | 105774673

Issue Owner

Current Issue Owner: @kadiealexander

[melvin-bot]

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

[luacmartins]

cc @jaydamani

[melvin-bot]

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

[melvin-bot]

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

[QichenZhu]

Proposal

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

Editing search conditions clears the search.

What is the root cause of that problem?

1. The selection list calls submitSearch() because it automatically selects the first item when pressing Enter.
   

   App/src/components/Search/SearchPageHeaderInput.tsx

   Line 173 in 91b84ef

   submitSearch(item.searchQuery);

2. submitSearch() clears the text input.

App/src/components/Search/SearchPageHeaderInput.tsx

Line 148 in 91b84ef

setTextInputValue('');

3. The search input calls submitSearch() again, and the input is empty at that time.

App/src/components/Search/SearchPageHeaderInput.tsx

Lines 262 to 264 in 91b84ef

	onSubmit={() => {
	submitSearch(textInputValue);
	}}

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

1. In the search popup this issue doesn't happen because it checks if the an item has focus before submitting the search.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 295 to 301 in 91b84ef

	onSubmit={() => {
	const focusedOption = listRef.current?.getFocusedOption();
	if (!focusedOption) {
	submitSearch(textInputValue);
	return;
	}

We could copy the same logic to SearchRouterHeaderInput.

2. Don't automatically highlight the first item when the input is empty, as this indicates the user intends to clear the search.

App/src/components/Search/SearchPageHeaderInput.tsx

Lines 127 to 128 in 91b84ef

	if (updatedUserQuery || textInputValue.length > 0) {
	listRef.current?.updateAndScrollToFocusedIndex(0);

Change the above conditions as below:

if (updatedUserQuery && textInputValue.length > 0) {

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

Spy on Navigation.navigate() and expect it to be called once with the correct parameters after editing the search conditions and pressing Enter.

What alternative solutions did you explore? (Optional)

[github-actions]

⚠️ @QichenZhu Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).