feat: add keyboard event support to SearchBar

src/custom/SearchBar.tsx

@@ -75,6 +75,7 @@ export interface SearchBarProps {
   expanded: boolean;
   setExpanded: (expanded: boolean) => void;
   'data-testid'?: string;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => 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<HTMLInputElement | null>(null);
@@ -129,15 +131,27 @@ function SearchBar({
     }
   };
 
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+
+
+    if (event.key === 'Enter') {
+      onSearch(searchText);
+    }
+  };
+
   return (
     <ClickAwayListener
       onClickAway={(event) => {
         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({
           <TextField
             variant="standard"
             value={searchText}
-            onChange={handleSearchChange} // Updated to use the new handler
+            onChange={handleSearchChange}// Updated to use the new handler
             inputRef={searchRef}
             placeholder={placeholder}
             data-testid="searchbar-input"
+            onKeyDown={handleKeyDown} 
             style={{
               width: expanded ? '150px' : '0',
               opacity: expanded ? 1 : 0,

src/custom/StyledSearchBar/StyledSearchBar.tsx

@@ -15,6 +15,7 @@ interface SearchBarProps {
   sx?: SxProps<Theme>;
   endAdornment?: React.ReactNode;
   debounceTime?: number;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => 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);
 
@@ -86,20 +89,22 @@ function StyledSearchBar({
 
   return (
     <StyledSearchInput
-      type="search"
-      label={label}
-      fullWidth
-      value={inputValue}
-      onChange={handleChange}
-      sx={sx}
-      placeholder={placeholder ?? 'Search'}
-      startAdornment={
-        <InputAdornment position="start">
-          <SearchIcon fill={theme.palette.background.neutral?.default} />
-        </InputAdornment>
-      }
-      endAdornment={<InputAdornmentEnd position="end">{endAdornment}</InputAdornmentEnd>}
-    />
+    type="search"
+    label={label}
+    fullWidth
+    value={inputValue}
+    onChange={handleChange}
+    sx={sx}
+    placeholder={placeholder ?? 'Search'}
+    onKeyDown={onKeyDown}
+    startAdornment={
+      <InputAdornment position="start">
+        <SearchIcon fill={theme.palette.background.neutral?.default} />
+      </InputAdornment>
+    }
+    endAdornment={<InputAdornmentEnd position="end">{endAdornment}</InputAdornmentEnd>}
+  />
+
   );
 }