diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx
index 3f68868d..32743dca 100644
--- a/src/custom/SearchBar.tsx
+++ b/src/custom/SearchBar.tsx
@@ -62,6 +62,7 @@ export interface SearchBarProps {
   onClear?: () => void;
   expanded: boolean;
   setExpanded: (expanded: boolean) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 function SearchBar({
@@ -69,7 +70,8 @@ function SearchBar({
   placeholder,
   onClear,
   expanded,
-  setExpanded
+  setExpanded,
+  onKeyDown
 }: SearchBarProps): JSX.Element {
   const [searchText, setSearchText] = React.useState('');
   const searchRef = React.useRef<HTMLInputElement | null>(null);
@@ -131,6 +133,7 @@ function SearchBar({
             }}
             inputRef={searchRef}
             placeholder={placeholder}
+            onKeyDown={onKeyDown}
             style={{
               width: expanded ? '150px' : '0',
               opacity: expanded ? 1 : 0,
diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx
index d543bf52..841c45c9 100644
--- a/src/custom/StyledSearchBar/StyledSearchBar.tsx
+++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx
@@ -5,6 +5,7 @@ import { TextField } from '../../base/TextField';
 
 interface SearchBarProps {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   value?: string;
   width?: string;
   label: string;
@@ -13,6 +14,7 @@ interface SearchBarProps {
 
 function StyledSearchBar({
   onChange,
+  onKeyDown,
   value,
   width,
   label,
@@ -35,6 +37,7 @@ function StyledSearchBar({
           type="search"
           value={value}
           onChange={onChange}
+          onKeyDown={onKeyDown}
           sx={{
             margin: 'auto',
             height: '5ch'