From: Ardis Lu <ardisglu@gmail.com>
Date: Sat, 2 Nov 2024 06:28:04 +0000 (-0700)
Subject: Fix broken scroll position on back button
X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=91f5ce1f096d872ab25bc9be1d50669e8d3c011a;p=ardislu.dev

Fix broken scroll position on back button

Wrapping setGridRowEnd in setTimeout causes the CSS recalculation (and window height update) to occur AFTER the scroll position has already been set, which causes the scroll position to be lost. The setTimeout was only required to workaround odd timing between showSearch and showPage, which is resolved by moving setGridRowEnd to showPage.
---

diff --git a/script.js b/script.js
index ea5336b..6dc0692 100644
--- a/script.js
+++ b/script.js
@@ -223,15 +223,12 @@ globalThis.search = search;
 
 function showSearch(query) {
   if (query === '') {
-    const home = globalThis.components.get('home');
-    document.querySelector('main').replaceWith(home);
-    setTimeout(() => setGridRowEnd(home), 0);
+    showPage('/');
     return;
   }
 
   const filteredMetadata = search(query);
   const filteredHome = buildHomeComponent(filteredMetadata);
-  setTimeout(() => setGridRowEnd(filteredHome), 0);
 
   // Highlight instances of query in the text nodes of filteredHome
   const walker = document.createTreeWalker(filteredHome, NodeFilter.SHOW_TEXT);
@@ -330,7 +327,7 @@ async function showPage(path) {
 
     const home = globalThis.components.get('home');
     document.querySelector('main').replaceWith(home);
-    setTimeout(() => setGridRowEnd(home), 0); // Schedule initial grid-row-end on first page load
+    setGridRowEnd(home);
   }
   else if (path === '/search') {
     setPageMetadata({
@@ -341,6 +338,7 @@ async function showPage(path) {
     });
 
     showSearch(query); // Bypass form submission because it will set the history twice on direct link
+    setGridRowEnd(document.querySelector('main'));
   }
   else if (globalThis.metadata.has(path)) {
     const post = globalThis.metadata.get(path);