Prevent scrolling to top before page has rendered

packages/react/package.json

@@ -59,10 +59,12 @@
     "esbuild": "^0.25.12",
     "esbuild-node-externals": "^1.20.1",
     "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "@inertiajs/core": "workspace:*",

packages/react/src/App.ts

@@ -8,6 +8,7 @@ import {
   router,
 } from '@inertiajs/core'
 import { createElement, FunctionComponent, ReactNode, useEffect, useMemo, useState } from 'react'
+import { flushSync } from 'react-dom'
 import HeadContext from './HeadContext'
 import PageContext from './PageContext'
 import { LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types'
@@ -79,11 +80,13 @@ export default function App<SharedProps extends PageProps = PageProps>({
         return
       }
 
-      setCurrent((current) => ({
-        component,
-        page,
-        key: preserveState ? current.key : Date.now(),
-      }))
+      flushSync(() =>
+        setCurrent((current) => ({
+          component,
+          page,
+          key: preserveState ? current.key : Date.now(),
+        })),
+      )
     }
 
     router.on('navigate', () => headManager.forceUpdate())

packages/react/test-app/Pages/ScrollAfterRender.tsx

@@ -0,0 +1,114 @@
+import { Link } from '@inertiajs/react'
+
+let originalScrollTo: typeof window.scrollTo | null = null
+
+export default ({ page }: { page: number }) => {
+  // Patch scrollTo to log synchronously when it's called (not when the scroll event fires)
+  if (!originalScrollTo) {
+    originalScrollTo = window.scrollTo.bind(window)
+
+    window.scrollTo = ((xOrOptions: number | ScrollToOptions, y?: number) => {
+      const firstArgIsNumber = typeof xOrOptions === 'number'
+      const scrollY = firstArgIsNumber ? y : (xOrOptions?.top ?? 0)
+
+      console.log('ScrollY', scrollY)
+
+      return firstArgIsNumber ? originalScrollTo!(xOrOptions, y!) : originalScrollTo!(xOrOptions)
+    }) as typeof window.scrollTo
+  } else {
+    console.log('Render')
+  }
+
+  return (
+    <>
+      <h1 style={{ fontSize: '40px' }}>Article Header</h1>
+      <h2 style={{ fontSize: '40px' }}>Page {page}</h2>
+      <article style={{ fontSize: '20px', maxWidth: '500px' }}>
+        <p>
+          Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id
+          minim sit elit.
+        </p>
+        <Link
+          href={`/scroll-after-render/${page + 1}`}
+          style={{ display: 'block', marginTop: '20px' }}
+          onBefore={() => window.scrollTo(0, 100)}
+        >
+          Go to page {page + 1}
+        </Link>
+        {Array.from({ length: 1000 }).map(() => (
+          <div>
+            <p>
+              Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat
+              id minim sit elit. Amet pariatur occaecat pariatur duis eiusmod dolore magna. Et commodo cupidatat in
+              commodo elit cupidatat minim qui id non enim ad. Culpa aliquip ad Lorem sit consectetur ullamco culpa duis
+              nisi et fugiat mollit eiusmod. Laboris voluptate veniam consequat proident in nulla irure velit.
+            </p>
+
+            <p>
+              Sit sint laboris sunt eiusmod ipsum laborum eiusmod amet commodo exercitation in duis magna. Proident sunt
+              minim in elit qui. Id pariatur commodo fugiat excepteur in deserunt Lorem ipsum occaecat est. Excepteur
+              sit tempor ipsum ex officia veniam enim amet velit fugiat mollit cillum. Incididunt aliqua nulla id
+              occaecat nulla. Non ea ad est occaecat deserunt officia qui commodo exercitation.
+            </p>
+
+            <p>
+              Voluptate laborum quis aliqua ullamco magna amet ullamco laborum qui cillum eu. Dolore dolore aliqua
+              proident proident sunt ipsum in. Enim velit dolore labore dolor quis incididunt duis culpa Lorem. Eu
+              adipisicing non elit fugiat voluptate labore ipsum dolore consectetur commodo. Et in et cillum duis
+              consequat quis ex eu commodo. Eiusmod aliqua excepteur consectetur eiusmod aute et consectetur sit
+              pariatur dolore qui officia pariatur.
+            </p>
+
+            <p>
+              Non sunt eu mollit qui reprehenderit. Aute culpa anim voluptate do in esse duis laborum ad dolore. Ullamco
+              nisi in nostrud officia do. Duis pariatur officia id duis. Deserunt ad incididunt est sint consectetur
+              reprehenderit mollit est Lorem ea pariatur anim dolor adipisicing. Nostrud irure magna nostrud laboris
+              aute sunt veniam laboris veniam incididunt sit. Nulla proident ad aliqua fugiat culpa sunt est in dolor
+              velit ad irure nulla.
+            </p>
+
+            <p>
+              Do aute laborum deserunt non laborum voluptate voluptate. Anim ut laborum magna sunt cupidatat irure.
+              Cupidatat fugiat minim sint cillum laborum excepteur irure id est irure ad occaecat adipisicing enim.
+              Deserunt nulla anim proident velit irure nostrud est est reprehenderit consequat pariatur qui. Fugiat
+              Lorem sint eu laborum minim pariatur cillum mollit nulla consequat ullamco ex. Ex consectetur ad ut irure
+              fugiat occaecat aliqua exercitation cillum ipsum anim dolore tempor.
+            </p>
+
+            <p>
+              Adipisicing consequat irure fugiat Lorem deserunt aliquip do cupidatat. Lorem labore elit ex qui nostrud
+              qui cillum sunt adipisicing occaecat. Sunt nostrud amet amet cupidatat fugiat Lorem quis nulla id cillum
+              esse eu. Ullamco aliqua dolore irure amet mollit anim velit dolore.
+            </p>
+
+            <p>
+              Veniam cupidatat ipsum ea officia ipsum nisi laborum culpa qui dolore. Aliqua Lorem nisi labore ea velit
+              aliquip irure excepteur eu. Laboris proident duis non labore sunt quis aute tempor laboris enim anim
+              eiusmod.
+            </p>
+
+            <p>
+              Minim proident ut aliqua ea ut culpa fugiat ullamco nisi esse nostrud reprehenderit id. Id id ullamco
+              velit anim nisi magna Lorem tempor. Et veniam occaecat ut labore consequat fugiat duis.
+            </p>
+
+            <p>
+              Adipisicing ea consectetur adipisicing aute eu pariatur enim labore consequat occaecat consectetur minim
+              nisi. Cillum commodo sunt labore reprehenderit. Duis esse excepteur magna tempor eiusmod exercitation
+              Lorem reprehenderit excepteur pariatur. Esse cupidatat occaecat magna do aliquip Lorem. Consectetur
+              adipisicing consequat dolore nostrud esse eu cillum id commodo duis. Aliquip dolor cillum cupidatat
+              fugiat.
+            </p>
+
+            <p>
+              Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id
+              commodo quis enim fugiat. Sint non quis consectetur voluptate aliqua dolore nulla. Irure sit reprehenderit
+              sint laboris non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo irure et.
+              Commodo qui ipsum Lorem magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat voluptate.
+            </p>
+          </div>
+        ))}
+      </article>
+    </>
+  )
+}

packages/svelte/test-app/Pages/ScrollAfterRender.svelte

@@ -0,0 +1,110 @@
+<script context="module" lang="ts">
+  let originalScrollTo: typeof window.scrollTo | null = null
+</script>
+
+<script lang="ts">
+  import { Link } from '@inertiajs/svelte'
+
+  export let page: number
+
+  // Patch scrollTo to log synchronously when it's called (not when the scroll event fires)
+  if (!originalScrollTo) {
+    originalScrollTo = window.scrollTo.bind(window)
+
+    window.scrollTo = ((xOrOptions: number | ScrollToOptions, y?: number) => {
+      const firstArgIsNumber = typeof xOrOptions === 'number'
+      const scrollY = firstArgIsNumber ? y : (xOrOptions?.top ?? 0)
+
+      console.log('ScrollY', scrollY)
+
+      return firstArgIsNumber ? originalScrollTo!(xOrOptions, y!) : originalScrollTo!(xOrOptions)
+    }) as typeof window.scrollTo
+  } else {
+    console.log('Render')
+  }
+
+  function beforeNavigate() {
+    window.scrollTo(0, 100)
+  }
+</script>
+
+<h1 style="font-size: 40px;">Article Header</h1>
+<h2 style="font-size: 40px;">Page {page}</h2>
+<article style="font-size: 20px; max-width: 500px;">
+  <p>
+    Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id minim
+    sit elit.
+  </p>
+  <Link href={`/scroll-after-render/${page + 1}`} style="display: block; margin-top: 20px;" on:before={beforeNavigate}>
+    Go to page {page + 1}
+  </Link>
+  {#each Array.from({ length: 1000 }, (_, i) => i) as i (i)}
+    <div>
+      <p>
+        Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id
+        minim sit elit. Amet pariatur occaecat pariatur duis eiusmod dolore magna. Et commodo cupidatat in commodo elit
+        cupidatat minim qui id non enim ad. Culpa aliquip ad Lorem sit consectetur ullamco culpa duis nisi et fugiat
+        mollit eiusmod. Laboris voluptate veniam consequat proident in nulla irure velit.
+      </p>
+
+      <p>
+        Sit sint laboris sunt eiusmod ipsum laborum eiusmod amet commodo exercitation in duis magna. Proident sunt minim
+        in elit qui. Id pariatur commodo fugiat excepteur in deserunt Lorem ipsum occaecat est. Excepteur sit tempor
+        ipsum ex officia veniam enim amet velit fugiat mollit cillum. Incididunt aliqua nulla id occaecat nulla. Non ea
+        ad est occaecat deserunt officia qui commodo exercitation.
+      </p>
+
+      <p>
+        Voluptate laborum quis aliqua ullamco magna amet ullamco laborum qui cillum eu. Dolore dolore aliqua proident
+        proident sunt ipsum in. Enim velit dolore labore dolor quis incididunt duis culpa Lorem. Eu adipisicing non elit
+        fugiat voluptate labore ipsum dolore consectetur commodo. Et in et cillum duis consequat quis ex eu commodo.
+        Eiusmod aliqua excepteur consectetur eiusmod aute et consectetur sit pariatur dolore qui officia pariatur.
+      </p>
+
+      <p>
+        Non sunt eu mollit qui reprehenderit. Aute culpa anim voluptate do in esse duis laborum ad dolore. Ullamco nisi
+        in nostrud officia do. Duis pariatur officia id duis. Deserunt ad incididunt est sint consectetur reprehenderit
+        mollit est Lorem ea pariatur anim dolor adipisicing. Nostrud irure magna nostrud laboris aute sunt veniam
+        laboris veniam incididunt sit. Nulla proident ad aliqua fugiat culpa sunt est in dolor velit ad irure nulla.
+      </p>
+
+      <p>
+        Do aute laborum deserunt non laborum voluptate voluptate. Anim ut laborum magna sunt cupidatat irure. Cupidatat
+        fugiat minim sint cillum laborum excepteur irure id est irure ad occaecat adipisicing enim. Deserunt nulla anim
+        proident velit irure nostrud est est reprehenderit consequat pariatur qui. Fugiat Lorem sint eu laborum minim
+        pariatur cillum mollit nulla consequat ullamco ex. Ex consectetur ad ut irure fugiat occaecat aliqua
+        exercitation cillum ipsum anim dolore tempor.
+      </p>
+
+      <p>
+        Adipisicing consequat irure fugiat Lorem deserunt aliquip do cupidatat. Lorem labore elit ex qui nostrud qui
+        cillum sunt adipisicing occaecat. Sunt nostrud amet amet cupidatat fugiat Lorem quis nulla id cillum esse eu.
+        Ullamco aliqua dolore irure amet mollit anim velit dolore.
+      </p>
+
+      <p>
+        Veniam cupidatat ipsum ea officia ipsum nisi laborum culpa qui dolore. Aliqua Lorem nisi labore ea velit aliquip
+        irure excepteur eu. Laboris proident duis non labore sunt quis aute tempor laboris enim anim eiusmod.
+      </p>
+
+      <p>
+        Minim proident ut aliqua ea ut culpa fugiat ullamco nisi esse nostrud reprehenderit id. Id id ullamco velit anim
+        nisi magna Lorem tempor. Et veniam occaecat ut labore consequat fugiat duis.
+      </p>
+
+      <p>
+        Adipisicing ea consectetur adipisicing aute eu pariatur enim labore consequat occaecat consectetur minim nisi.
+        Cillum commodo sunt labore reprehenderit. Duis esse excepteur magna tempor eiusmod exercitation Lorem
+        reprehenderit excepteur pariatur. Esse cupidatat occaecat magna do aliquip Lorem. Consectetur adipisicing
+        consequat dolore nostrud esse eu cillum id commodo duis. Aliquip dolor cillum cupidatat fugiat.
+      </p>
+
+      <p>
+        Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id commodo
+        quis enim fugiat. Sint non quis consectetur voluptate aliqua dolore nulla. Irure sit reprehenderit sint laboris
+        non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo irure et. Commodo qui ipsum Lorem
+        magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat voluptate.
+      </p>
+    </div>
+  {/each}
+</article>

packages/vue3/test-app/Pages/ScrollAfterRender.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+let originalScrollTo: typeof window.scrollTo | null = null
+</script>
+
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3'
+
+defineProps<{
+  page: number
+}>()
+
+// Patch scrollTo to log synchronously when it's called (not when the scroll event fires)
+if (!originalScrollTo) {
+  originalScrollTo = window.scrollTo.bind(window)
+
+  window.scrollTo = ((xOrOptions: number | ScrollToOptions, y?: number) => {
+    const firstArgIsNumber = typeof xOrOptions === 'number'
+    const scrollY = firstArgIsNumber ? y : (xOrOptions?.top ?? 0)
+
+    console.log('ScrollY', scrollY)
+
+    return firstArgIsNumber ? originalScrollTo!(xOrOptions, y!) : originalScrollTo!(xOrOptions)
+  }) as typeof window.scrollTo
+} else {
+  console.log('Render')
+}
+
+function beforeNavigate() {
+  window.scrollTo(0, 100)
+}
+</script>
+
+<template>
+  <h1 :style="{ fontSize: '40px' }">Article Header</h1>
+  <h2 :style="{ fontSize: '40px' }">Page {{ page }}</h2>
+  <article :style="{ fontSize: '20px', maxWidth: '500px' }">
+    <p>
+      Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id
+      minim sit elit.
+    </p>
+    <Link
+      :href="`/scroll-after-render/${page + 1}`"
+      :style="{ display: 'block', marginTop: '20px' }"
+      @before="beforeNavigate"
+    >
+      Go to page {{ page + 1 }}
+    </Link>
+    <div v-for="i in [...Array(1000).keys()]" :key="i">
+      <p>
+        Sunt culpa sit sunt enim aliquip. Esse ea ea quis voluptate. Enim consectetur aliqua ex ex magna cupidatat id
+        minim sit elit. Amet pariatur occaecat pariatur duis eiusmod dolore magna. Et commodo cupidatat in commodo elit
+        cupidatat minim qui id non enim ad. Culpa aliquip ad Lorem sit consectetur ullamco culpa duis nisi et fugiat
+        mollit eiusmod. Laboris voluptate veniam consequat proident in nulla irure velit.
+      </p>
+
+      <p>
+        Sit sint laboris sunt eiusmod ipsum laborum eiusmod amet commodo exercitation in duis magna. Proident sunt minim
+        in elit qui. Id pariatur commodo fugiat excepteur in deserunt Lorem ipsum occaecat est. Excepteur sit tempor
+        ipsum ex officia veniam enim amet velit fugiat mollit cillum. Incididunt aliqua nulla id occaecat nulla. Non ea
+        ad est occaecat deserunt officia qui commodo exercitation.
+      </p>
+
+      <p>
+        Voluptate laborum quis aliqua ullamco magna amet ullamco laborum qui cillum eu. Dolore dolore aliqua proident
+        proident sunt ipsum in. Enim velit dolore labore dolor quis incididunt duis culpa Lorem. Eu adipisicing non elit
+        fugiat voluptate labore ipsum dolore consectetur commodo. Et in et cillum duis consequat quis ex eu commodo.
+        Eiusmod aliqua excepteur consectetur eiusmod aute et consectetur sit pariatur dolore qui officia pariatur.
+      </p>
+
+      <p>
+        Non sunt eu mollit qui reprehenderit. Aute culpa anim voluptate do in esse duis laborum ad dolore. Ullamco nisi
+        in nostrud officia do. Duis pariatur officia id duis. Deserunt ad incididunt est sint consectetur reprehenderit
+        mollit est Lorem ea pariatur anim dolor adipisicing. Nostrud irure magna nostrud laboris aute sunt veniam
+        laboris veniam incididunt sit. Nulla proident ad aliqua fugiat culpa sunt est in dolor velit ad irure nulla.
+      </p>
+
+      <p>
+        Do aute laborum deserunt non laborum voluptate voluptate. Anim ut laborum magna sunt cupidatat irure. Cupidatat
+        fugiat minim sint cillum laborum excepteur irure id est irure ad occaecat adipisicing enim. Deserunt nulla anim
+        proident velit irure nostrud est est reprehenderit consequat pariatur qui. Fugiat Lorem sint eu laborum minim
+        pariatur cillum mollit nulla consequat ullamco ex. Ex consectetur ad ut irure fugiat occaecat aliqua
+        exercitation cillum ipsum anim dolore tempor.
+      </p>
+
+      <p>
+        Adipisicing consequat irure fugiat Lorem deserunt aliquip do cupidatat. Lorem labore elit ex qui nostrud qui
+        cillum sunt adipisicing occaecat. Sunt nostrud amet amet cupidatat fugiat Lorem quis nulla id cillum esse eu.
+        Ullamco aliqua dolore irure amet mollit anim velit dolore.
+      </p>
+
+      <p>
+        Veniam cupidatat ipsum ea officia ipsum nisi laborum culpa qui dolore. Aliqua Lorem nisi labore ea velit aliquip
+        irure excepteur eu. Laboris proident duis non labore sunt quis aute tempor laboris enim anim eiusmod.
+      </p>
+
+      <p>
+        Minim proident ut aliqua ea ut culpa fugiat ullamco nisi esse nostrud reprehenderit id. Id id ullamco velit anim
+        nisi magna Lorem tempor. Et veniam occaecat ut labore consequat fugiat duis.
+      </p>
+
+      <p>
+        Adipisicing ea consectetur adipisicing aute eu pariatur enim labore consequat occaecat consectetur minim nisi.
+        Cillum commodo sunt labore reprehenderit. Duis esse excepteur magna tempor eiusmod exercitation Lorem
+        reprehenderit excepteur pariatur. Esse cupidatat occaecat magna do aliquip Lorem. Consectetur adipisicing
+        consequat dolore nostrud esse eu cillum id commodo duis. Aliquip dolor cillum cupidatat fugiat.
+      </p>
+
+      <p>
+        Ex eiusmod id est laborum sunt ex ea aute adipisicing ad magna deserunt duis. Nostrud velit dolore id commodo
+        quis enim fugiat. Sint non quis consectetur voluptate aliqua dolore nulla. Irure sit reprehenderit sint laboris
+        non elit. Duis minim nisi esse dolor. Sit ex in consequat non occaecat commodo irure et. Commodo qui ipsum Lorem
+        magna consequat consequat et minim eiusmod Lorem eiusmod cupidatat voluptate.
+      </p>
+    </div>
+  </article>
+</template>