The Trans Directory
fix: search async ordering, scroll offset
+9
-8
+8
-8
quartz/components/scripts/search.inline.ts
+8
-8
quartz/components/scripts/search.inline.ts
···
224
224
225
225
if (currentHover) {
226
226
currentHover.classList.remove("focus")
227
+
currentHover.blur()
227
228
}
228
229
229
230
// If search is active, then we will render the first result and display accordingly
···
250
251
: (document.activeElement as HTMLInputElement | null)
251
252
const prevResult = currentResult?.previousElementSibling as HTMLInputElement | null
252
253
currentResult?.classList.remove("focus")
253
-
await displayPreview(prevResult)
254
254
prevResult?.focus()
255
255
currentHover = prevResult
256
+
await displayPreview(prevResult)
256
257
}
257
258
} else if (e.key === "ArrowDown" || e.key === "Tab") {
258
259
e.preventDefault()
···
264
265
: (document.getElementsByClassName("result-card")[0] as HTMLInputElement | null)
265
266
const secondResult = firstResult?.nextElementSibling as HTMLInputElement | null
266
267
firstResult?.classList.remove("focus")
267
-
await displayPreview(secondResult)
268
268
secondResult?.focus()
269
269
currentHover = secondResult
270
+
await displayPreview(secondResult)
270
271
} else {
271
272
// If an element in results-container already has focus, focus next one
272
273
const active = currentHover
···
274
275
: (document.activeElement as HTMLInputElement | null)
275
276
active?.classList.remove("focus")
276
277
const nextResult = active?.nextElementSibling as HTMLInputElement | null
277
-
await displayPreview(nextResult)
278
278
nextResult?.focus()
279
279
currentHover = nextResult
280
+
await displayPreview(nextResult)
280
281
}
281
282
}
282
283
}
···
325
326
currentHover?.classList.remove("focus")
326
327
currentHover?.blur()
327
328
const target = ev.target as HTMLInputElement
328
-
await displayPreview(target)
329
329
currentHover = target
330
330
currentHover.classList.add("focus")
331
+
await displayPreview(target)
331
332
}
332
333
333
334
async function onMouseLeave(ev: MouseEvent) {
···
405
406
async function displayPreview(el: HTMLElement | null) {
406
407
if (!searchLayout || !enablePreview || !el || !preview) return
407
408
const slug = el.id as FullSlug
408
-
el.classList.add("focus")
409
-
previewInner = document.createElement("div")
410
-
previewInner.classList.add("preview-inner")
411
409
const innerDiv = await fetchContent(slug).then((contents) =>
412
410
contents.flatMap((el) => [...highlightHTML(currentSearchTerm, el as HTMLElement).children]),
413
411
)
412
+
previewInner = document.createElement("div")
413
+
previewInner.classList.add("preview-inner")
414
414
previewInner.append(...innerDiv)
415
415
preview.replaceChildren(previewInner)
416
416
···
418
418
const highlights = [...preview.querySelectorAll(".highlight")].sort(
419
419
(a, b) => b.innerHTML.length - a.innerHTML.length,
420
420
)
421
-
highlights[0]?.scrollIntoView()
421
+
highlights[0]?.scrollIntoView({ block: "start" })
422
422
}
423
423
424
424
async function onType(e: HTMLElementEventMap["input"]) {