[1.x] Fix history navigation issue (#1992)

* Fix history navigation issue * Support SSR * Update changelog
inertiajs · Oct 1, 2024 · 8d27e5c · 8d27e5c
1 parent 11868a4
commit 8d27e5c
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,7 +20,7 @@ For changes prior to v1.0.0, see the [legacy releases](https://legacy.inertiajs.
 - Use updater function in `setData` in `useForm` hook in React adapter ([#1859](https://github.com/inertiajs/inertia/pull/1859))
 
 ### Fixed
-- Fix history navigation issue on Chrome iOS ([#1984](https://github.com/inertiajs/inertia/pull/1984))
+- Fix history navigation issue on Chrome iOS ([#1984](https://github.com/inertiajs/inertia/pull/1984), [#1992](https://github.com/inertiajs/inertia/pull/1992))
 - Fix `setNavigationType` for Safari 10 ([#1957](https://github.com/inertiajs/inertia/pull/1957))
 - Export `InertiaFormProps` in all adapters ([#1596](https://github.com/inertiajs/inertia/pull/1596), [#1734](https://github.com/inertiajs/inertia/pull/1734))
 - Fix `isDirty` after `form.defaults()` call in Vue 3 ([#1985](https://github.com/inertiajs/inertia/pull/1985))

diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts
@@ -32,6 +32,7 @@ import {
 import { hrefToUrl, mergeDataIntoQueryString, urlWithoutHash } from './url'
 
 const isServer = typeof window === 'undefined'
+const isChromeIOS = !isServer && /CriOS/.test(window.navigator.userAgent)
 const cloneSerializable = <T>(obj: T): T => JSON.parse(JSON.stringify(obj))
 const nextFrame = (callback: () => void) => {
   requestAnimationFrame(() => {
@@ -494,14 +495,24 @@ export class Router {
 
   protected pushState(page: Page): void {
     this.page = page
-    // Defer history.pushState to the next event loop tick to prevent timing conflicts.
-    // Ensure any previous history.replaceState completes before pushState is executed.
-    setTimeout(() => window.history.pushState(cloneSerializable(page), '', page.url))
+    if (isChromeIOS) {
+      // Defer history.pushState to the next event loop tick to prevent timing conflicts.
+      // Ensure any previous history.replaceState completes before pushState is executed.
+      setTimeout(() => window.history.pushState(cloneSerializable(page), '', page.url))
+    } else {
+      window.history.pushState(cloneSerializable(page), '', page.url)
+    }
   }
 
   protected replaceState(page: Page): void {
     this.page = page
-    window.history.replaceState(cloneSerializable(page), '', page.url)
+    if (isChromeIOS) {
+      // Defer history.replaceState to the next event loop tick to prevent timing conflicts.
+      // Ensure any previous history.pushState completes before replaceState is executed.
+      setTimeout(() => window.history.replaceState(cloneSerializable(page), '', page.url))
+    } else {
+      window.history.replaceState(cloneSerializable(page), '', page.url)
+    }
   }
 
   protected handlePopstateEvent(event: PopStateEvent): void {