Spend - No active cards on this feedback animation is shown above search box in landscape

[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: V9.3.55-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: #86684
Email or phone of affected tester (no customers): dreamnitethedragon+vegst@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Redmi note 10s android 13
App Component: Workspace Settings

Action Performed:

Pre-condition:

An account with issued expensify cards
A workspace with Rules enabled
Create a spend rule

1. Launch app
2. Navigate to Workspaces > Rules
3. Press Add spend rule and create a new rule
4. Turn landscape
5. Tap choose card
6. Keep cursor on search

Expected Result:

No active cards on this feedback animation must not be shown above search box in landscape.

Actual Result:

No active cards on this feedback animation is shown above search box in landscape.

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: #86684

[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: #86684 - Add spend rule base page by @luacmartins (High confidence). Recommendation: REVERT. PR 86684 introduced SpendRuleCardPage.tsx with a UI rendering defect in landscape mode where the No active cards BlockingView illustration appears above the search box simultaneously with the same message already shown inline as headerMessage text. Assigned: @luacmartins (PR author), @suneox and @JS00001 (approving reviewers). Labels: DeployBlockerCash kept (frontend App bug). Root cause: SpendRuleCardPage.tsx passes both a headerMessage (No active cards text rendered below the search box via TextInput component) and a listEmptyContent (BlockingView illustration) to SelectionList. In BaseSelectionList.tsx, when data is empty, the textInputComponent renders unconditionally before renderListEmptyContent(), so both UI elements appear simultaneously. In Android landscape mode this results in the illustration overlapping the search input area.

[MelvinBot]

Proposal

What is the root cause of that problem?

In BaseSelectionList.tsx:549-553, the textInputComponent (search box) is rendered unconditionally at line 551, before the conditional branch that decides whether to show listEmptyContent or the FlashList. When data.length === 0, both the search box and the BlockingView (Telescope illustration) render simultaneously.

In SpendRuleCardPage.tsx:204-232, the page passes both textInputOptions (with headerMessage) and listEmptyContent (a BlockingView with the Telescope illustration) to SelectionList. When there are no eligible cards, both elements stack vertically — the search box plus "No results found" text, followed by the large BlockingView illustration — causing the overlap visible in landscape mode on Android.

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

In SpendRuleCardPage.tsx, conditionally render the listEmptyContent without the BlockingView illustration when the search input is active, or more simply: don't pass headerMessage to textInputOptions when the list is empty, since the BlockingView already communicates the empty state (it shows "No active cards" or "No results found" via its title prop at line 230).

Change line 176 and the textInputOptions prop so that headerMessage is only shown when there are eligible cards but the search filtered them all out:

const headerMessage = eligibleCards.length > 0 ? getHeaderMessage(listData.length > 0, false, inputValue, countryCode, false) : '';

This avoids the duplicate "No results found" messaging (headerMessage text + BlockingView title) and prevents the search box + headerMessage from stacking above the BlockingView illustration in landscape.

What alternative solutions did you explore? (Optional)

1. Fix in BaseSelectionList.tsx — hide textInputComponent when rendering listEmptyContent. This would be a more structural fix but would affect all consumers of SelectionList, potentially breaking other pages that intentionally want the search box visible alongside empty content.
2. Remove listEmptyContent entirely when searching — only show the BlockingView when there's no search input, and rely on headerMessage for the "No results found" case. This would work but loses the visual empty-state illustration during search.

---

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.