From 29ecd58237a015e777f66464cb4319b6c6ed07eb Mon Sep 17 00:00:00 2001
From: Syed Ghufran Hassan <syedghufranhassan@gmail.com>
Date: Wed, 25 Feb 2026 19:52:13 +0500
Subject: [PATCH] feat(SearchBar): add enter-key search, read-only mode,
 focus/blur events, and maxLength support

Added Enter key support: Pressing Enter triggers onSearch immediately for faster user interaction.

Introduced read-only mode via readOnly prop:

Input is non-editable.

Clear button is hidden when in read-only mode.

Added optional maxLength prop to limit input characters.

Added focus and blur callbacks (onFocus and onBlur) for better control over input lifecycle events.

Ensured backwards compatibility:

All existing props (placeholder, debounceMs, showIcon, showClear, etc.) continue to work.

Component styling remains unchanged.

Maintains memoization and ref forwarding for optimized rendering.
---
 .../src/components/SearchBar/SearchBar.tsx    | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/SearchBar/SearchBar.tsx b/frontend/src/components/SearchBar/SearchBar.tsx
index 391ba43..d0c3a0f 100644
--- a/frontend/src/components/SearchBar/SearchBar.tsx
+++ b/frontend/src/components/SearchBar/SearchBar.tsx
@@ -17,6 +17,10 @@ export interface SearchBarProps {
   size?: 'sm' | 'md' | 'lg';
   fullWidth?: boolean;
   className?: string;
+  maxLength?: number;
+  readOnly?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
 }
 
 export const SearchBar = memo(forwardRef<HTMLDivElement, SearchBarProps>(
@@ -34,6 +38,10 @@ export const SearchBar = memo(forwardRef<HTMLDivElement, SearchBarProps>(
       size = 'md',
       fullWidth = false,
       className,
+      maxLength,
+      readOnly = false,
+      onFocus,
+      onBlur,
     },
     ref
   ) {
@@ -52,20 +60,14 @@ export const SearchBar = memo(forwardRef<HTMLDivElement, SearchBarProps>(
     const handleChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
         const newValue = e.target.value;
-
-        if (controlledValue === undefined) {
-          setInternalValue(newValue);
-        }
-
+        if (controlledValue === undefined) setInternalValue(newValue);
         onChange?.(newValue);
       },
       [controlledValue, onChange]
     );
 
     const handleClear = useCallback(() => {
-      if (controlledValue === undefined) {
-        setInternalValue('');
-      }
+      if (controlledValue === undefined) setInternalValue('');
       onChange?.('');
       onSearch?.('');
       inputRef.current?.focus();
@@ -73,11 +75,10 @@ export const SearchBar = memo(forwardRef<HTMLDivElement, SearchBarProps>(
 
     const handleKeyDown = useCallback(
       (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Escape') {
-          handleClear();
-        }
+        if (e.key === 'Escape') handleClear();
+        else if (e.key === 'Enter') onSearch?.(value);
       },
-      [handleClear]
+      [handleClear, onSearch, value]
     );
 
     const iconSize = size === 'sm' ? 14 : size === 'lg' ? 20 : 16;
@@ -109,10 +110,14 @@ export const SearchBar = memo(forwardRef<HTMLDivElement, SearchBarProps>(
           onKeyDown={handleKeyDown}
           autoFocus={autoFocus}
           disabled={disabled}
+          readOnly={readOnly}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          maxLength={maxLength}
           aria-label="Search"
         />
 
-        {showClear && value && (
+        {showClear && value && !readOnly && (
           <button
             type="button"
             className="search-bar__clear"