rizaldy/rizaldy.club
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(search): null checks and focus fixes

Browse Source
This commit is contained in:
Jacky Zhao 2024-02-02 10:10:25 -08:00
parent bece8fcab6
commit 0a3379a853
1 changed files with 3 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
quartz/components/scripts/search.inline.ts
View File

@ -224,12 +224,11 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
if (currentHover) { if (currentHover) {
currentHover.classList.remove("focus") currentHover.classList.remove("focus")
currentHover.blur()
} }
// If search is active, then we will render the first result and display accordingly // If search is active, then we will render the first result and display accordingly
if (!container?.classList.contains("active")) return if (!container?.classList.contains("active")) return
else if (e.key === "Enter") { if (e.key === "Enter") {
// If result has focus, navigate to that one, otherwise pick first result // If result has focus, navigate to that one, otherwise pick first result
if (results?.contains(document.activeElement)) { if (results?.contains(document.activeElement)) {
const active = document.activeElement as HTMLInputElement const active = document.activeElement as HTMLInputElement
@ -252,7 +251,7 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
currentResult?.classList.remove("focus") currentResult?.classList.remove("focus")
prevResult?.focus() prevResult?.focus()
currentHover = prevResult if (prevResult) currentHover = prevResult
await displayPreview(prevResult) await displayPreview(prevResult)
} }
} else if (e.key === "ArrowDown" || e.key === "Tab") { } else if (e.key === "ArrowDown" || e.key === "Tab") {
@ -266,18 +265,8 @@ document.addEventListener("nav", async (e: CustomEventMap["nav"]) => {
const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
firstResult?.classList.remove("focus") firstResult?.classList.remove("focus")
secondResult?.focus() secondResult?.focus()
currentHover = secondResult if (secondResult) currentHover = secondResult
await displayPreview(secondResult) await displayPreview(secondResult)
} else {
// If an element in results-container already has focus, focus next one
const active = currentHover
? currentHover
: (document.activeElement as HTMLInputElement | null)
active?.classList.remove("focus")
const nextResult = active?.nextElementSibling as HTMLInputElement | null
nextResult?.focus()
currentHover = nextResult
await displayPreview(nextResult)
} }
} }
} }