[Due for payment 2026-03-30] Android - FAB - Menu item icons become green when reopening FAB

[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.40-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #83299
Email or phone of affected tester (no customers): sdjsdjosijnsodiosd@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Samsung Galaxy S25 FE / Android 16
App Component: Left Hand Navigation (LHN)

Action Performed:

1. Launch Expensify app.
2. Open FAB.
3. Close FAB.
4. Open FAB.

Expected Result:

Menu item icons will remain white when reopening FAB.

Actual Result:

Menu item icons become green when reopening FAB.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7106293_1773843171338.11.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @adhorodyski

[melvin-bot]

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

[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: #83299 - "FAB popover decomposition" by @TMisiukiewicz (High confidence)
Related Issues: None

Recommendation: REVERT

This is a frontend regression introduced by the FAB refactor. The PR is relatively recent (merged March 17) and the bug affects a core UI component. Reverting is the safest path to unblock the deploy while a proper fix can be developed.

Labels: Keeping DeployBlockerCash (App PR caused the issue); DeployBlocker is not present so no label changes needed.

📋 Detailed Analysis

Evidence

PR #83299 refactored the FAB (Floating Action Button) popover from a monolithic ~800-line component into a composable architecture using context and custom hooks. The issue describes menu item icons becoming green (focused state) when reopening the FAB, which only occurs on staging (where this PR is deployed) and not on production.

The bug was first reported on version 9.3.40-0, and PR #83299 is listed in the StagingDeployCash checklist at position #32 in the chronological merge order.

Verification

The PR modifies the core FAB implementation files:

• /home/runner/_work/App/App/src/pages/inbox/sidebar/FloatingActionButtonAndPopover.tsx - Main FAB component (rewritten)
• /home/runner/_work/App/App/src/pages/inbox/sidebar/FABPopoverContent/FABPopoverMenu.tsx - New popover menu component
• /home/runner/_work/App/App/src/pages/inbox/sidebar/FABPopoverContent/FABFocusableMenuItem.tsx - New focusable menu item
• /home/runner/_work/App/App/src/pages/inbox/sidebar/FABPopoverContent/useFABMenuItem.ts - Hook for menu item focus management

These files directly control the FAB menu rendering and icon states reported in the bug.

Root Cause

The issue is in the focus state management when the FAB menu reopens.

In /home/runner/_work/App/App/src/pages/inbox/sidebar/FABPopoverContent/FABPopoverMenu.tsx (lines 71-75):

const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
    initialFocusedIndex: -1,
    maxIndex: itemCount - 1,
    isActive: isVisible,
});

The useArrowKeyFocusManager hook (in /home/runner/_work/App/App/src/hooks/useArrowKeyFocusManager.ts line 60) initializes focus state with:

const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);

The problem: useState only uses initialFocusedIndex on the first render. When the FAB closes and reopens, the focusedIndex state persists from the previous session because there is no useEffect to reset it when isActive changes from false to true.

While line 86 of FABPopoverMenu.tsx calls setFocusedIndex(-1) when an item is pressed, this doesn't guarantee proper reset on menu close/reopen cycles, especially if the menu is dismissed without selecting an item (e.g., clicking outside).

In /home/runner/_work/App/App/src/pages/inbox/sidebar/FABPopoverContent/useFABMenuItem.ts (line 36):

const isFocused = focusedIndex === itemIndex;

This causes menu items to render with focused state (green icons) based on the stale focusedIndex, which then propagates to MenuItem icon fill colors via the focused prop.