adding flush post, this should hopefully make the auto scrolling more reliable

Author: WilcoSp

app/components/Changelog/Markdown.vue

@@ -15,27 +15,30 @@ if (import.meta.client) {
   const { settings } = useSettings()
 
   // doing this server side can make it that we go to the homepage
-  const stopWatching = watchEffect(() => {
-    const toc = data.value?.toc
+  const stopWatching = watchEffect(
+    () => {
+      const toc = data.value?.toc
 
-    if (toc && route.hash) {
-      // scroll if there is a hash in the url
-      return navigateTo(route.hash)
-    }
+      if (toc && route.hash) {
+        // scroll if there is a hash in the url
+        return navigateTo(route.hash)
+      }
 
-    // don't allow auto scrolling when disabled and there was no hash before
-    if (!settings.value.changelogAutoScroll || !toc || !goToVersion || route.hash) {
-      return
-    }
-    // lc = lower case
-    const lcRequestedVersion = goToVersion.toLowerCase()
-    for (const item of toc) {
-      if (item.text.toLowerCase().includes(lcRequestedVersion)) {
-        navigateTo(`#${item.id}`)
+      // don't allow auto scrolling when disabled and there was no hash before
+      if (!settings.value.changelogAutoScroll || !toc || !goToVersion || route.hash) {
         return
       }
-    }
-  })
+      // lc = lower case
+      const lcRequestedVersion = goToVersion.toLowerCase()
+      for (const item of toc) {
+        if (item.text.toLowerCase().includes(lcRequestedVersion)) {
+          navigateTo(`#${item.id}`)
+          return
+        }
+      }
+    },
+    { flush: 'post' },
+  )
 
   // stops watchEffect from trigger just before navigating
   onBeforeRouteLeave(stopWatching)

app/components/Changelog/Releases.vue

@@ -30,37 +30,40 @@ if (import.meta.client) {
   const { settings } = useSettings()
 
   // doing this server side can make it that we go to the homepage
-  const stopWatching = watchEffect(() => {
-    const uReleases = releases.value
-    if (route.hash && uReleases) {
-      // scroll if there is a hash in the url
-      navigateTo(route.hash, { replace: true })
-      return
-    }
-    // don't allow auto scrolling when disabled and there was no hash before
-    if (!settings.value.changelogAutoScroll) {
-      return
-    }
-    const date = requestedDate?.toLowerCase()
-    if (route.hash || !date || !uReleases || !goToVersion) {
-      return
-    }
-    const uMatchingDateReleases = matchingDateReleases.value
-    if (uMatchingDateReleases?.length < 1) {
-      // if no releases have matched the requested version publish date then most likely no release note has been made
-      return
-    }
+  const stopWatching = watchEffect(
+    () => {
+      const uReleases = releases.value
+      if (route.hash && uReleases) {
+        // scroll if there is a hash in the url
+        navigateTo(route.hash, { replace: true })
+        return
+      }
+      // don't allow auto scrolling when disabled and there was no hash before
+      if (!settings.value.changelogAutoScroll) {
+        return
+      }
+      const date = requestedDate?.toLowerCase()
+      if (route.hash || !date || !uReleases || !goToVersion) {
+        return
+      }
+      const uMatchingDateReleases = matchingDateReleases.value
+      if (uMatchingDateReleases?.length < 1) {
+        // if no releases have matched the requested version publish date then most likely no release note has been made
+        return
+      }
 
-    if (goToVersion) {
-      for (const match of uMatchingDateReleases) {
-        if (match.title.toLowerCase().includes(goToVersion)) {
-          navigateTo(`#release-${slugify(match.title)}`, { replace: true })
-          return
+      if (goToVersion) {
+        for (const match of uMatchingDateReleases) {
+          if (match.title.toLowerCase().includes(goToVersion)) {
+            navigateTo(`#release-${slugify(match.title)}`, { replace: true })
+            return
+          }
         }
       }
-    }
-    navigateTo(`#date-${date}`, { replace: true })
-  })
+      navigateTo(`#date-${date}`, { replace: true })
+    },
+    { flush: 'post' },
+  )
   // stops watchEffect from trigger just before navigating
   onBeforeRouteLeave(stopWatching)
 }