Bank Account - Date picker stays open when navigating with forward arrow

[lanitochka17]

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.3.69-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: #86645
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 11 / Chrome
App Component: User Settings

Action Performed:

1. Go to staging.expensify.com
2. Go to Wallet
3. Click Add bank account
4. On the Bank Purpose Page choose Make Payments
5. Choose United States
6. Go through the flow until confirmation page
7. Click browser back button to go back to date of birth step
8. Click browser forward button a few times

Expected Result:

The date picker closes as the next step does not require it.

Actual Result:

The date picker is stuck on screen until clicked.
Same behavior for the date picker in company incorporation date.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7148742_1778271097955.Recording__221.mp4

View all open jobs on GitHub

[melvin-bot]

@arosiclair recently merged #86645, but they are OOO right now, so I'll auto-assign someone else.

[melvin-bot]

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

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

[OSBotify]

Investigation Summary

Classification: Frontend bug
Causing PR: #86645 - "[CBN] USD flow refactor" by @koko57 (High confidence)
Related Issues: N/A

Recommendation: REVERT

PR #86645 introduced a URL-based sub-page navigation system for the USD bank account setup flow. The refactor changed sub-step navigation to update URL params (subPage) on a single screen rather than pushing/popping full navigation stack entries. This means the DatePicker component's local isModalVisible React state is not reset when a user navigates backward/forward using browser history buttons, causing the calendar picker to remain visible on screen after the date-of-birth or company incorporation date sub-step is no longer the active sub-step.

Assigned: @koko57 (PR author), @dukenv0307 @arosiclair (approving reviewers)
Labels: No label changes made - DeployBlockerCash is correct; this is a staging-only regression introduced by an App PR.

Detailed Analysis

Evidence

• The issue body explicitly links PR [CBN] USD flow refactor #86645 as the associated PR (https://github.com/Expensify/App/pull/86645)
• The melvin-bot comment confirms: "@arosiclair recently merged [CBN] USD flow refactor #86645"
• PR [CBN] USD flow refactor #86645 is listed in the current StagingDeployCash checklist (Deploy Checklist: New Expensify 2026-05-08 #90006) and is not yet checked off (still unresolved)
• The bug is marked "Reproducible in staging: Yes" and "Reproducible in production: N/A - new feature, doesn't exist in prod", confirming the regression is isolated to this staging PR
• The affected component is "User Settings > Wallet > Add bank account > date of birth step", which exactly matches the files modified in PR [CBN] USD flow refactor #86645

Verification

• PR [CBN] USD flow refactor #86645 modifies src/pages/ReimbursementAccount/USD/Requestor/PersonalInfo/PersonalInfo.tsx and src/pages/ReimbursementAccount/USD/BusinessInfo/subSteps/IncorporationDateBusiness.tsx - these are precisely the files containing the date picker steps reported in the bug
• The PR introduced useSubPage hook-based URL param navigation (navigation.setParams({subPage: ...})) and USDVerifiedBankAccountFlowPage.tsx as a new top-level page wrapper
• When the browser back/forward buttons change the subPage URL parameter, useSubPage renders a different sub-step component, but because the parent InteractiveStepWrapper is not unmounted (only the rendered child sub-step changes via a conditional render), the DatePicker's local isModalVisible: true state can persist across sub-step transitions
• src/components/DatePicker/index.tsx manages visibility entirely in local React state (useState(false)) with no effect that resets it on URL/route changes

Root Cause

The PR refactored the bank account sub-step navigation from full navigation stack push/pop to URL param updates on a single screen (useSubPage calls navigation.setParams). When the DatePicker is open and the user clicks browser back or forward, the active sub-step switches (via URL param), but the DatePicker component is rendered inside the same React tree without unmounting. Its isModalVisible state (a local useState hook) retains its true value because there is no useEffect listening to route param changes that would call setIsModalVisible(false). The fix or revert should either unmount the date picker on sub-step transition or add a navigation listener to close the date picker when the sub-page route param changes.