Handle clicking items

src/components/search.jsx

@@ -12,17 +12,20 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
   const [results, setResults] = useState([]);
   const [currentItemIndex, setCurrentItemIndex] = useState(null);
 
+  function resetAndClose() {
+    setSearchString("");
+    close(false);
+  }
+
   function handleSearchChange(event) {
     setSearchString(event.target.value.toLowerCase())
   }
 
   function handleSearchKeyDown(event) {
     if (event.key === "Escape") {
-      setSearchString("");
+      resetAndClose();
-      close(false);
     } else if (event.key === "Enter" && results.length) {
-      setSearchString("");
+      resetAndClose();
-      close(false);
       const result = results[currentItemIndex];
       window.open(result.href, '_blank');
     } else if (event.key === "ArrowDown" && results[currentItemIndex + 1]) {
@@ -34,6 +37,10 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
     }
   }
 
+  function handleItemClick() {
+    resetAndClose();
+  }
+
   useEffect(() => {
     if (searchString.length === 0) setResults([]);
     else {
@@ -76,18 +83,20 @@ export default function HomepageSearch({bookmarksAndServices, searchString, setS
               )} type="text" ref={searchField} value={searchString} onChange={handleSearchChange} onKeyDown={handleSearchKeyDown} />
             {results.length > 0 && <ul className="max-h-[60vh] overflow-y-auto">
               {results.map((r, i) => (
-                <li className={classNames(
+                <li key={r.name}>
-                  i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
+                  <a className={classNames(
-                  "flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30",
+                    i === currentItemIndex && "bg-theme-300/50 dark:bg-theme-700/50",
-                  )} key={r.name}>
+                    "flex flex-row items-center justify-between rounded-md text-sm md:text-xl m-2 py-2 px-4 cursor-pointer text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 hover:bg-theme-200/50 dark:hover:bg-theme-900/30",
-                  <div className="flex flex-row items-center mr-4">
+                    )} href={r.href} target="_blank" rel="noreferrer" onClick={handleItemClick}>
-                    <div className="w-5 text-xs mr-4">
+                    <div className="flex flex-row items-center mr-4">
-                      {r.icon && resolveIcon(r.icon)}
+                      <div className="w-5 text-xs mr-4">
-                      {r.abbr && r.abbr}
+                        {r.icon && resolveIcon(r.icon)}
+                        {r.abbr && r.abbr}
+                      </div>
+                      {r.name}
                     </div>
-                    {r.name}
+                    <div className="text-xs text-theme-600">{r.abbr ? t("homepagesearch.bookmark") : t("homepagesearch.service")}</div>
-                  </div>
+                  </a>
-                  <div className="text-xs text-theme-600">{r.abbr ? t("homepagesearch.bookmark") : t("homepagesearch.service")}</div>
                 </li>
               ))}
             </ul>}