[$125] Reports- Expense Reports tab isn't highlighted anymore after clicking on an report

[mitarachim]

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: v9.1.30-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: Macbook/macOS 14.5/ Chrome
App Component: Other

Action Performed:

1. Open https://staging.new.expensify.com/
2. Log in with expensifail account (has expense on Reports page)
3. Click on Reports tab
4. Click on Expense Reports
5. Click on an expense report

Expected Result:

The Expense Reports tab should still remains being highlighted

Actual Result:

The Expense Reports tab is not highlighted anymore

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6808103_1745208205234.Recording__589.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021914330151431515873
• Upwork Job ID: 1914330151431515873
• Last Price Increase: 2025-04-21
• Automatic offers:
• nyomanjyotisa | Contributor | 107044411

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

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

[nyomanjyotisa]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-21 14:46:20 UTC.

Proposal

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

Reports- Expense Reports tab isn't highlighted anymore after clicking on an report

What is the root cause of that problem?

We pass undefined here

App/src/pages/Search/SearchMoneyRequestReportPage.tsx

Line 139 in 8e24a4a

<SearchTypeMenu queryJSON={undefined} />

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

Get the q from the backTo param, and pass the queryJSON here

    const backTo = route.params.backTo;
    const q = new URLSearchParams(backTo.split('?')[1]).get('q');
    const queryJSON = useMemo(() => {
        return buildSearchQueryJSON(q);
    }, [q]);

<SearchTypeMenu queryJSON={queryJSON} />

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

I dont think we need automated test here, but if needed create a ui test to verify that "Expense Report" highlighed when opening expense report on search

What alternative solutions did you explore? (Optional)

Or set the fallback value of the activeItemIndex to 1, here

[nabi-ebrahimi]

Proposal

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

When a user navigates to the Expense Reports section and then clicks into a specific report, the Expense Reports tab loses its highlighted (active) state. This breaks the expected UI behavior and can confuse users about their current context in the app.

What is the root cause of that problem?

The queryJSON prop passed to the <SearchTypeMenu /> component becomes undefined after navigating into a specific expense report. This causes the menu logic to lose track of the previously selected filter/tab, resulting in the Expense Reports tab not being highlighted anymore.

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

We should extract the backTo parameter from route.params, parse the query string it contains, and build the queryJSON object accordingly. This will preserve the user's original tab context when navigating into a specific report.

const {backTo} = route.params;

const queryJSON = useMemo(() => {
    if (!backTo) {
        return undefined;
    }
    const searchParams = new URLSearchParams(backTo.split('?').at(1));
    const q = searchParams.get('q');
    return buildSearchQueryJSON(q ?? '');
}, [backTo]);

Then, pass this queryJSON to <SearchTypeMenu /> like so:

<SearchTypeMenu queryJSON={queryJSON} />

This ensures the active tab remains consistent across navigations.

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

• Test navigating to a report from the Expense Reports tab: Ensure the tab remains highlighted after viewing a specific report and then going back.
• Test absence of backTo param: Verify that the fallback behavior (no tab selected) still works correctly.
• Test query parsing from backTo: Ensure different q values result in the expected tab being active.
• Regression test for tab selection state: Verify that tab highlighting remains consistent even after navigating away and returning.

These test cases will catch regressions related to tab state handling and navigation context loss.

What alternative solutions did you explore? (Optional)

[melvin-bot]

⚠️ Could not update price automatically because there is no linked Upwork Job ID. The BZ team member will need to update the price manually in Upwork.

[melvin-bot]

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

[melvin-bot]

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

[mallenexpensify]

@dukenv0307 👀 on above plz @dukenv0307 . Made it $125, seems like a quick/easy fix (also.. fwiw... I never judge if an issue is a quick/easy fix based on proposals being submitted already, I don't review those when making my decision)