[Due for payment 2026-02-04] [$250] Web - User can't navigate through the autocomplete suggestion list using the keyboard

[nlemma]

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.95-5
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://github.com/Expensify/Expensify/issues/481945
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows Windows 11 Pro - Chrome
App Component: Other

Action Performed:

1. Go to Reports.
2. Enter anything that will give results.
3. Use the keyboard up and down key.

Expected Result:

When AutocompleteList is visible, Navigation happens only in Autocomplete List.

Actual Result:

The auto complete closes and user can't navigate through the suggestion list using the keyboard.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7037408_1766761743816.bandicam_2025-12-26_18-04-59-771.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022010761786259879892
• Upwork Job ID: 2010761786259879892
• Last Price Increase: 2026-01-12

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @greg-schroeder

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

[TaduJR]

Proposal

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

On web (Windows Chrome, MacOS Chrome/Safari), when users are in Reports search and try to navigate through the autocomplete suggestion list using keyboard arrow keys (up/down), the autocomplete dropdown closes immediately instead of allowing navigation through suggestions.

What is the root cause of that problem?

The root cause is the flawed design pattern of using onBlur to control autocomplete visibility. The onBlur event fires whenever focus leaves the input - including during keyboard navigation when focus moves to list items. This pattern is incorrect for autocomplete components.

Root Cause Flow:

1. User focuses on search input, showAutocompleteList() is called:
   

   App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

   Line 456 in 0cbb1e1

   onFocus={showAutocompleteList}

2. User types query, autocomplete suggestions appear

3. User presses Arrow Down/Up to navigate suggestions

4. Browser moves focus to list item, firing blur on the input

5. onBlur={hideAutocompleteList} triggers, hiding the dropdown:
   

   App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

   Line 457 in 0cbb1e1

   onBlur={hideAutocompleteList}

Debug logs confirmed this sequence:

1767887001019ms  ArrowDown key captured
1767887001020ms  preventDefault() called
1767887001045ms  onBlur fires → relatedTarget is autocomplete list item
1767887001045ms  hideAutocompleteList() called → dropdown closes

Why SearchRouter (CMD+K) works correctly: It does NOT use onBlur to control visibility:

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 512 to 536 in 0cbb1e1

	<SearchInputSelectionWrapper
	value={textInputValue}
	isFullWidth={shouldUseNarrowLayout}
	onSearchQueryChange={onSearchQueryChange}
	onSubmit={() => {
	const focusedOption = listRef.current?.getFocusedOption();
	if (!focusedOption) {
	submitSearch(textInputValue);
	return;
	}
	onListItemPress(focusedOption);
	}}
	caretHidden={shouldHideInputCaret}
	autocompleteListRef={listRef}
	shouldShowOfflineMessage
	wrapperStyle={{...styles.border, ...styles.alignItemsCenter}}
	wrapperFocusedStyle={styles.borderColorFocus}
	isSearchingForReports={!!isSearchingForReports}
	selection={selection}
	substitutionMap={autocompleteSubstitutions}
	ref={textInputRef}
	shouldDelayFocus
	/>

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

Remove onBlur={hideAutocompleteList} and use click-outside detection instead, aligning with SearchRouter's pattern.

File to modify:

https://github.com/Expensify/App/blob/0cbb1e1c7dd8c2d3ad4ebea1898cfbf06e832924/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Solution:

1. Add a ref for the search container and click-outside handler:

const searchContainerRef = useRef<View>(null);

useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
        if (
            searchContainerRef.current &&
            !(searchContainerRef.current as unknown as HTMLElement).contains(event.target as Node)
        ) {
            setIsAutocompleteListVisible(false);
        }
    };

    if (isAutocompleteListVisible) {
        document.addEventListener('mousedown', handleClickOutside);
    }

    return () => {
        document.removeEventListener('mousedown', handleClickOutside);
    };
}, [isAutocompleteListVisible]);

2. Remove onBlur prop from SearchInputSelectionWrapper:

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Line 457 in 0cbb1e1

onBlur={hideAutocompleteList}

Remove this line:

onBlur={hideAutocompleteList}

3. Wrap the search area with the ref:

https://github.com/Expensify/App/blob/0cbb1e1c7dd8c2d3ad4ebea1898cfbf06e832924/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx#L447-L499

<View style={[styles.appBG, ...autocompleteInputStyle]} ref={searchContainerRef}>
    {/* existing content */}
</View>

4. Simplify hideAutocompleteList:

const hideAutocompleteList = () => setIsAutocompleteListVisible(false);

This approach:

1. Removes the flawed onBlur pattern entirely
2. Uses click-outside detection which correctly identifies when user clicks away from the search area
3. Aligns with how SearchRouter handles visibility
4. Keyboard navigation no longer triggers unwanted hiding

[twinkle-react]

Proposal

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

When users are in Reports search and try to navigate through the autocomplete suggestion list using keyboard arrow keys (up/down), the autocomplete dropdown closes immediately instead of allowing navigation through suggestions.

What is the root cause of that problem?

The root cause is the flawed design pattern of using onBlur to control autocomplete visibility in SearchPageHeaderInput.tsx. When keyboard navigation moves focus from the input to list items, the onBlur event fires and triggers hideAutocompleteList(), closing the dropdown prematurely.

SearchPageHeaderInput.tsxLines 456-457
onFocus={showAutocompleteList}
onBlur={hideAutocompleteList}

This pattern fails because onBlur fires whenever focus leaves the input, including during legitimate keyboard navigation within the autocomplete list.

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

Remove the onBlur handler entirely and implement robust click-outside detection using pointer events for cross-platform compatibility.

SearchPageHeaderInput.tsxLines 416-420
const hideAutocompleteList = () => setIsAutocompleteListVisible(false);
const showAutocompleteList = () => {
    listRef.current?.updateAndScrollToFocusedIndex(0);
    setIsAutocompleteListVisible(true);
};

Replace with:

const searchContainerRef = useRef<View>(null);

const hideAutocompleteList = useCallback(() => {
    setIsAutocompleteListVisible(false);
}, []);

const showAutocompleteList = useCallback(() => {
    listRef.current?.updateAndScrollToFocusedIndex(0);
    setIsAutocompleteListVisible(true);
}, []);

// Robust click-outside detection with cross-platform support
useEffect(() => {
    const container = searchContainerRef.current;
    if (!container || !isAutocompleteListVisible) {
        return;
    }

    const handlePointerDown = (event: PointerEvent) => {
        // Use composedPath for accurate element detection in complex DOM structures
        const path = event.composedPath();
        const isOutsideContainer = !path.some((element) =>
            element === container ||
            (element as Element)?.contains?.(container as any)
        );

        if (isOutsideContainer) {
            // Small delay prevents accidental closes during focus transitions
            const timeoutId = setTimeout(() => {
                if (isAutocompleteListVisible) {
                    setIsAutocompleteListVisible(false);
                }
            }, 50);

            // Store timeout for cleanup if needed
            (event as any)._autocompleteTimeout = timeoutId;
        }
    };

    // Use pointer events for mouse, touch, and pen support
    document.addEventListener('pointerdown', handlePointerDown, { passive: true });
    return () => {
        document.removeEventListener('pointerdown', handlePointerDown);
    };
}, [isAutocompleteListVisible]);

Remove the onBlur prop from SearchInputSelectionWrapper:

SearchPageHeaderInput.tsxLines 444-465
<SearchInputSelectionWrapper
    value={textInputValue}
    onSearchQueryChange={onSearchQueryChange}
    isFullWidth
    onSubmit={() => {
        const focusedOption = listRef.current?.getFocusedOption();
        if (focusedOption) {
            return;
        }
        submitSearch(textInputValue);
    }}
    autoFocus={false}
    onFocus={showAutocompleteList}
    wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}}
    wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
    outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
    autocompleteListRef={listRef}
    ref={textInputRef}
    selection={selection}
    substitutionMap={autocompleteSubstitutions}
/>

Add the ref to the search container View:

SearchPageHeaderInput.tsxLines 437-488
return (
    <View style={[styles.flexRow, styles.alignItemsCenter, styles.zIndex10, styles.mr3]}>
        <View
            dataSet={{dragArea: false}}
            style={[styles.searchResultsHeaderBar, styles.flex1, isAutocompleteListVisible && styles.pr1, isAutocompleteListVisible && styles.pl3]}
        >
            <View
                style={[styles.appBG, ...autocompleteInputStyle]}
                ref={searchContainerRef}
            >
                <View style={[styles.flex1]}>
                    <SearchInputSelectionWrapper
                        value={textInputValue}
                        onSearchQueryChange={onSearchQueryChange}
                        isFullWidth
                        onSubmit={() => {
                            const focusedOption = listRef.current?.getFocusedOption();
                            if (focusedOption) {
                                return;
                            }
                            submitSearch(textInputValue);
                        }}
                        autoFocus={false}
                        onFocus={showAutocompleteList}
                        wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}}
                        wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
                        outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
                        autocompleteListRef={listRef}
                        ref={textInputRef}
                        selection={selection}
                        substitutionMap={autocompleteSubstitutions}
                    />
                </View>
                {isAutocompleteListVisible && (
                    <View style={[styles.mh65vh]}>
                        <SearchAutocompleteList
                            autocompleteQueryValue={autocompleteQueryValue}
                            handleSearch={handleSearchAction}
                            searchQueryItem={searchQueryItem}
                            onListItemPress={onListItemPress}
                            setTextQuery={setTextAndUpdateSelection}
                            updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
                            ref={listRef}
                            shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible}
                            personalDetails={personalDetails}
                            reports={reports}
                            allCards={allCards}
                            allFeeds={allFeeds}
                        />
                    </View>
                )}
            </View>
        </View>
        <SidePanelButton style={styles.mt1Half} />
    </View>
);

What alternative solutions did you explore? (Optional)

• Mousedown-only detection: Doesn't support touch/pen interactions

[MobileMage]

Proposal

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

When using keyboard arrow keys to navigate through autocomplete suggestions in the Reports search, the autocomplete dropdown closes immediately instead of allowing navigation through the suggestions.

What is the root cause of that problem?

In src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx, the text input's onBlur handler unconditionally calls hideAutocompleteList(). When pressing arrow keys, the browser fires a blur event on the input before keyboard navigation can process, causing the dropdown to close prematurely.

The problematic code (lines 456-457):

onFocus={showAutocompleteList}
onBlur={hideAutocompleteList}

The blur handler doesn't check whether focus is moving to an element within the autocomplete container (like a list item) versus outside of it entirely.

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

Add a container ref to the autocomplete wrapper and modify the onBlur handler to check event.relatedTarget before hiding the list. Only hide the autocomplete if focus moves outside the container.

This pattern already exists in the codebase - the AddressSearch component uses the isCurrentTargetInsideContainer helper for the same purpose:

// From src/components/AddressSearch/isCurrentTargetInsideContainer.ts (lines 7-11)
if (!containerRef.current || !event.target || !('relatedTarget' in event) || !('contains' in containerRef.current)) {
    return false;
}
return !!containerRef.current.contains(event.relatedTarget as Node);

Changes required:

1. Add a container ref for the autocomplete wrapper
2. Modify hideAutocompleteList to accept the blur event and check relatedTarget:

const hideAutocompleteList = (event?: NativeSyntheticEvent<TargetedEvent> | React.FocusEvent) => {
    const relatedTarget = event && 'relatedTarget' in event ? event.relatedTarget : null;
    if (
        relatedTarget &&
        autocompleteContainerRef.current &&
        'contains' in autocompleteContainerRef.current &&
        (autocompleteContainerRef.current as unknown as HTMLElement).contains(relatedTarget as Node)
    ) {
        return;
    }
    setIsAutocompleteListVisible(false);
};

3. Update onBlur to pass the event: onBlur={(event) => hideAutocompleteList(event)}
4. Update SearchAutocompleteInput to pass the blur event through to consumers

Video demonstration

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• Pressing arrow down while focused on search input should highlight the next autocomplete suggestion without closing the dropdown
• Pressing arrow up should navigate up through suggestions without closing the dropdown

What alternative solutions did you explore? (Optional)

• Click-outside detection with document listeners: Other proposals suggest using mousedown/pointerdown event listeners on document. However, this is unnecessary overhead since the browser already provides relatedTarget for exactly this purpose.
• setTimeout to delay hiding: This would be a hack and could cause race conditions.

[Eskalifer1]

Proposal

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

Web - User can't navigate through the autocomplete suggestion list using the keyboard

What is the root cause of that problem?

The problem is that when you click the up or down arrow, the input executes onBlur, and this behavior should not occur because it causes the autocomplete window to appear, and if the input is blurred, the window closes, as can be seen in the video in OP.

The problem is that we pass syncFocus here as a true value:

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Line 701 in 1fc1442

shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current}

As you can see, there are two values here, one of which reflects whether the input is focused, and the other whether the button was pressed. If the second value is controlled correctly, namely here:

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Lines 435 to 452 in 1fc1442

	const [focusedIndex, setFocusedIndex, currentHoverIndexRef] = useArrowKeyFocusManager({
	initialFocusedIndex: flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey),
	maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage - 1),
	disabledIndexes: disabledArrowKeyIndexes,
	isActive: shouldSubscribeToArrowKeyEvents && isFocused,
	onFocusedIndexChange: (index: number) => {
	const focusedItem = flattenedSections.allOptions.at(index);
	if (focusedItem) {
	onArrowFocus(focusedItem);
	}
	if (shouldScrollToFocusedIndex) {
	(shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
	}
	},
	setHasKeyBeenPressed,
	isFocused,
	onArrowUpDownCallback,
	});

Then the first value shows whether the input is focused, and there is a problem here, because its value is always false, as it is controlled by this ref:

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Line 190 in 1fc1442

const isTextInputFocusedRef = useRef<boolean>(false);

Which is responsible for the input, which in the case of the Search page is not rendered:

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Line 1022 in 1fc1442

{shouldShowTextInput && !shouldShowTextInputAfterHeader && renderInput()}

Since the value is true, we have a hook here:

App/src/components/SelectionListWithSections/BaseListItem.tsx

Line 62 in 1fc1442

useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);

The selected element is focused (since the value is true, which means that the input is not focused)

App/src/hooks/useSyncFocus/useSyncFocusImplementation.ts

Lines 24 to 36 in 1fc1442

	useLayoutEffect(() => {
	if (isFocused) {
	focusedItemRef = ref.current;
	}
	if (!isFocused || !shouldSyncFocus || !didScreenTransitionEnd) {
	return;
	}
	ref.current?.focus({preventScroll: true});
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [didScreenTransitionEnd, isFocused, ref]);
	};

And since two elements cannot be in focus at the same time, the input on the page becomes blurred, which leads to this behavior.

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

We need to pass a state that shows that some other input is in focus, and if this value is not undefined, then use it.

For example, this can be done as follows:

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Line 701 in 1fc1442

shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current}

shouldSyncFocus={(isParentTextInputFocused === undefined ? !isTextInputFocusedRef.current : !isParentTextInputFocused) && hasKeyBeenPressed.current}

And pass this value to props and pass it through components, starting from here:

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 469 to 482 in 1fc1442

	<SearchAutocompleteList
	autocompleteQueryValue={autocompleteQueryValue}
	handleSearch={handleSearchAction}
	searchQueryItem={searchQueryItem}
	onListItemPress={onListItemPress}
	setTextQuery={setTextAndUpdateSelection}
	updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
	ref={listRef}
	shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible}
	personalDetails={personalDetails}
	reports={reports}
	allCards={allCards}
	allFeeds={allFeeds}
	/>

Here, we can pass this value as true, since we only render this component when the input is in focus.

PS: On mobile devices, we can see that the SearchAutocomplete input is always displayed, unlike on PCs, where the list is not shown when the input is not focused. However, we still have the same problem that the input loses focus. You can check this by opening this page on a PC, but reducing the size to 700px. so we can add this fix to phones as well, if necessary.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[sohrabq]

Proposal

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

Web - User can't navigate through the autocomplete suggestion list using the keyboard

What is the root cause of that problem?

The issue was in SearchPageHeaderInput.tsx. The onBlur handler was immediately hiding the autocomplete list when the text input lost focus. When users pressed arrow keys to navigate the autocomplete suggestions, the input was briefly losing focus, which triggered the blur event and immediately closed the autocomplete list.

The root cause was a race condition between the blur event and keyboard navigation.

• Immediate blur handler The text input had onBlur={hideAutocompleteList} which immediately called setIsAutocompleteListVisible(false) when the input lost focus.
• Arrow keys triggering blur When users pressed arrow up/down keys to navigate the autocomplete suggestions, the text input briefly lost focus, triggering the blur event.
• List closing before navigation - The blur handler executed immediately and closed the autocomplete list before the keyboard navigation (handled by useArrowKeyFocusManager and the SelectionList component) could complete.

The fundamental problem was that the code didn't distinguish between:
Intentional blur (user clicking outside, pressing Escape, etc.) → should close the list
Temporary blur during keyboard navigation → should keep the list open

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

We make three specific code changes to SearchPageHeaderInput.tsx:

1. Added a ref to track the timeout:
   const hideAutocompleteTimeoutRef = useRef<NodeJS.Timeout | null>(null);
2. Modified the hideAutocompleteList function from:
   const hideAutocompleteList = () => setIsAutocompleteListVisible(false);
   To:

const hideAutocompleteList = useCallback(() => {
    // Clear any existing timeout
    if (hideAutocompleteTimeoutRef.current) {
        clearTimeout(hideAutocompleteTimeoutRef.current);
    }
    
    // Add a small delay to prevent hiding the list when navigating with arrow keys
    hideAutocompleteTimeoutRef.current = setTimeout(() => {
        // Only hide if the input is truly blurred
        if (!textInputRef.current?.isFocused() && !listRef.current?.getFocusedOption()) {
            setIsAutocompleteListVisible(false);
        }
        hideAutocompleteTimeoutRef.current = null;
    }, 0);
}, []);

3. Added cleanup in the mount effect:

useEffect(() => {
    hasMountedRef.current = true;
    
    // Cleanup timeout on unmount
    return () => {
        if (hideAutocompleteTimeoutRef.current) {
            clearTimeout(hideAutocompleteTimeoutRef.current);
        }
    };
}, []);

The key change is wrapping the hide logic in setTimeout and adding conditional checks to verify focus is truly gone before hiding the list.

[melvin-bot]

📣 @sohrabq! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[bernhardoj]

Proposal

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

Can't navigate with keyboard on the autocomplete suggestion list.

What is the root cause of that problem?

When we navigate with keyboard, it will highlight the item and also focus the item. This means the input will be blurred and currently we close the list when the input is blurred.

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Line 457 in 1769b5d

onBlur={hideAutocompleteList}

also focus the item

However, this actually shouldn't happen because we already prevent it if isTextInputFocusedRef is true.

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Line 701 in 1769b5d

shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current}

It's set to true when the input in the selection list component is focused.

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Line 757 in 1769b5d

onFocus={() => (isTextInputFocusedRef.current = true)}

But for the autocomplete list, we use an "external" input.

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 444 to 472 in 1769b5d

	<SearchInputSelectionWrapper
	value={textInputValue}
	onSearchQueryChange={onSearchQueryChange}
	isFullWidth
	onSubmit={() => {
	const focusedOption = listRef.current?.getFocusedOption();
	if (focusedOption) {
	return;
	}
	submitSearch(textInputValue);
	}}
	autoFocus={false}
	onFocus={showAutocompleteList}
	onBlur={hideAutocompleteList}
	wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}}
	wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
	outerWrapperStyle={[inputWrapperActiveStyle, styles.pb2]}
	autocompleteListRef={listRef}
	ref={textInputRef}
	selection={selection}
	substitutionMap={autocompleteSubstitutions}
	/>
	</View>
	{isAutocompleteListVisible && (
	<View style={[styles.mh65vh]}>
	<SearchAutocompleteList
	autocompleteQueryValue={autocompleteQueryValue}
	handleSearch={handleSearchAction}
	searchQueryItem={searchQueryItem}

But again, we already exposes a function through ref to set the isTextInputFocusedRef externally.

App/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

Lines 948 to 954 in 1769b5d

	* Handles isTextInputFocusedRef value when using external TextInput, so external TextInput does not lose focus when typing in it.
	*
	* @param isTextInputFocused - Is external TextInput focused.
	*/
	const updateExternalTextInputFocus = useCallback((isTextInputFocused: boolean) => {
	isTextInputFocusedRef.current = isTextInputFocused;
	}, []);

And we already did it.

App/src/components/Search/SearchAutocompleteInput.tsx

Lines 214 to 217 in 1769b5d

	onFocus={() => {
	onFocus?.();
	autocompleteListRef?.current?.updateExternalTextInputFocus(true);
	focusedSharedValue.set(true);

However, the autocompleteListRef.current is still null. Why? Because the list is only rendered after the input is focused.

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Line 456 in 1769b5d

onFocus={showAutocompleteList}

SearchAutocompleteInput.onFocus -> updateExternalTextInputFocus (no effect, ref is null) -> SearchPageHeaderInput.onFocus -> SearchAutocompleteList is rendered (ref is set)

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

We can call updateExternalTextInputFocus again after SearchAutocompleteList is rendered.

ref={(el) => {
    listRef.current = el;
    if (el && shouldNotifiyTextInputFocus.current) {
        shouldNotifiyTextInputFocus.current = false;
        el.updateExternalTextInputFocus(true);
    }
}}

We set shouldNotifiyTextInputFocus to true once the input is focused.

NOTE: we can also prevent hiding the list if the blur is caused by an element within the search input and its list.

const hideAutocompleteList = (e) => {
    if (isCurrentTargetInsideContainer(e, containerRef)) {
        return;
    }
    setIsAutocompleteListVisible(false);
};

We set the containerRef to here

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Line 442 in 1769b5d

<View style={[styles.appBG, ...autocompleteInputStyle]}>

[annaweber830]

Proposal

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

On Inbox, when the Cmd‑K search list is open, you can press the Down Arrow to move through results. On the Reports page, Cmd‑K opens the list, but pressing Down Arrow closes it instead of navigating.

What is the root cause of that problem?

On the The Reports page, the search list closes when the input loses focus (onBlur={hideAutocompleteList}). Pressing Down Arrow moves focus from the input to the list, triggering blur and closing the list. Inbox avoids this because it uses the Cmd-K modal flow, which doesn’t close on input blur the same way.
The Reports page SearchAutocompleteList is missing the textInputRef prop. Without it, the list can’t sync focus state with the input via updateExternalTextInputFocus. The SearchAutocompleteInput component calls updateExternalTextInputFocus(true) on focus and updateExternalTextInputFocus(false) on blur to tell the list when the input is focused, so the list can prevent focus syncing that would trigger blur during arrow navigation. Without textInputRef, this mechanism doesn’t work, so arrow keys cause blur and close the list.

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 394 to 410 in 3bf7f14

	{!!searchRouterListVisible && (
	<View style={[styles.flex1]}>
	<SearchAutocompleteList
	autocompleteQueryValue={autocompleteQueryValue}
	handleSearch={handleSearchAction}
	searchQueryItem={searchQueryItem}
	onListItemPress={onListItemPress}
	setTextQuery={setTextAndUpdateSelection}
	updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
	ref={listRef}
	personalDetails={personalDetails}
	reports={reports}
	allCards={allCards}
	allFeeds={allFeeds}
	/>
	</View>
	)}

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 467 to 484 in 3bf7f14

	{isAutocompleteListVisible && (
	<View style={[styles.mh65vh]}>
	<SearchAutocompleteList
	autocompleteQueryValue={autocompleteQueryValue}
	handleSearch={handleSearchAction}
	searchQueryItem={searchQueryItem}
	onListItemPress={onListItemPress}
	setTextQuery={setTextAndUpdateSelection}
	updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
	ref={listRef}
	shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible}
	personalDetails={personalDetails}
	reports={reports}
	allCards={allCards}
	allFeeds={allFeeds}
	/>
	</View>
	)}

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

Make the Reports page search list aware of (and linked to) the search input focus, so ArrowUp/ArrowDown navigation does not blur the input and therefore does not close the list. Practically: pass the Reports page search input reference into the list component so it can keep focus state in sync while navigating with arrow keys.

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 394 to 410 in 3bf7f14

	{!!searchRouterListVisible && (
	<View style={[styles.flex1]}>
	<SearchAutocompleteList
	autocompleteQueryValue={autocompleteQueryValue}
	handleSearch={handleSearchAction}
	searchQueryItem={searchQueryItem}
	onListItemPress={onListItemPress}
	setTextQuery={setTextAndUpdateSelection}
	updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
	ref={listRef}
	personalDetails={personalDetails}
	reports={reports}
	allCards={allCards}
	allFeeds={allFeeds}
	/>
	</View>
	)}

{!!searchRouterListVisible && (
                        <View style={[styles.flex1]}>
                            <SearchAutocompleteList
                                autocompleteQueryValue={autocompleteQueryValue}
                                handleSearch={handleSearchAction}
                                searchQueryItem={searchQueryItem}
                                onListItemPress={onListItemPress}
                                setTextQuery={setTextAndUpdateSelection}
                                updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
                                ref={listRef}
                                textInputRef={textInputRef}
                                personalDetails={personalDetails}
                                reports={reports}
                                allCards={allCards}
                                allFeeds={allFeeds}
                            />
                        </View>
                    )}

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 467 to 484 in 3bf7f14

	{isAutocompleteListVisible && (
	<View style={[styles.mh65vh]}>
	<SearchAutocompleteList
	autocompleteQueryValue={autocompleteQueryValue}
	handleSearch={handleSearchAction}
	searchQueryItem={searchQueryItem}
	onListItemPress={onListItemPress}
	setTextQuery={setTextAndUpdateSelection}
	updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
	ref={listRef}
	shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible}
	personalDetails={personalDetails}
	reports={reports}
	allCards={allCards}
	allFeeds={allFeeds}
	/>
	</View>
	)}

{isAutocompleteListVisible && (
                        <View style={[styles.mh65vh]}>
                            <SearchAutocompleteList
                                autocompleteQueryValue={autocompleteQueryValue}
                                handleSearch={handleSearchAction}
                                searchQueryItem={searchQueryItem}
                                onListItemPress={onListItemPress}
                                setTextQuery={setTextAndUpdateSelection}
                                updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
                                ref={listRef}
                                textInputRef={textInputRef}
                                shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible}
                                personalDetails={personalDetails}
                                reports={reports}
                                allCards={allCards}
                                allFeeds={allFeeds}
                            />
                        </View>
                    )}

What alternative solutions did you explore? (Optional)

[iwiznia]

@greg-schroeder why is this issue in this state? Seems like it's in limbo without a C+ assigned.