Added OnKeyDown

jest.config.js

@@ -1,6 +1,27 @@
+/** @type {import('jest').Config} */
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
+
+  // Transform ESM modules like react-markdown
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest',
+  },
+
+  transformIgnorePatterns: [
+    '/node_modules/(?!(react-markdown|remark-gfm|rehype-raw)/)', // allow ESM modules
+  ],
+
+  testMatch: [
+    '**/__testing__/**/*.test.(ts|tsx|js|jsx)',
+    '**/?(*.)+(spec|test).(ts|tsx|js|jsx)'
+  ],
+
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+
+  // Remove deprecated globals config
+  globals: {},
+
   coverageThreshold: {
     global: {
       branches: 80,

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,13 +85,14 @@ 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 theme = useTheme();
 
-  // Debounce the onSearch function
+  // Debounce the onSearch function for normal typing
   const debouncedOnSearch = useCallback(
     debounce((value) => {
       onSearch(value);
@@ -130,15 +132,27 @@ function SearchBar({
     }
   };
 
+  // ✅ New unified keyDown handler
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    // Call external onKeyDown if provided
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+
+    // Trigger onSearch immediately when Enter is pressed
+    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);
         }
@@ -149,10 +163,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} // <-- updated handler
             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>}
+  />
+
   );
 }
 

src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';