diff --git a/packages/ui-react/src/components/Header/Header.tsx b/packages/ui-react/src/components/Header/Header.tsx index 461af7254..e3ded9202 100644 --- a/packages/ui-react/src/components/Header/Header.tsx +++ b/packages/ui-react/src/components/Header/Header.tsx @@ -103,16 +103,8 @@ const Header: React.FC = ({ return searchActive ? (
- - { - if (onCloseSearchButtonClick) { - onCloseSearchButtonClick(); - } - }} - > + +
diff --git a/packages/ui-react/src/components/SearchBar/SearchBar.tsx b/packages/ui-react/src/components/SearchBar/SearchBar.tsx index ef0e8c5fe..89c9b6d22 100644 --- a/packages/ui-react/src/components/SearchBar/SearchBar.tsx +++ b/packages/ui-react/src/components/SearchBar/SearchBar.tsx @@ -12,10 +12,11 @@ export type Props = { query?: string; onQueryChange?: (event: React.ChangeEvent) => void; onClearButtonClick?: () => void; + onClose?: () => void; inputRef?: React.MutableRefObject; }; -const SearchBar: React.FC = ({ query, onQueryChange, onClearButtonClick, inputRef }: Props) => { +const SearchBar: React.FC = ({ query, onQueryChange, onClearButtonClick, onClose, inputRef }: Props) => { const { t } = useTranslation('search'); return ( @@ -26,6 +27,7 @@ const SearchBar: React.FC = ({ query, onQueryChange, onClearButtonClick, type="text" value={query} onChange={onQueryChange} + onKeyDown={(event) => event.key === 'Escape' && onClose?.()} aria-label={t('search_bar.search_label')} placeholder={t('search_bar.search_placeholder')} ref={inputRef}