Web - Spend - Search field is highlighted when not focused after dragging row

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

Version Number: 9.5.28-4
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: #105477
Email or phone of affected tester (no customers): jnosidjodsjojo@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.5 / Chrome
App Component: Search

Action Performed:

Go to staging.new.expensify.com
Go to Spend > Expenses.
Tap Display > Edit column.
Click on the search field.
Drag any row and release it.

Expected Result:

Search field should not highlighted when not focused.

Actual Result:

Search field is highlighted when not focused after dragging row.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug7302994_1793651250111.3.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Chandana Kiran
Bug ID: 7302994

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

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

@JS00001

@JS00001 @JmillsExpensify @Krishna2323 you have been assigned to this deploy blocker because you reviewed the offending PR: #105477

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

👋 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:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

Deploy Blocker Analysis

Causing PR: Add a search input to the Columns page (high confidence). It added the search field above the draggable column list. Before that PR, the page had no text input, which is why production is N/A.

Recommendation: Demote and fix forward, don't revert. The bug only affects how the field looks. Reordering and Save still work. A revert would remove the whole search feature to fix one focus style.

Suggested fix: In DraggableList/index.tsx:87-95, blur any focused text field when a pointer drag starts:

const onDragStart = (event: DragStartEvent) => {
    isDraggingRef.current = true;

    // A keyboard drag is driven by arrow keys, so forcing a cursor the user isn't holding would be noise.
    if (event.activatorEvent instanceof KeyboardEvent) {
        return;
    }

    // Rows swallow mousedown (ListItemPressable), so a text field focused before the drag keeps focus
    // while dnd-kit clears the document selection, leaving a focus border with no caret.
    const activeElement = document.activeElement;
    if (activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement) {
        activeElement.blur();
    }
    DragCursor.show();
};

How the bug happens

The row wrapper calls preventDefault() on mousedown so a search box keeps focus while you pick rows (ListItemPressable.tsx:157-164). The drag handle sits inside that wrapper, so starting a drag never blurs the search input.
When a pointer drag starts, @dnd-kit/core clears the document selection (removeAllRanges()). That removes the input's cursor, but the input stays focused.
BaseTextInput decides it is focused from document.activeElement (BaseTextInput/implementation/index.tsx:167-171) and keeps the focus border (L343).

The result is a highlighted field with no cursor. This only happens when the field is empty, because the PR disables dragging while a search is active.

This comes from code reading. I didn't reproduce it on staging.

Alternative fix: Pass a ref to ListSearchBar and blur it from a new onDragStart prop on DraggableList. That is narrower but needs changes to the shared types and the native version.

Next Steps: Reply with @MelvinBot implement this to create a draft PR, or @MelvinBot <your feedback> to refine this analysis.

view run

@Krishna2323

demoted, @Krishna2323 lets fix this tho

Navigation Menu

Repository navigation

Web - Spend - Search field is highlighted when not focused after dragging row #105681

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Deploy Blocker Analysis

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Web - Spend - Search field is highlighted when not focused after dragging row #105681

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

applause-bot commented on Nov 2, 2026

melvin-bot commented on Nov 2, 2026

melvin-bot commented on Nov 2, 2026

melvin-bot commented on Nov 2, 2026

github-actions commented on Nov 2, 2026

MelvinBot commented on Nov 2, 2026

Deploy Blocker Analysis

JS00001 commented on Nov 3, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions