From 7996008ead9a4491a1ae861a7e2e036c13672438 Mon Sep 17 00:00:00 2001
From: Yash Kumar Shrivastava <142531728+kayashth1@users.noreply.github.com>
Date: Sun, 2 Mar 2025 07:18:45 +0530
Subject: [PATCH] added focus functionality on home page search bar (#962)

* added onFocusSearch functionality

* check passed

* made suggested changes

---------

Co-authored-by: Kate Golovanova <kate@kgthreads.com>
---
 frontend/src/components/MultiSearch.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/components/MultiSearch.tsx b/frontend/src/components/MultiSearch.tsx
index 90aab9825..f5969f118 100644
--- 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"
             />