feat: add keyboard event support to SearchBar

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<HTMLInputElement>) => 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<HTMLInputElement | null>(null);
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const theme = useTheme();
 
   // Debounce the onSearch function
@@ -129,15 +132,30 @@ function SearchBar({
     }
   };
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    onKeyDown?.(event);
+
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    if (event.key === 'Enter') {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+        searchTimeoutRef.current = null;
+      }
+      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 +166,11 @@ function SearchBar({
           <TextField
             variant="standard"
             value={searchText}
-            onChange={handleSearchChange} // Updated to use the new handler
+            onChange={handleSearchChange}
             inputRef={searchRef}
             placeholder={placeholder}
             data-testid="searchbar-input"
+            onKeyDown={handleKeyDown}
             style={{
               width: expanded ? '150px' : '0',
               opacity: expanded ? 1 : 0,

src/custom/StyledSearchBar/StyledSearchBar.tsx

@@ -8,6 +8,7 @@ import { InputAdornmentEnd, StyledSearchInput } from './style';
 
 interface SearchBarProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => 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={
         <InputAdornment position="start">
           <SearchIcon fill={theme.palette.background.neutral?.default} />