Refactor search suggestion keyboard interaction

src/components/widgets/search/search.jsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, Fragment, useRef } 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";
@@ -71,9 +71,6 @@ export function getStoredProvider() {
 export default function Search({ options }) {
   const { t } = useTranslation();
 
-  const searchProviderButton = useRef();
-  const comboboxOptions = useRef();
-
   const availableProviderIds = getAvailableProviderIds(options);
 
   const [query, setQuery] = useState("");
@@ -122,28 +119,28 @@ export default function Search({ options }) {
     };
   }, [selectedProvider, options, query, searchSuggestions]);
 
+  let currentSuggestion;
+
+  function doSearch(value) {
+    const q = encodeURIComponent(value);
+    const { url } = selectedProvider;
+    if (url) {
+      window.open(`${url}${q}`, options.target || "_blank");
+    } else {
+      window.open(`${options.url}${q}`, options.target || "_blank");
+    }
+
+    setQuery("");
+    currentSuggestion = null;
+  }
+
   const handleSearchKeyDown = (event) => {
-    if (event.key === "Tab" && comboboxOptions.current?.getAttribute("data-headlessui-state") === "open") {
+    const useSuggestion = searchSuggestions.length && currentSuggestion;
-      searchProviderButton.current.focus();
+    if (event.key === "Enter") {
-      event.preventDefault();
+      doSearch(useSuggestion ? currentSuggestion : event.target.value);
     }
   };
 
-  const submitCallback = useCallback(
-    (value) => {
-      const q = encodeURIComponent(value);
-      const { url } = selectedProvider;
-      if (url) {
-        window.open(`${url}${q}`, options.target || "_blank");
-      } else {
-        window.open(`${options.url}${q}`, options.target || "_blank");
-      }
-
-      setQuery("");
-    },
-    [selectedProvider, options.url, options.target],
-  );
-
   if (!availableProviderIds) {
     return null;
   }
@@ -158,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="
@@ -170,7 +167,9 @@ 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"
@@ -194,7 +193,6 @@ export default function Search({ options }) {
                   text-white font-medium text-sm
                   bg-theme-600/40 dark:bg-white/10
                   focus:ring-theme-500 dark:focus:ring-white/50"
-                  ref={searchProviderButton}
                 >
                   <selectedProvider.icon className="text-white w-3 h-3" />
                   <span className="sr-only">{t("search.search")}</span>
@@ -238,27 +236,34 @@ export default function Search({ options }) {
             </Listbox>
 
             {searchSuggestions[1]?.length > 0 && (
-              <Combobox.Options
+              <Combobox.Options className="mt-1 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/30 cursor-pointer shadow-lg">
-                className="mt-1 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/30 cursor-pointer shadow-lg"
-                ref={comboboxOptions}
-              >
                 <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}
-                        <div
+                      value={suggestion}
-                          className={classNames(
+                      onClick={() => {
-                            "px-2 py-1 rounded-md w-full flex-nowrap",
+                        doSearch(suggestion);
-                            active ? "bg-theme-300/20 dark:bg-white/10" : "",
+                      }}
-                          )}
+                      className="flex w-full"
-                        >
+                    >
-                          <span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
+                      {({ active }) => {
-                          <span className="mr-4 whitespace-pre opacity-50">
+                        if (active) currentSuggestion = suggestion;
-                            {suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
+                        return (
-                          </span>
+                          <div
-                        </div>
+                            className={classNames(
-                      )}
+                              "px-2 py-1 rounded-md w-full flex-nowrap",
+                              active ? "bg-theme-300/20 dark:bg-white/10" : "",
+                            )}
+                          >
+                            <span className="whitespace-pre">{suggestion.indexOf(query) === 0 ? query : ""}</span>
+                            <span className="mr-4 whitespace-pre opacity-50">
+                              {suggestion.indexOf(query) === 0 ? suggestion.substring(query.length) : suggestion}
+                            </span>
+                          </div>
+                        );
+                      }}
                     </Combobox.Option>
                   ))}
                 </div>