Reports - Undelete button background is lost in selection mode

[jponikarchuk]

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

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense and delete it.
4. Go to Reports > Expenses.
5. Click filters > Status > select Deleted > Apply.
6. Click Display > Edit columns > select Action > Save.
7. Bulk select the expense.

Expected Result:

Undelete button background will be distinguishable from the selection highlight.

Actual Result:

Undelete button background is lost in selection mode.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

[melvin-bot]

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

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

When bulk-selecting a deleted expense in Reports > Expenses with the "Deleted" status filter, the Undelete button's background becomes indistinguishable from the row's selection highlight.

What is the root cause of that problem?

In ActionCell/index.tsx, the Undelete button (and other non-VIEW action buttons) does not pass innerStyles to update its background when the row is selected.

The VIEW button correctly applies buttonDefaultSelected when isSelected is true (line 46-58):

const buttonInnerStyles = isSelected ? styles.buttonDefaultSelected : {};
// ...
innerStyles={buttonInnerStyles}

But the generic action button path (used by Undelete) at lines 83-97 doesn't pass innerStyles at all, so its default background blends into the activeComponentBG row selection highlight.

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

Move the buttonInnerStyles computation before the first if block and pass innerStyles={buttonInnerStyles} to the Button at line 83. This ensures the Undelete button (and any other non-VIEW, non-PAY action) gets the buttonDefaultSelected style when its row is selected.

What alternative solutions did you explore? (Optional)

An alternative would be to apply a distinct background color only to the Undelete button via a new style, but reusing the existing buttonDefaultSelected pattern is simpler and consistent with how the VIEW button already handles this.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[OSBotify]

Investigation Summary: Classification: Frontend bug. Causing PR: #86938 (Deleted transactions on search V2 by @jnowakow) - High confidence. Recommendation: REVERT. PR 86938 introduced the Undelete action button but did not apply the buttonDefaultSelected inner style when in selection mode, causing the Undelete button background to visually blend into the row selection highlight. Root Cause: In ActionCell/index.tsx, the view-action path applies buttonDefaultSelected as innerStyles when isSelected is true (backgroundColor: theme.buttonPressedBG), distinguishing the button visually from the selection highlight. The UNDELETE action falls through to the generic action button path (lines 83-97) which does NOT receive this innerStyles treatment - the isSelected prop is never used for the undelete path. When a row is selected, the Undelete button has no background style and blends into the row selection highlight color. Labels: DeployBlockerCash kept - frontend bug in Expensify/App. Assigned: @jnowakow, @luacmartins, @rojiphil