From 9d9558a86a70a67a92f126c1f8a3788cd54fee9b Mon Sep 17 00:00:00 2001
From: Em Zhan <zqianem@gmail.com>
Date: Fri, 10 May 2024 20:43:04 -0500
Subject: [PATCH] fix(theme): ensure outline marker follows click

closes #3878
---
 src/client/theme-default/composables/outline.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts
index ff9eca2746ba..79466bd3b4de 100644
--- 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