From 49ff4381b3ac5342bb155d40c88ac58f66ce44d0 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Mon, 20 Apr 2026 18:38:18 +0530 Subject: [PATCH 1/4] feat: add keyboard event support to SearchBar Signed-off-by: AasthathecoderX --- src/custom/SearchBar.tsx | 26 ++++++++++---- .../StyledSearchBar/StyledSearchBar.tsx | 36 ++++++++++--------- 2 files changed, 40 insertions(+), 22 deletions(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 909b64ee3..3d9e9826c 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react-hooks/exhaustive-deps */ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import { Theme, ThemeProvider, createTheme } from '@mui/material/styles'; import debounce from 'lodash/debounce'; @@ -76,6 +75,7 @@ export interface SearchBarProps { expanded: boolean; setExpanded: (expanded: boolean) => void; 'data-testid'?: string; + onKeyDown?: (event: React.KeyboardEvent) => void; } function SearchBar({ @@ -84,7 +84,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(null); @@ -130,15 +131,27 @@ function SearchBar({ } }; + + const handleKeyDown = (event: React.KeyboardEvent) => { + + if (onKeyDown) { + onKeyDown(event); + } + + + if (event.key === 'Enter') { + onSearch(searchText); + } + }; + return ( { 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 +162,11 @@ function SearchBar({ ; endAdornment?: React.ReactNode; debounceTime?: number; + onKeyDown?: (event: React.KeyboardEvent) => 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); @@ -48,7 +51,6 @@ function StyledSearchBar({ if (value !== inputValue) { setInputValue(value); } - // eslint-disable-next-line react-hooks/exhaustive-deps }, [value]); // Create synthetic event helper @@ -87,20 +89,22 @@ function StyledSearchBar({ return ( - - - } - endAdornment={{endAdornment}} - /> + type="search" + label={label} + fullWidth + value={inputValue} + onChange={handleChange} + sx={sx} + placeholder={placeholder ?? 'Search'} + onKeyDown={onKeyDown} + startAdornment={ + + + + } + endAdornment={{endAdornment}} + /> + ); } From 9b8af0e519d458ebbfe42aae5d37a2f8e179a2bb Mon Sep 17 00:00:00 2001 From: Rajesh Nagarajan <139469505+Rajesh-Nagarajan-11@users.noreply.github.com> Date: Mon, 20 Apr 2026 18:42:30 +0530 Subject: [PATCH 2/4] Update src/custom/StyledSearchBar/StyledSearchBar.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Rajesh Nagarajan <139469505+Rajesh-Nagarajan-11@users.noreply.github.com> --- .../StyledSearchBar/StyledSearchBar.tsx | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx index 18c1b8e50..c9b7a8ebd 100644 --- a/src/custom/StyledSearchBar/StyledSearchBar.tsx +++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx @@ -89,22 +89,21 @@ function StyledSearchBar({ return ( - - - } - endAdornment={{endAdornment}} - /> - + type="search" + label={label} + fullWidth + value={inputValue} + onChange={handleChange} + sx={sx} + placeholder={placeholder ?? 'Search'} + onKeyDown={onKeyDown} + startAdornment={ + + + + } + endAdornment={{endAdornment}} + /> ); } From 97f1c3151045c3a2183f529b9ff69e4f14798ad5 Mon Sep 17 00:00:00 2001 From: Rajesh Nagarajan <139469505+Rajesh-Nagarajan-11@users.noreply.github.com> Date: Mon, 20 Apr 2026 18:42:47 +0530 Subject: [PATCH 3/4] Update src/custom/SearchBar.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: Rajesh Nagarajan <139469505+Rajesh-Nagarajan-11@users.noreply.github.com> --- src/custom/SearchBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 3d9e9826c..113e36cc6 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -162,7 +162,7 @@ function SearchBar({ Date: Mon, 20 Apr 2026 18:59:25 +0530 Subject: [PATCH 4/4] Update src/custom/SearchBar.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: AasthathecoderX --- src/custom/SearchBar.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 113e36cc6..1a0970226 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -131,14 +131,14 @@ function SearchBar({ } }; - + const handleKeyDown = (event: React.KeyboardEvent) => { - - if (onKeyDown) { - onKeyDown(event); + onKeyDown?.(event); + + if (event.defaultPrevented) { + return; } - if (event.key === 'Enter') { onSearch(searchText); }