[Due for payment 2026-08-08] [$250] Android - Tags - Status filter modal appears in the middle with empty space below

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding. To join our Slack channel, fill out this form.

---

Version Number: 9.4.45-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: #97048
Email or phone of affected tester (no customers): sdsjodijnsdojsosjio@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: Workspace Settings

Action Performed:

Precondition:

• Account has multi-level independent tags.

1. Launch Expensify app.
2. Go to workspace settings > Tags.
3. Open any main tag.
4. Tap on the search field.
5. Type anything.
6. Tap on the status filter button.

Expected Result:

Status filter modal will open at the bottom.

Actual Result:

Status filter modal appears in the middle with empty space below.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7219256_1785191339732.Screen_Recording_20260728_062446_Expensify.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7219256

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022082426712236474884
• Upwork Job ID: 2082426712236474884
• Last Price Increase: 2026-07-29

Issue Owner

Current Issue Owner: @mallenexpensify

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/3d35aeefa0adee7bbbc05c88cf25679ba314567b577646a03ba191f5c6314818

[melvin-bot]

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

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

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #97048 - "Add Enabled/Disabled status filter to multi-layer tags table" (Medium confidence — surfaces the bug but does not contain the buggy code)
Related Issues: #96965 (feature request implemented by #97048)

Recommendation: ROLL FORWARD

The visual glitch lives in shared, pre-existing filter-popover infrastructure (FilterPopupButton / PopoverWithMeasuredContent), not in PR #97048. #97048 only wired the existing filter mechanism onto a new table, so it merely exposed the bug on a new surface. A revert would delete a legitimate feature while leaving the identical bug live on the Members and Company Cards tables (which use the same code in production). A targeted fix to the shared component is the correct path.

Assigned: @mkhutornyi, @JmillsExpensify, @aldo-expensify (approving reviewers of PR #97048) — cc the PR author for the targeted fix.
Labels: No changes. Kept DeployBlockerCash (this is a frontend/App fix and the app deploy is blocked). DeployBlocker was not present.

📋 Detailed Analysis

Evidence

• PR Add Enabled/Disabled status filter to multi-layer tags table #97048 changed only two files: src/components/Tables/WorkspaceViewTagsTable/index.tsx (+29/-1) and a new test. The diff purely adds a filterConfig (single-select Enabled/Disabled) plus an isItemInFilter predicate and passes filters/isItemInFilter into the existing shared <Table>. It contains no modal, popover, keyboard, or positioning code.
• The status-filter modal is rendered by shared infrastructure that Add Enabled/Disabled status filter to multi-layer tags table #97048 did not touch: Table.FilterBar → TableFilterTrigger → FilterPopupButton → PopoverWithMeasuredContent.
• The same filters + isItemInFilter + Table.FilterBar pattern is already used in production by WorkspaceMembersTable (filters={filterConfig}, Table.FilterBar label={translate('workspace.people.findMember')}), WorkspaceCompanyCardsTable, and DomainMembersTable. The exact "type in the search field, then tap the status filter" flow exists there too.
• New feature — not reproducible in production. But that is only because the tags table did not previously expose the filter, not because the buggy code is new.

Verification

• Affected code paths (all pre-existing, untouched by Add Enabled/Disabled status filter to multi-layer tags table #97048):
  • src/components/Search/FilterDropdowns/FilterPopupButton.tsx — renders PopoverWithMeasuredContent with avoidKeyboard, anchorPosition={popoverTriggerPosition}, and outerStyle={getOuterModalStyle(...)}.
  • src/hooks/usePopoverPosition.ts — on small screens calculatePopoverPosition short-circuits to {horizontal: 0, vertical: 0, width: 0, height: 0}.
  • src/components/Table/TableFilterBar/index.tsx — lays out TableSearchBar (the search input that raises the keyboard) next to TableFilterTrigger.
• git log shows none of these shared files were modified by Add Enabled/Disabled status filter to multi-layer tags table #97048; the only recent touch is the routine submodule/version bump commit.
• Confirmed Add Enabled/Disabled status filter to multi-layer tags table #97048's file list is exactly WorkspaceViewTagsTable/index.tsx + tests/ui/WorkspaceViewTagsTableTest.tsx.

Root Cause

On a small-screen Android layout, PopoverWithMeasuredContent is meant to render as a bottom-docked modal (usePopoverPosition returns a zeroed anchor for isSmallScreenWidth). Because FilterPopupButton passes avoidKeyboard, opening the filter while the soft keyboard is still up (the repro types in the search field immediately before tapping the filter) makes the modal reserve keyboard-avoidance space. When the keyboard then dismisses on the modal opening, the reserved offset/height is not reconciled, so the sheet is pushed up into the middle of the screen with empty space below instead of anchoring to the bottom.

The correct fix is in the shared component: dismiss the keyboard (e.g. Keyboard.dismiss()) before/when opening the filter overlay in FilterPopupButton.calculatePopoverPositionAndToggleOverlay (src/components/Search/FilterDropdowns/FilterPopupButton.tsx:94-104), and/or reconcile the bottom-docked modal height so the avoidKeyboard offset does not leave residual empty space. This fix also hardens the Members/Company Cards tables against the same glitch.

[mkhutornyi]

Recommendation: ROLL FORWARD

The visual glitch lives in shared, pre-existing filter-popover infrastructure (FilterPopupButton / PopoverWithMeasuredContent), not in PR #97048. #97048 only wired the existing filter mechanism onto a new table, so it merely exposed the bug on a new surface. A revert would delete a legitimate feature while leaving the identical bug live on the Members and Company Cards tables (which use the same code in production). A targeted fix to the shared component is the correct path.

As Melvin said, this is pre-existing bug in production. I think we can demote this.

Btw I am not able to reproduce this on android emulator.

android.mov

[mkhutornyi]

I reproduced exactly same bug in production. (workspace members page)

android.mp4