fix(search): dont rely on mouse to manipulate focus

quartz/components/scripts/search.inline.ts

@@ -310,38 +310,12 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
     itemTile.href = resolveUrl(slug).toString()
     itemTile.innerHTML = `<h3>${title}</h3>${htmlTags}<p class="preview">${content}</p>`
 
-    async function onMouseEnter(ev: MouseEvent) {
+    const handler = (event: MouseEvent) => {
-      if (!ev.target) return
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
-      currentHover?.classList.remove("focus")
+      hideSearch()
-      currentHover?.blur()
-      const target = ev.target as HTMLInputElement
-      currentHover = target
-      currentHover.classList.add("focus")
-      await displayPreview(target)
     }
-
+    itemTile.addEventListener("click", handler)
-    async function onMouseLeave(ev: MouseEvent) {
+    window.addCleanup(() => itemTile.removeEventListener("click", handler))
-      if (!ev.target) return
-      const target = ev.target as HTMLElement
-      target.classList.remove("focus")
-    }
-
-    const events = [
-      ["mouseenter", onMouseEnter],
-      ["mouseleave", onMouseLeave],
-      [
-        "click",
-        (event: MouseEvent) => {
-          if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return
-          hideSearch()
-        },
-      ],
-    ] as const
-
-    events.forEach(([event, handler]) => {
-      itemTile.addEventListener(event, handler)
-      window.addCleanup(() => itemTile.removeEventListener(event, handler))
-    })
 
     return itemTile
   }

quartz/components/styles/search.scss

@@ -179,6 +179,7 @@
             outline: none;
             font-weight: inherit;
 
+            &:hover,
             &:focus,
             &.focus {
               background: var(--lightgray);