Tags - New tag does not appear immediately

[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.2.97-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: #77776
Email or phone of affected tester (no customers): jssdjiojsoidjninjsionj@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.1 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• Tags are enabled.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Tags.
3. Click Add tag.
4. Add a tag.

Expected Result:

Tag will appear immediately.

Actual Result:

Tag does not appear immediately.
Table header appears with no tag briefly.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7044729_1767983975351.5.mp4

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[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: #77776 - "Make SelectionListWithModal use new SelectionList" by @zfurtak (High confidence)
Related Issues: None identified

Recommendation: REVERT

PR #77776 introduced a 300ms debounce delay that causes the visual lag when adding tags. This is a clear regression affecting user experience, and the PR can be cleanly reverted without dependencies.

📋 Detailed Analysis

Evidence

• The issue is reproducible on staging but not production, indicating it was introduced in the current deploy cycle
• PR Make SelectionListWithModal use new SelectionList #77776 was merged on 2026-01-08 and is in the staging deploy checklist
• The PR specifically modified WorkspaceTagsPage.tsx and SelectionListWithModal/index.tsx
• melvin-bot automatically assigned the PR author to this deploy blocker

Root Cause

In PR #77776, SelectionListWithModal was refactored to use a debounced data state:

// src/components/SelectionListWithModal/index.tsx, lines 45-51
const [, debouncedData, setDataState] = useDebouncedState<TItem[]>(data, CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME);

useEffect(() => {
    setDataState(data);
}, [data, setDataState]);

The component now renders debouncedData instead of the immediate data prop (line 99). This introduces a 300ms delay (CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME = 300) between when a tag is added to the data array and when it appears in the UI.

Why the debounce was added: The PR comment mentions "Debounce the data prop to prevent rapid updates that cause FlashList layout errors" - this was likely intended for search/filtering scenarios where data changes frequently.

Why it causes this issue: For discrete actions like "Add Tag", users expect immediate feedback. The 300ms delay creates a jarring experience where:

1. User clicks "Add tag"
2. Tag is created successfully
3. Table header appears (because hasVisibleTags becomes true)
4. 300ms delay ⏳
5. Tag finally appears in the list

This affects all pages using SelectionListWithModal: Tags, Categories, Members, Taxes, Distance Rates, Per Diem, Report Fields, and more.

Technical Details

• File: src/components/SelectionListWithModal/index.tsx
• Lines: 45-51, 99
• Debounce duration: 300ms
• Scope: All components using SelectionListWithModal (11 pages listed in PR description)