fix(theme): ensure outline marker follows click

closes #3878
vuejs · May 11, 2024 · 9d9558a · 9d9558a
1 parent 99c0cec
commit 9d9558a
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts
@@ -117,10 +117,12 @@ export function useActiveAnchor(
  const onScroll = throttleAndDebounce(setActiveLink, 100)
 
  let prevActiveLink: HTMLAnchorElement | null = null
+ let ignoreScrollOnce: boolean = false
 
  onMounted(() => {
  requestAnimationFrame(setActiveLink)
  window.addEventListener('scroll', onScroll)
+ container.value.addEventListener('click', onClick)
  })
 
  onUpdated(() => {
@@ -130,13 +132,28 @@ export function useActiveAnchor(
 
  onUnmounted(() => {
  window.removeEventListener('scroll', onScroll)
+ container.value.removeEventListener('click', onClick)
  })
 
+ function onClick(e: MouseEvent) {
+ if (!isAsideEnabled.value || !(e.target instanceof HTMLAnchorElement)) {
+ return
+ }
+
+ activateLink(location.hash)
+ ignoreScrollOnce = true
+ }
+
  function setActiveLink() {
  if (!isAsideEnabled.value) {
  return
  }
 
+ if (ignoreScrollOnce) {
+ ignoreScrollOnce = false
+ return
+ }
+
  const scrollY = window.scrollY
  const innerHeight = window.innerHeight
  const offsetHeight = document.body.offsetHeight