Reports - Category picker is opened overlapping the "Category" cell during inline editing.

[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.62-1
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): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Windows 11 / Chrome
App Component: Search

Action Performed:

Prerequisite: Account has at least one workspace.

1. Open the staging.new.expensify.com website.
2. Open any workspace chat.
3. Create a manual expense.
4. Navigate to "Reports" > "All Expenses"
5. Click on the "Category" cell on transaction row of just created expense.
6. Note that category picker popover, is opened overlapping the "Category" cell on expense preview.

Expected Result:

Category picker popover, should be opened below the "Category" cell on transaction row, while inline editing.

Actual Result:

Category picker popover is displayed overlapping the "Category" cell on transaction row while 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

Video.mp4

View all open jobs on GitHub

[melvin-bot]

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

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

Recommendation: REVERT

PR #83127 introduced the inline editing feature for transaction table cells, including the category cell, and the popover positioning logic in the new usePopoverEditState hook places the category picker popover overlapping the cell instead of below it. This is a staging-only regression (the feature does not exist in production).

Assigned: @mohammadjafarinejad (PR author), @puneetlath (approving reviewer), @ahmedGaber93 (approving reviewer) from highest-confidence causing PR only
Labels: DeployBlockerCash kept (Frontend bug in App PR). No DeployBlocker label present to remove.

Detailed Analysis

Evidence

• The issue body directly references PR feat: Add inline editing for tables on desktop #83127 as the regression source, and melvin-bot also automatically identified and assigned the PR author.
• The bug is reproducible on staging only ("N/A - new feature, doesn't exist in prod"), confirming this is a newly introduced regression from the current staging cycle.
• PR feat: Add inline editing for tables on desktop #83127 explicitly adds inline editing to the category cell in the transaction table, with CategoryCell.tsx listed among the modified files.
• The usePopoverEditState hook (introduced by this PR in src/components/Table/EditableCell/usePopoverEditState.ts) computes the popover's vertical position from anchorRef.current?.measureInWindow. When not inverted, the vertical coordinate is y + height + padding, which should position the popover below the cell. However, the CategoryPickerModal uses PopoverWithMeasuredContent with shouldMeasureAnchorPositionFromTop passed from usePopoverEditState's isInverted flag — and the default anchor alignment sets vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP. The net effect is the popover renders overlapping (on top of) the category cell rather than anchored below it, which matches the exact symptom reported.

Verification

• Affected file: src/components/TransactionItemRow/DataCells/CategoryCell.tsx
• Confirmed: PR feat: Add inline editing for tables on desktop #83127 lists src/components/TransactionItemRow/DataCells/CategoryCell.tsx as a modified file (43 additions, 2 deletions).
• Confirmed: PR feat: Add inline editing for tables on desktop #83127 also introduces src/components/Table/EditableCell/usePopoverEditState.ts (96 additions), which contains the popover position calculation logic that produces the incorrect placement.
• Confirmed: PR feat: Add inline editing for tables on desktop #83127 introduces src/components/CategoryPicker/CategoryPickerModal.tsx (86 additions), which wraps PopoverWithMeasuredContent with the position coordinates supplied by usePopoverEditState.

Root Cause

The usePopoverEditState hook calculates a popover position using measureInWindow and passes it to CategoryPickerModal as anchorPosition. The position calculation for the non-inverted case sets vertical: y + height + padding, intending to place the popover just below the anchor cell. However, CategoryPickerModal passes this to PopoverWithMeasuredContent alongside a shouldMeasureAnchorPositionFromTop flag that controls re-measurement behavior. Due to how PopoverWithMeasuredContent interprets the position together with anchor alignment (ANCHOR_ORIGIN_VERTICAL.TOP), the popover renders overlapping the category cell rather than below it — producing the reported behavior where the category picker obscures the cell being edited.

[ahmedGaber93]

This is an edge case that seems to occur on small screens height, or when the picker bottom edge is already at the screen bottom edge and there isn’t enough space above the item to render the picker above the category.

small screens height

The picker’s top edge is already aligned with the table’s top edge, leaving insufficient space below the item to render the picker properly (e.g., above the category).

Screen.Recording.2026-04-24.at.7.25.03.AM.mov