Fix: search opens when losing focus, prevent unnecessary search API calls (#2867)

Co-Authored-By: shamoon <4887959+shamoon@users.noreply.github.com>

src/components/quicklaunch.jsx

@@ -120,7 +120,7 @@ export default function QuickLaunch({
         });
 
         if (showSearchSuggestions && searchProvider.suggestionUrl) {
-          if (searchString.trim() !== searchSuggestions[0]) {
+          if (searchString.trim() !== searchSuggestions[0]?.trim()) {
             fetch(
               `/api/search/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${
                 searchProvider.name ?? "Custom"

src/components/widgets/search/search.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, Fragment } from "react";
+import { useState, useEffect, Fragment } from "react";
 import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
 import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
@@ -119,8 +119,9 @@ export default function Search({ options }) {
     };
   }, [selectedProvider, options, query, searchSuggestions]);
 
-  const submitCallback = useCallback(
+  let currentSuggestion;
-    (value) => {
+
+  function doSearch(value) {
     const q = encodeURIComponent(value);
     const { url } = selectedProvider;
     if (url) {
@@ -130,9 +131,15 @@ export default function Search({ options }) {
     }
 
     setQuery("");
-    },
+    currentSuggestion = null;
-    [selectedProvider, options.url, options.target],
+  }
-  );
+
+  const handleSearchKeyDown = (event) => {
+    const useSuggestion = searchSuggestions.length && currentSuggestion;
+    if (event.key === "Enter") {
+      doSearch(useSuggestion ? currentSuggestion : event.target.value);
+    }
+  };
 
   if (!availableProviderIds) {
     return null;
@@ -148,7 +155,7 @@ export default function Search({ options }) {
       <Raw>
         <div className="flex-col relative h-8 my-4 min-w-fit z-20">
           <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
-          <Combobox value={query} onChange={submitCallback}>
+          <Combobox value={query}>
             <Combobox.Input
               type="text"
               className="
@@ -160,13 +167,17 @@ export default function Search({ options }) {
               focus:border-theme-500 dark:focus:border-white/50
               border border-theme-300 dark:border-theme-200/50"
               placeholder={t("search.placeholder")}
-              onChange={(event) => setQuery(event.target.value)}
+              onChange={(event) => {
+                setQuery(event.target.value);
+              }}
               required
               autoCapitalize="off"
               autoCorrect="off"
               autoComplete="off"
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={options.focus}
+              onBlur={(e) => e.preventDefault()}
+              onKeyDown={handleSearchKeyDown}
             />
             <Listbox
               as="div"
@@ -229,8 +240,17 @@ export default function Search({ options }) {
                 <div className="p-1 bg-white/50 dark:bg-white/10 text-theme-900/90 dark:text-white/90 text-xs">
                   <Combobox.Option key={query} value={query} />
                   {searchSuggestions[1].map((suggestion) => (
-                    <Combobox.Option key={suggestion} value={suggestion} className="flex w-full">
+                    <Combobox.Option
-                      {({ active }) => (
+                      key={suggestion}
+                      value={suggestion}
+                      onClick={() => {
+                        doSearch(suggestion);
+                      }}
+                      className="flex w-full"
+                    >
+                      {({ active }) => {
+                        if (active) currentSuggestion = suggestion;
+                        return (
                           <div
                             className={classNames(
                               "px-2 py-1 rounded-md w-full flex-nowrap",
@@ -242,7 +262,8 @@ export default function Search({ options }) {
                               {suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
                             </span>
                           </div>
-                      )}
+                        );
+                      }}
                     </Combobox.Option>
                   ))}
                 </div>