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 ea5336b11c4f174b4f1742d5decc1e2034cdb436..6dc06926b88755b777d5c7966d6950ce12d20694 100644 (file)
--- 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);