Skip to content

Add Esc key behavior to Reports search similar to SearchRouter #81072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carlosmiceli wants to merge 5 commits into
base: main
Choose a base branch
from
+15 −1
Open

Add Esc key behavior to Reports search similar to SearchRouter #81072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c0f6dc7
add escape key behavior to Search Page bar
carlosmiceli Jan 30, 2026
929027e
change method for onKeyPress
carlosmiceli Jan 31, 2026
46b12fe
prettier
carlosmiceli Jan 31, 2026
60e644f
lint
carlosmiceli Jan 31, 2026
adaed02
thought I commited this, prettier again
carlosmiceli Jan 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Search/SearchAutocompleteInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ type SearchAutocompleteInputProps = {

/** Reference to the outer element */
ref?: ForwardedRef<BaseTextInputRef>;
} & Pick<TextInputProps, 'caretHidden' | 'autoFocus' | 'selection'>;
} & Pick<TextInputProps, 'caretHidden' | 'autoFocus' | 'selection' | 'onKeyPress'>;

function SearchAutocompleteInput({
value,
Expand All @@ -94,6 +94,7 @@ function SearchAutocompleteInput({
isSearchingForReports,
selection,
substitutionMap,
onKeyPress,
ref,
}: SearchAutocompleteInputProps) {
const styles = useThemeStyles();
Expand Down Expand Up @@ -223,6 +224,7 @@ function SearchAutocompleteInput({

onBlur?.();
}}
onKeyPress={onKeyPress}
isLoading={isSearchingForReports}
ref={(element) => {
if (!ref) {
Expand Down
12 changes: 12 additions & 0 deletions src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {accountIDSelector} from '@selectors/Session';
import {deepEqual} from 'fast-equals';
import isEmpty from 'lodash/isEmpty';
import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
import type {TextInputKeyPressEvent} from 'react-native';
import {View} from 'react-native';
import Animated from 'react-native-reanimated';
import {usePersonalDetails} from '@components/OnyxListItemProvider';
Expand Down Expand Up @@ -131,6 +132,15 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const handleKeyPress = useCallback((e: TextInputKeyPressEvent) => {
const keyEvent = e as unknown as KeyboardEvent;

if (keyEvent.key === CONST.KEYBOARD_SHORTCUTS.ESCAPE.shortcutKey && textInputRef.current?.isFocused()) {
keyEvent.preventDefault();
textInputRef.current.blur();
}
}, []);

const handleSearchAction = useCallback(
(value: string) => {
// Skip calling handleSearch on the initial mount
Expand Down Expand Up @@ -377,6 +387,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
autocompleteListRef={listRef}
ref={textInputRef}
onKeyPress={handleKeyPress}
/>
</Animated.View>
{showPopupButton && (
Expand Down Expand Up @@ -457,6 +468,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo
ref={textInputRef}
selection={selection}
substitutionMap={autocompleteSubstitutions}
onKeyPress={handleKeyPress}
/>
</View>
{isAutocompleteListVisible && (
Expand Down
Loading