diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 8558b272..1a097022 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -75,6 +75,7 @@ export interface SearchBarProps { expanded: boolean; setExpanded: (expanded: boolean) => void; 'data-testid'?: string; + onKeyDown?: (event: React.KeyboardEvent) => void; } function SearchBar({ @@ -83,7 +84,8 @@ function SearchBar({ onClear, expanded, setExpanded, - 'data-testid': testId = 'search-bar-wrapper' + 'data-testid': testId = 'search-bar-wrapper', + onKeyDown }: SearchBarProps): JSX.Element { const [searchText, setSearchText] = React.useState(''); const searchRef = React.useRef(null); @@ -129,15 +131,27 @@ function SearchBar({ } }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + onKeyDown?.(event); + + if (event.defaultPrevented) { + return; + } + + if (event.key === 'Enter') { + onSearch(searchText); + } + }; + return ( { event.stopPropagation(); const isTable = (event.target as HTMLElement)?.closest('#ref'); - if (searchText !== '') { - return; - } + if (searchText !== '') return; + if (isTable) { handleClearIconClick(event as unknown as React.MouseEvent); } @@ -148,10 +162,11 @@ function SearchBar({ ; endAdornment?: React.ReactNode; debounceTime?: number; + onKeyDown?: (event: React.KeyboardEvent) => void; } /** @@ -38,8 +39,10 @@ function StyledSearchBar({ sx, placeholder, endAdornment, - debounceTime = 300 + debounceTime = 300, + onKeyDown }: SearchBarProps): JSX.Element { + const theme = useTheme(); const [inputValue, setInputValue] = useState(value); @@ -93,6 +96,7 @@ function StyledSearchBar({ onChange={handleChange} sx={sx} placeholder={placeholder ?? 'Search'} + onKeyDown={onKeyDown} startAdornment={