Keyboard Navigation Closes Command-K Search on Reports Page

[m-natarajan]

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.99-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation (hyperlinked to channel name): #Quality

Action Performed:

1. Navigate to Inbox
2. Press Command + K to open the search list
3. Press the Down Arrow key
4. Observe that focus moves through the list correctly
5. Navigate to Reports
6. Press Command + K to open the search list
7. Press the Down Arrow key

Expected Result:

Pressing the Down Arrow should move focus through the search results, just like in Inbox
Keyboard navigation behavior should be consistent across pages

Actual Result:

Pressing the Down Arrow immediately closes the search list on the Reports page
No keyboard navigation is possible

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Recording.2182.mp4

View all open jobs on GitHub

[melvin-bot]

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

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

[nyomanjyotisa]

I think this is a dupe of #79102