[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
• [x] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/c9aee22b-7d17-4d7c-aed2-5f8285b6a67e

View all open jobs on GitHub

[melvin-bot[bot]]

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

[melvin-bot[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[bot]]

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

[github-actions[bot]]

:wave: 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.

https://github.com/Expensify/App/blob/780e09e10fbd33f9806e5e1b30a22bd3703de742/src/components/Search/SearchRouter/SearchRouterList.tsx#L123

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

https://github.com/Expensify/App/blob/780e09e10fbd33f9806e5e1b30a22bd3703de742/src/components/Search/SearchRouter/SearchRouterList.tsx#L152-L156

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 https://github.com/Expensify/App/blob/780e09e10fbd33f9806e5e1b30a22bd3703de742/src/components/Search/SearchRouter/SearchRouterList.tsx#L123

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

https://github.com/Expensify/App/blob/780e09e10fbd33f9806e5e1b30a22bd3703de742/src/components/Search/SearchRouter/SearchRouterList.tsx#L152-L156

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.

https://github.com/Expensify/App/blob/780e09e10fbd33f9806e5e1b30a22bd3703de742/src/components/Search/SearchRouter/SearchRouter.tsx#L130

4. Then when we submit the search here we will use the query state instead of text input value state https://github.com/Expensify/App/blob/780e09e10fbd33f9806e5e1b30a22bd3703de742/src/components/Search/SearchRouter/SearchRouter.tsx#L180

[rayane-djouah]

This is intentional https://github.com/Expensify/App/pull/49457#discussion_r1783115049

[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 https://github.com/Expensify/App/issues/50250 and use this standalone issue to track it instead.

[melvin-bot[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[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