diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 909b64ee3..2f86d09a3 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -76,6 +76,7 @@ export interface SearchBarProps { expanded: boolean; setExpanded: (expanded: boolean) => void; 'data-testid'?: string; + onKeyDown?: (event: React.KeyboardEvent) => void; } function SearchBar({ @@ -84,7 +85,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); @@ -130,15 +132,27 @@ function SearchBar({ } }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + + if (onKeyDown) { + onKeyDown(event); + } + + + 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); } @@ -149,10 +163,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); @@ -87,20 +90,22 @@ function StyledSearchBar({ return ( - - - } - endAdornment={{endAdornment}} - /> + type="search" + label={label} + fullWidth + value={inputValue} + onChange={handleChange} + sx={sx} + placeholder={placeholder ?? 'Search'} + onKeyDown={onKeyDown} + startAdornment={ + + + + } + endAdornment={{endAdornment}} + /> + ); }