Merge branch 'main' into component-social-media

OWASP · Mar 2, 2025 · a3254fc · a3254fc
2 parents 81b9410 + 7996008
commit a3254fc
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/frontend/src/components/MultiSearch.tsx b/frontend/src/components/MultiSearch.tsx
@@ -33,6 +33,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
   const pageCount = 1
   const suggestionCount = 3
   const searchBarRef = useRef<HTMLDivElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
 
   const debouncedSearch = useMemo(
     () =>
@@ -87,6 +88,7 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         setShowSuggestions(false)
+        inputRef.current?.blur()
       } else if (event.key === 'Enter' && highlightedIndex !== null) {
         const { index, subIndex } = highlightedIndex
         const suggestion = suggestions[index].hits[subIndex]
@@ -154,6 +156,14 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
     setHighlightedIndex(null)
   }
 
+  const handleFocusSearch = () => {
+    if (searchQuery.trim().length > 0 && !showSuggestions) {
+      setShowSuggestions(true)
+    } else {
+      setHighlightedIndex(null)
+    }
+  }
+
   const getIconForIndex = (indexName: string) => {
     switch (indexName) {
       case 'chapters':
@@ -179,7 +189,9 @@ const MultiSearchBar: React.FC<MultiSearchBarProps> = ({
             <input
               type="text"
               value={searchQuery}
+              ref={inputRef}
               onChange={handleSearchChange}
+              onFocus={handleFocusSearch}
               placeholder={placeholder}
               className="h-12 w-full rounded-lg border border-gray-300 pl-10 pr-10 text-lg text-black focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-white dark:focus:border-blue-300 dark:focus:ring-blue-300"
             />