Added OnKeyDown

src/custom/SearchBar.tsx

@@ -76,6 +76,7 @@ export interface SearchBarProps {
   expanded: boolean;
   setExpanded: (expanded: boolean) => void;
   'data-testid'?: string;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => 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<HTMLInputElement | null>(null);
@@ -149,10 +151,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={onKeyDown}
             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);
 
@@ -87,20 +90,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>}
+  />
+
   );
 }