From a2c46f442d26fe33c9b4cc00ddb9b805363edd20 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Fri, 2 Feb 2024 10:44:19 -0800 Subject: [PATCH] fix(search): dont rely on mouse to manipulate focus --- quartz/components/scripts/search.inline.ts | 36 +++------------------- quartz/components/styles/search.scss | 1 + 2 files changed, 6 insertions(+), 31 deletions(-) diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts index 1ecf62fa4..b9b55bec6 100644 --- a/quartz/components/scripts/search.inline.ts +++ b/quartz/components/scripts/search.inline.ts @@ -310,38 +310,12 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { itemTile.href = resolveUrl(slug).toString() itemTile.innerHTML = `

${title}

${htmlTags}

${content}

` - async function onMouseEnter(ev: MouseEvent) { - if (!ev.target) return - currentHover?.classList.remove("focus") - currentHover?.blur() - const target = ev.target as HTMLInputElement - currentHover = target - currentHover.classList.add("focus") - await displayPreview(target) + const handler = (event: MouseEvent) => { + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return + hideSearch() } - - async function onMouseLeave(ev: MouseEvent) { - 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)) - }) + itemTile.addEventListener("click", handler) + window.addCleanup(() => itemTile.removeEventListener("click", handler)) return itemTile } diff --git a/quartz/components/styles/search.scss b/quartz/components/styles/search.scss index 24a72848f..9cc85dfcc 100644 --- a/quartz/components/styles/search.scss +++ b/quartz/components/styles/search.scss @@ -179,6 +179,7 @@ outline: none; font-weight: inherit; + &:hover, &:focus, &.focus { background: var(--lightgray);