feat(searchbar): Added OnKeyDown functionality to Searchbars

Signed-off-by: Muhammad Moinuddin <[email protected]>
layer5io · Aug 16, 2024 · df5187a · df5187a
1 parent 8eed0c2
commit df5187a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx
@@ -62,14 +62,16 @@ export interface SearchBarProps {
   onClear?: () => void;
   expanded: boolean;
   setExpanded: (expanded: boolean) => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 function SearchBar({
   onSearch,
   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
@@ -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'