[HOLD Search autocomplete][Search v2.5] - Input shows report ID instead of report name when selecting "Search in"

[IuliiaHerets]

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.0.50-0
Reproducible in staging?: Y
Reproducible in production?: N/A - new feature, doesn't exist in prod
Email or phone of affected tester (no customers): applausetester+kh1310018@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Open any report.
3. Click on the search icon on the top right.
4. Click Search in.

Expected Result:

The input will show the report name instead of report ID.

Actual Result:

The input shows report ID instead of report name.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6637205_1729134482606.iD.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @MariaHCD (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[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.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MariaHCD]

Looks like this can be a follow up improvement as part of the Search project. This doesn't need to block the deploy.

cc: @luacmartins

[nkdengineer]

Proposal

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

The input shows report ID instead of report name.

What is the root cause of that problem?

The input displays the current query which has the report ID.

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

Line 123 in 780e09e

query: SearchUtils.getContextualSuggestionQuery(reportForContextualSearch.reportID),

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

If we choose the contextual search item, I think we also should call onSearchSubmit instead of changing the text input. To do that we can remove this code

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

Lines 152 to 156 in 780e09e

	if (item.isContextualSearchItem) {
	// Handle selection of "Contextual search suggestion"
	updateUserSearchQuery(`${item?.query} ${currentQuery?.inputQuery ?? ''}`);
	return;
	}

What alternative solutions did you explore? (Optional)

If we want to display the text input after selecting this option, we should separate the text input value and the query.

1. Here we should add another field that is the input query name that will have the format type:chat in:reportName
   

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

   Line 123 in 780e09e

   query: SearchUtils.getContextualSuggestionQuery(reportForContextualSearch.reportID),

2. Then here if we select this option we will pass both query and query name here

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

Lines 152 to 156 in 780e09e

	if (item.isContextualSearchItem) {
	// Handle selection of "Contextual search suggestion"
	updateUserSearchQuery(`${item?.query} ${currentQuery?.inputQuery ?? ''}`);
	return;
	}

3. In SearchRouter, we will create another state is the query and update text input is the query name and query state is the query. If the user type in the input the query and text input will be the same.

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

Line 130 in 780e09e

setTextInputValue(newSearchQuery);

4. Then when we submit the search here we will use the query state instead of text input value state
   

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

   Line 180 in 780e09e

   onSearchSubmit(SearchUtils.buildSearchQueryJSON(textInputValue));

[rayane-djouah]

This is intentional #49457 (comment)

[SzymczakJ]

It's not that easy to implement this, this feature would require us to have some sort of autocomplete which is the main thing we will be working on in Search 2.5. I suggest taking off the bug label and adding it to Search 2.5 issue list. WDYT @luacmartins @lakchote

[luacmartins]

Agree that this is intentional and is being tracked here. That being said, I'll remove it from the list in #50250 and use this standalone issue to track it instead.

[melvin-bot]

Current assignee @kadiealexander is eligible for the NewFeature assigner, not assigning anyone new.

[Kicu]

@luacmartins please assign me instead of Jakub to this Issue, we shuffled around.

We will start the "autocomplete" part of v2.5 with this task, because the in (and/or reportID) autocomplete is the only one that is much more complex than the rest.

The main reason is that for for: and to: filters we are able to find:

• user's email by accountID
• accountID by user's email

So we can easily switch from the version of StringQuery with id, and the "human readable" version of query with emails.

This is impossible with reports and chats, because they can have the same name in different policies, and also change names when they are edited.
We will have to keep the version of query with id (to be able to send it to api) while displaying to the user modified query with the nice, human readable values.

[luacmartins]

Done!

[melvin-bot]

@Kicu, @luacmartins, @kadiealexander, @rayane-djouah Whoops! This issue is 2 days overdue. Let's get this updated quick!

[luacmartins]

This is on hold for autocomplete

[rayane-djouah]

Work in progress: #51633

[Kicu]

PR is ready for review @rayane-djouah @luacmartins