[$250] Web - Search Button - After the text box is cleared, there is no focused item

[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: undefined
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: undefined
Email or phone of affected tester (no customers): undefined
Issue reported by: Applause Internal Team
Bug source: undefined
Device used: undefined
App Component: undefined

Action Performed:

1. Navigate to the Home page
2. Tap on a magnifying glass at the top right corner or press Command+K (Ctrl+K)
3. In the search box, enter a query that leads to no results
4. Select the entered query and delete it fully with the Delete key

Expected Result:

After the text box is cleared, the focus is on the first item of the list

Actual Result:

None of the items in the list is focused

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7082780_1771528361633.NoFocus.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @marcochavezf

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022028563585617179442
• Upwork Job ID: 2028563585617179442
• Last Price Increase: 2026-03-02

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (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.

[MelvinBot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

After opening the search popup (Cmd+K / Ctrl+K), typing a query that returns no results, and then fully deleting the query text, no item in the reappearing list gets focused. The expected behavior is that the first item should be focused.

What is the root cause of that problem?

When the search query changes, the useEffect in SearchAutocompleteList.tsx (line 212-225) calls updateAndScrollToFocusedIndex(0, true), which blindly sets focusedIndex to 0. During an active search this is fine because index 0 is the searchQueryItem (a focusable row). But when the query is cleared, searchQueryItem disappears and sections rebuild with titled sections — "Recent Searches" and "Recent Chats". The useFlattenedSections hook inserts section headers as the first items in the flattened list, and these headers are disabled/non-focusable. So focusedIndex=0 ends up pointing at a disabled header, and no item appears visually focused.

Three safety nets that should correct this all fail:

1. Initial focus effect (SearchAutocompleteList.tsx:383-406) has a one-time guard (hasSetInitialFocusRef.current = true) that was already set during mount, so it never re-fires to restore focus to the first recent report.
2. shouldHighlight / onHighlightFirstItem (SearchQueryUtils.ts:1620-1623) returns false for empty search text, so the callback that would move focus to index 1 never triggers.
3. useSearchFocusSync (BaseSelectionListWithSections.tsx:255) is inert because SearchAutocompleteList uses an external text input and never passes textInputOptions, making searchValue always undefined — the hook never detects the search-cleared transition.

What changes do you think we should make in order to solve the problem?

In SearchAutocompleteList.tsx, modify the useEffect at lines 212-225. When the query is cleared (transitions to empty), instead of blindly focusing index 0, reset hasSetInitialFocusRef.current = false so that the existing initial focus effect at lines 383-406 can re-fire. That effect already contains the correct logic to compute the flat index of the first recent report (skipping section headers) and focus it. The sections dependency will need to be added to that effect's dependency array (or autocompleteQueryValue added as a signal) so it re-runs when the query is cleared.

Alternatively, the query-change useEffect could compute the correct first focusable index inline (replicating the section-header-skipping logic from lines 391-404) when the query becomes empty, and pass that to updateAndScrollToFocusedIndex instead of hardcoded 0.

What alternative solutions did you explore? (Optional)

Another option would be to pass the external search value through textInputOptions to SelectionListWithSections so that useSearchFocusSync (which already has the correct "search cleared → refocus firstFocusableIndex" logic at lines 69-94 of useSearchFocusSync.ts) can fire. However, this would be a larger change since the SearchRouter deliberately uses an external text input with its own state management, and plumbing textInputOptions could have unintended side effects on other SelectionListWithSections behaviors.

---

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022028563585617179442

[afnanahmadtariq]

Proposal

Please re-state the problem that we are trying to solve in this issue.

After opening search (Cmd+K / Ctrl+K), typing a query with no results, and deleting the text, no item in the list is focused. The first item should be focused.

What is the root cause of that problem?

When the query changes, the useEffect in SearchAutocompleteList.tsx (lines 212–225) calls updateAndScrollToFocusedIndex(0, true), which sets focus to flat index 0. During an active search, index 0 is the searchQueryItem (a focusable row). But when the query is cleared, searchQueryItem disappears and the sections rebuild with titled sections ("Recent Searches", "Recent Chats"). The useFlattenedSections hook inserts section headers as the first items in the flattened list, and headers are disabled/non-focusable. So focusedIndex=0 lands on a disabled header, and nothing appears visually focused.

https://github.com/Expensify/App/blob/main/src/components/Search/SearchAutocompleteList.tsx#L212-L225

if (queryChanged) {
  // When query changes, focus on the search query item (index 0) and scroll to top
  innerListRef.current?.updateAndScrollToFocusedIndex(0, true);
}

The shouldHighlight function (SearchQueryUtils.ts) returns false when searchText is empty, so onHighlightFirstItem never fires to correct the focus. The one-time initial focus effect (lines 383–406) already ran at mount and won't re-fire because hasSetInitialFocusRef.current is true.

What changes do you think we should make in order to solve the problem?

Fix the query-change useEffect directly (lines 212–225) to compute the correct first focusable index when the query is cleared, instead of blindly using 0.

When autocompleteQueryValue transitions to empty, the sections will contain titled sections with headers. We can compute the first focusable (non-header) index inline using the same flattening logic already present in the initial focus effect (lines 391–404):

useEffect(() => {
  if (isInitialRender) {
    return;
  }

  const queryChanged = prevQueryRef.current !== autocompleteQueryValue;
  prevQueryRef.current = autocompleteQueryValue;

  if (queryChanged) {
    if (autocompleteQueryValue === "") {
      // When query is cleared, sections have titled headers that are non-focusable.
      // Compute the flat index of the first actual item (skip headers).
      let flatIndex = 0;
      for (const section of sections) {
        const hasData = (section.data?.length ?? 0) > 0;
        const hasHeader =
          hasData &&
          (section.title !== undefined ||
            ("customHeader" in section && section.customHeader !== undefined));
        if (hasHeader) {
          flatIndex++;
        }
        if (hasData) {
          // First data item in the first section with data
          break;
        }
      }
      innerListRef.current?.updateAndScrollToFocusedIndex(flatIndex, true);
    } else {
      innerListRef.current?.updateAndScrollToFocusedIndex(0, true);
    }
  }
}, [autocompleteQueryValue, isInitialRender, sections]);

This is a single, self-contained change in the useEffect that already handles query changes. It reuses the same header-skipping logic from the initial focus effect but applies it inline — no ref resets, no side-effect chains.

What alternative solutions did you explore? (Optional)

1. Resetting hasSetInitialFocusRef when query clears — This would let the initial focus effect at lines 383–406 re-fire. However, it introduces a coupling between two separate effects via a shared ref, making the logic harder to follow. The initial focus effect also depends on firstRecentReportKey which may not be computed yet when the ref is reset.

2. Plumbing textInputOptions to SelectionListWithSections — This would let useSearchFocusSync detect the "search cleared" transition and refocus automatically. However, the SearchRouter deliberately uses an external text input, and adding textInputOptions could have unintended side effects on other behaviors.

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• On Web, when the user opens the search router (via the magnifying glass icon or Cmd+K / Ctrl+K), types a query that yields no results, and then fully clears the text box, none of the items in the list are focused. The expected behavior is that the first item in the list should be focused after clearing.

What is the root cause of that problem?

• When the search text is cleared, the searchQueryItem (the "Search for X" row at index 0) disappears from the sections list. Without it, the first section that renders is either "Recent searches" or "Recent chats" — both of which have a title header (e.g., translate('search.recentSearches')).
• In the flattened list produced by useFlattenedSections, section headers are prepended as disabled, non-focusable items. So when the query is cleared, flat index 0 becomes a section header.
• The useEffect in SearchAutocompleteList that resets focus on query change always calls updateAndScrollToFocusedIndex(0, true):

App/src/components/Search/SearchAutocompleteList.tsx

Lines 211 to 225 in eed56d0

	// Reset focus when query changes to prevent stale focus on wrong items
	useEffect(() => {
	if (isInitialRender) {
	return;
	}
	const queryChanged = prevQueryRef.current !== autocompleteQueryValue;
	prevQueryRef.current = autocompleteQueryValue;
	if (queryChanged) {
	// When query changes, focus on the search query item (index 0) and scroll to top
	// onHighlightFirstItem will switch focus to the first result when there's a good match
	innerListRef.current?.updateAndScrollToFocusedIndex(0, true);
	}
	}, [autocompleteQueryValue, isInitialRender]);

• This works when text is present (index 0 is the focusable search query item), but when the text is cleared, index 0 is now a disabled section header — so setFocusedIndex(0) sets focus on a header that isn't visually highlighted, making it appear as though no item is focused.

What changes do you think we should make in order to solve the problem?

• useFlattenedSections already computes a firstFocusableIndex that correctly skips section headers. We should expose it through the imperative handle and use it when the query is cleared.

1. Add getFirstFocusableIndex to SelectionListWithSectionsHandle:
   

   App/src/components/SelectionList/SelectionListWithSections/types.ts

   Line 54 in eed56d0

   type SelectionListWithSectionsHandle<TItem extends ListItem = ListItem> = {

2. Expose getFirstFocusableIndex in the imperative handle, returning the already-computed firstFocusableIndex from useFlattenedSections:
   

   App/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx

   Lines 203 to 210 in eed56d0

   	useImperativeHandle(ref, () => ({
   	focusTextInput,
   	scrollToIndex,
   	clearInputAfterSelect,
   	updateAndScrollToFocusedIndex,
   	updateExternalTextInputFocus,
   	getFocusedOption: getFocusedItem,
   	}));

3. src/components/Search/SearchAutocompleteList.tsx — When the query is cleared, use getFirstFocusableIndex() instead of hardcoding index 0:

App/src/components/Search/SearchAutocompleteList.tsx

Lines 220 to 224 in eed56d0

	if (queryChanged) {
	// When query changes, focus on the search query item (index 0) and scroll to top
	// onHighlightFirstItem will switch focus to the first result when there's a good match
	innerListRef.current?.updateAndScrollToFocusedIndex(0, true);
	}

if (queryChanged) {
    const targetIndex = !autocompleteQueryValue ? (innerListRef.current?.getFirstFocusableIndex() ?? 0) : 0;
    innerListRef.current?.updateAndScrollToFocusedIndex(targetIndex, true);
}

• When text is present, the search query item is the first section (no header), so index 0 remains correct. When the text is cleared, getFirstFocusableIndex() returns the index of the first actual data item, skipping any section headers.

What alternative solutions did you explore?

• N/A

[abbasifaizan70]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When the user opens the global search (magnifying glass or Command+K), enters a query that returns no results, then selects the query and deletes it fully with the Delete key, the list is cleared but no list item receives focus. The expected behavior is that after the text box is cleared, focus moves to the first item in the list (e.g. first recent search or recent chat).

What is the root cause of that problem?

The search autocomplete list uses an external text input in the header; the list itself does not receive textInputValue. When the query changes, the only logic that updates list focus runs in SearchAutocompleteList. On any query change (including clearing), it calls updateAndScrollToFocusedIndex(0, true), which focuses index 0. Index 0 is the search query row (the row that reflects the current query), not the first result. That row is not a selectable “first item” in the sense of recent searches/chats, and the list does not show focus on it. So after clearing, the user sees no item focused.

App/src/components/Search/SearchAutocompleteList.tsx

Lines 211 to 225 in 5635997

	// Reset focus when query changes to prevent stale focus on wrong items
	useEffect(() => {
	if (isInitialRender) {
	return;
	}
	const queryChanged = prevQueryRef.current !== autocompleteQueryValue;
	prevQueryRef.current = autocompleteQueryValue;
	if (queryChanged) {
	// When query changes, focus on the search query item (index 0) and scroll to top
	// onHighlightFirstItem will switch focus to the first result when there's a good match
	innerListRef.current?.updateAndScrollToFocusedIndex(0, true);
	}
	}, [autocompleteQueryValue, isInitialRender]);

What changes do you think we should make in order to solve the problem?

In SearchAutocompleteList, when the query is cleared (new value is empty), focus the first actual list item instead of the search query row. When searchQueryItem is present, the first section is that row (index 0), so the first list result (recent search or recent chat) is at index 1. Use index 1 when the query was cleared and searchQueryItem exists; otherwise keep index 0 so behavior stays correct when there is no search query row.

diff --git a/App/src/components/Search/SearchAutocompleteList.tsx b/App/src/components/Search/SearchAutocompleteList.tsx
--- a/App/src/components/Search/SearchAutocompleteList.tsx
+++ b/App/src/components/Search/SearchAutocompleteList.tsx
@@ -216,8 +216,11 @@ function SearchAutocompleteList({
         const queryChanged = prevQueryRef.current !== autocompleteQueryValue;
         prevQueryRef.current = autocompleteQueryValue;

         if (queryChanged) {
-            // When query changes, focus on the search query item (index 0) and scroll to top
-            // onHighlightFirstItem will switch focus to the first result when there's a good match
-            innerListRef.current?.updateAndScrollToFocusedIndex(0, true);
+            // When query is cleared, focus the first list item (index 1 when searchQueryItem is at 0).
+            // When query is non-empty, focus the search query row (index 0); onHighlightFirstItem may move to first result.
+            const focusIndex = autocompleteQueryValue === '' && searchQueryItem ? 1 : 0;
+            innerListRef.current?.updateAndScrollToFocusedIndex(focusIndex, true);
         }
     }, [autocompleteQueryValue, isInitialRender]);