diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 8558b2725..b574ea411 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -1,7 +1,7 @@ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { Theme, ThemeProvider, createTheme } from '@mui/material/styles'; import debounce from 'lodash/debounce'; -import React, { useCallback } from 'react'; +import React, { useCallback, useRef } from 'react'; import { ClickAwayListener } from '../base/ClickAwayListener'; import { TextField } from '../base/TextField'; import { CloseIcon, SearchIcon } from '../icons'; @@ -75,6 +75,7 @@ export interface SearchBarProps { expanded: boolean; setExpanded: (expanded: boolean) => void; 'data-testid'?: string; + onKeyDown?: (event: React.KeyboardEvent) => void; } function SearchBar({ @@ -83,10 +84,12 @@ 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); + const searchTimeoutRef = useRef | null>(null); const theme = useTheme(); // Debounce the onSearch function @@ -129,15 +132,30 @@ function SearchBar({ } }; + const handleKeyDown = (event: React.KeyboardEvent) => { + onKeyDown?.(event); + + if (event.defaultPrevented) { + return; + } + + if (event.key === 'Enter') { + if (searchTimeoutRef.current) { + clearTimeout(searchTimeoutRef.current); + searchTimeoutRef.current = null; + } + 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 +166,11 @@ function SearchBar({ ) => void; + onKeyDown?: (event: React.KeyboardEvent) => void; value?: string; width?: string; label?: string; @@ -29,6 +30,7 @@ interface SearchBarProps { * * @param {Object} props - The component props. * @param {function} [props.onChange] - Function to handle the change event when the search input value changes. + * @param {function} [props.onKeyDown] - Function to handle keyboard events on the search input. * @param {string} [props.value] - The current value of the search input. * @param {string} [props.label] - The label for the search input. * @param {string} [props.placeholder] - The placeholder text for the search input. @@ -41,6 +43,7 @@ interface SearchBarProps { */ function StyledSearchBar({ onChange, + onKeyDown, value = '', label, sx, @@ -49,6 +52,7 @@ function StyledSearchBar({ debounceTime = 300, fullWidth = true }: SearchBarProps): JSX.Element { + const theme = useTheme(); const [inputValue, setInputValue] = useState(value); @@ -102,6 +106,7 @@ function StyledSearchBar({ onChange={handleChange} sx={sx} placeholder={placeholder ?? 'Search'} + onKeyDown={onKeyDown} startAdornment={