Rules - Suggested tab opens after clicking Edit and RHP back button

[applause-bot]

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.4.41-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #95875
Email or phone of affected tester (no customers): sdsjodijnsdojsosjio@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Enable Rules.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Rules.
3. Click Add agent rule.
4. Click Edit tab.
5. Click RHP back button.

Expected Result:

RHP will close.

Actual Result:

Suggested tab opens after clicking Edit and RHP back button.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7213083_1784598071594.3.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7213083

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/88fde930e80c0ef712575b30050a16e5273a49abb35da4aadf2044ac259ad51c

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #95875

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

[MelvinBot]

Proposal

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

On the "Add agent rule" flow, after switching to the Edit tab and pressing the RHP header back button, the RHP does not close — instead it jumps back to the Suggested tab. Expected: the RHP closes.

What is the root cause of that problem?

The header back button handler in AddAgentRulePage.tsx:132-138 intercepts back presses whenever the active tab is WRITE (the tab labeled "Edit") and switches back to the Suggested tab instead of closing the RHP:

const handleBackButtonPress = () => {
    if (activeTab === CONST.TAB.AGENT_RULE.WRITE) {
        setActiveTab(CONST.TAB.AGENT_RULE.SUGGESTIONS);
        return;
    }
    Navigation.goBack();
};

Since Suggested and Edit are peer tabs (both directly selectable in the TabSelectorBase), manually clicking the Edit tab sets activeTab = WRITE, so the header back button is treated as "go to the previous tab" rather than "close the RHP." That is the deterioration the tester hit.

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

Make the header back button close the RHP consistently, and let the TabSelector be the only control that switches tabs. The simplest change is to remove the tab-interception so the handler always goes back:

const handleBackButtonPress = () => {
    Navigation.goBack();
};

onBackButtonPress={handleBackButtonPress} can then be dropped entirely, letting HeaderWithBackButton use its default Navigation.goBack().

Alternative considered

If the "return to Suggested" behavior is intentional only when the user arrived at Edit by selecting a suggestion (a wizard-style flow), then instead of removing the intercept, track how the user reached the Write tab (e.g. a cameFromSuggestion ref set in selectSuggestion and cleared in selectTab) and only fall back to Suggested in that case. This preserves the wizard back-step while making a directly-clicked Edit tab close the RHP as expected. This is more code for a narrower UX; confirm the intended design before choosing it.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/96547) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[mananjadhav]

@MelvinBot implement this.