Expense - No background blur when opening Month/Year RHP when inline editing

[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.2.62-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: #83127
Email or phone of affected tester (no customers): jnsdijsnodjonjiosjdio@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Money Requests

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create two expenses.
4. Open the report.
5. Click Date field.
6. Click Month or Year.

Expected Result:

There will be background blur when opening Month/Year RHP when inline editing.

Actual Result:

There is no background blur when opening Month/Year RHP when inline editing.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7136935_1776975839161.3.mp4

View all open jobs on GitHub

[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: #83127 - "feat: Add inline editing for tables on desktop" by @mohammadjafarinejad (High confidence)
Related Issues: None

Recommendation: REVERT

PR #83127 introduced the inline editing feature for expense table cells, including the DateCell component that uses DatePickerModal. The missing background blur when opening Month/Year RHP is a direct consequence of this new code path, and the feature does not exist in production. Reverting this PR will remove the regression.

Assigned: @mohammadjafarinejad (PR author), @ahmedGaber93, @puneetlath (approving reviewers) from highest-confidence causing PR only
Labels: DeployBlockerCash kept (frontend App PR caused the issue); DeployBlocker not present, no changes made.

Detailed Analysis

Evidence

• The issue reporter references PR feat: Add inline editing for tables on desktop #83127 directly in the issue body as the regression source.
• The issue is reproducible on staging only — "Reproducible in production? N/A - new feature, doesn't exist in prod." This confirms it was introduced in the current staging deploy.
• PR feat: Add inline editing for tables on desktop #83127 is listed in the current StagingDeployCash (issue Deploy Checklist: New Expensify 2026-04-23 #88633) checklist.
• PR feat: Add inline editing for tables on desktop #83127 added DateCell.tsx (src/components/Search/SearchList/ListItem/DateCell.tsx), a new component that renders DatePickerModal inside a popover as part of inline editing for expense table rows.
• The DatePickerModal renders a CalendarPicker, which contains YearPickerModal and MonthPickerModal. These are RIGHT_DOCKED modals that use shouldUseCustomBackdrop, which renders an Overlay component driven by React Navigation's useCardAnimation. When DatePickerModal is invoked from the new inline editing popover context (rather than a full navigation screen), the background blur for nested Month/Year modals is not produced.

Verification

• Affected files: src/components/DatePicker/CalendarPicker/YearPickerModal.tsx, src/components/DatePicker/CalendarPicker/MonthPickerModal.tsx, src/components/Search/SearchList/ListItem/DateCell.tsx
• PR feat: Add inline editing for tables on desktop #83127 directly adds DateCell.tsx (new file) and modifies DatePickerModal.tsx (adding shouldDisplayBelowModals prop).
• The Month/Year picker modals (YearPickerModal, MonthPickerModal) have always used shouldUseCustomBackdrop for the blur overlay. The blur regression only occurs in the new inline-editing popover context introduced by feat: Add inline editing for tables on desktop #83127, not in existing non-inline-editing date picker flows.

Root Cause

PR #83127 introduced DateCell.tsx which renders DatePickerModal as a popover within an inline editing flow. When a user clicks Month or Year inside the calendar, MonthPickerModal or YearPickerModal is opened as a RIGHT_DOCKED modal with shouldUseCustomBackdrop=true. The Overlay component behind this custom backdrop uses useCardAnimation from React Navigation, which relies on a navigation stack context. In the new inline-editing popover rendering context created by #83127, the navigation animation progress available to Overlay does not produce the expected background blur/dim effect. The blur worked correctly in the pre-existing non-inline-editing flows because those date pickers were opened in a proper navigation context.

[ahmedGaber93]

I believe we can disable the opening of Month/Year RHP in the inline edit and instead use the arrow keys.

Let's get @Expensify/design Thoughts?