diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx index 173644f175e56..186086b2ecc6b 100644 --- a/src/components/Search/SearchAutocompleteInput.tsx +++ b/src/components/Search/SearchAutocompleteInput.tsx @@ -73,7 +73,7 @@ type SearchAutocompleteInputProps = { /** Reference to the outer element */ ref?: ForwardedRef; -} & Pick; +} & Pick; function SearchAutocompleteInput({ value, @@ -94,6 +94,7 @@ function SearchAutocompleteInput({ isSearchingForReports, selection, substitutionMap, + onKeyPress, ref, }: SearchAutocompleteInputProps) { const styles = useThemeStyles(); @@ -223,6 +224,7 @@ function SearchAutocompleteInput({ onBlur?.(); }} + onKeyPress={onKeyPress} isLoading={isSearchingForReports} ref={(element) => { if (!ref) { diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index 0eeaa34f1d2c2..d9cb68e267727 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -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'; @@ -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 @@ -377,6 +387,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused} autocompleteListRef={listRef} ref={textInputRef} + onKeyPress={handleKeyPress} /> {showPopupButton && ( @@ -457,6 +468,7 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo ref={textInputRef} selection={selection} substitutionMap={autocompleteSubstitutions} + onKeyPress={handleKeyPress} /> {isAutocompleteListVisible && (