Merge pull request #2191 from inertiajs/fix-url-not-updating-after-sc…

…roll Fix for scroll + back bug
inertiajs · Jan 15, 2025 · 0021d16 · 0021d16
2 parents 79485d9 + 6f9199e
commit 0021d16
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 17 deletions.
diff --git a/packages/core/src/eventHandler.ts b/packages/core/src/eventHandler.ts
@@ -77,24 +77,21 @@ class EventHandler {
       return
     }
 
-    if (history.isValidState(state)) {
-      history
-        .decrypt(state.page)
-        .then((data) => {
-          currentPage.setQuietly(data, { preserveState: false }).then(() => {
-            Scroll.restore(history.getScrollRegions())
-            Scroll.restoreDocument()
-            fireNavigateEvent(currentPage.get())
-          })
-        })
-        .catch(() => {
-          this.onMissingHistoryItem()
-        })
-
-      return
+    if (!history.isValidState(state)) {
+      return this.onMissingHistoryItem()
     }
 
-    this.onMissingHistoryItem()
+    history
+      .decrypt(state.page)
+      .then((data) => {
+        currentPage.setQuietly(data, { preserveState: false }).then(() => {
+          Scroll.restore(history.getScrollRegions())
+          fireNavigateEvent(currentPage.get())
+        })
+      })
+      .catch(() => {
+        this.onMissingHistoryItem()
+      })
   }
 }
 

diff --git a/packages/core/src/history.ts b/packages/core/src/history.ts
@@ -200,6 +200,10 @@ class History {
     SessionStorage.remove(historySessionStorageKeys.iv)
   }
 
+  public setCurrent(page: Page): void {
+    this.current = page
+  }
+
   public isValidState(state: any): boolean {
     return !!state.page
   }

diff --git a/packages/core/src/page.ts b/packages/core/src/page.ts
@@ -105,6 +105,7 @@ class CurrentPage {
     return this.resolve(page.component).then((component) => {
       this.page = page
       this.cleared = false
+      history.setCurrent(page)
       return this.swap({ component, page, preserveState })
     })
   }

diff --git a/packages/vue3/test-app/Pages/History/Page.vue b/packages/vue3/test-app/Pages/History/Page.vue
@@ -15,4 +15,6 @@ defineProps<{ pageNumber: number; multiByte: string }>()
 
   <div>This is page {{ pageNumber }}.</div>
   <div>Multi byte character: {{ multiByte }}</div>
+
+  <div style="height: 5000px"></div>
 </template>
diff --git a/tests/history.spec.ts b/tests/history.spec.ts
@@ -106,7 +106,7 @@ test('history can be cleared via props', async ({ page }) => {
   await expect(requests.requests).toHaveLength(1)
 })
 
-test('multi byte strings can be encrypyed', async ({ page }) => {
+test('multi byte strings can be encrypted', async ({ page }) => {
   await clickAndWaitForResponse(page, 'Page 5', '/history/5')
   const historyState5 = await page.evaluate(() => window.history.state)
   // When history is encrypted, the page is an ArrayBuffer,
@@ -127,3 +127,14 @@ test('multi byte strings can be encrypyed', async ({ page }) => {
   await expect(requests.requests).toHaveLength(0)
   await expect(page.getByText('Multi byte character: 😃')).toBeVisible()
 })
+
+test('url will update after scrolling and pressing back', async ({ page }) => {
+  // Weird bug that surfaced after setting scroll restoration to manual
+  await page.waitForURL('/history/1')
+  await clickAndWaitForResponse(page, 'Page 5', '/history/5')
+  await page.evaluate(() => (window as any).scrollTo(0, 1000))
+  await page.goBack()
+  await page.waitForURL('/history/1')
+  await page.waitForTimeout(200)
+  await page.waitForURL('/history/1')
+})