fix(popover): properly clear popover on racing fetch

Jacky Zhao

2025-04-22 6dd772bf00459fe5165140e4e756e2b3096686e8

 quartz/components/scripts/popover.inline.ts

@@ -3,12 +3,13 @@
import { fetchCanonical } from "./util"

const p = new DOMParser()
let activeAnchor: HTMLAnchorElement | null = null

async function mouseEnterHandler(
  this: HTMLAnchorElement,
  { clientX, clientY }: { clientX: number; clientY: number },
) {
  const link = this
  const link = (activeAnchor = this)
  if (link.dataset.noPopover === "true") {
    return
  }
@@ -44,10 +45,9 @@
  targetUrl.search = ""
  const popoverId = `popover-${link.pathname}`
  const prevPopoverElement = document.getElementById(popoverId)
  const hasAlreadyBeenFetched = () => !!document.getElementById(popoverId)

  // dont refetch if there's already a popover
  if (hasAlreadyBeenFetched()) {
  if (!!document.getElementById(popoverId)) {
    showPopover(prevPopoverElement as HTMLElement)
    return
  }
@@ -56,11 +56,6 @@
    console.error(err)
  })

  // bailout if another popover exists
  if (hasAlreadyBeenFetched()) {
    return
  }

  if (!response) return
  const [contentType] = response.headers.get("Content-Type")!.split(";")
  const [contentTypeCategory, typeInfo] = contentType.split("/")
@@ -107,11 +102,20 @@
      elts.forEach((elt) => popoverInner.appendChild(elt))
  }

  if (!!document.getElementById(popoverId)) {
    return
  }

  document.body.appendChild(popoverElement)
  if (activeAnchor !== this) {
    return
  }

  showPopover(popoverElement)
}

function clearActivePopover() {
  activeAnchor = null
  const allPopoverElements = document.querySelectorAll(".popover")
  allPopoverElements.forEach((popoverElement) => popoverElement.classList.remove("active-popover"))
}