Merge pull request #8797 from QwikDev/v2-scroll-action

fix: preserve scroll after spa action submits

Author: wmertens

.changeset/route-action-scroll.md

@@ -0,0 +1,5 @@
+---
+"@qwik.dev/router": patch
+---
+
+fix: preserve scroll after spa action submits

e2e/qwik-e2e/apps/qwikrouter-test/src/routes/scroll-restoration/action-form/index.tsx

@@ -0,0 +1,37 @@
+import { component$, useStylesScoped$ } from '@qwik.dev/core';
+import { Form, routeAction$ } from '@qwik.dev/router';
+
+export const useScrollAction = routeAction$((form) => {
+  return {
+    submitted: form.value,
+  };
+});
+
+export default component$(() => {
+  const action = useScrollAction();
+
+  useStylesScoped$(`
+    .spacer {
+      height: 900px;
+    }
+
+    .tail {
+      height: 1400px;
+    }
+  `);
+
+  return (
+    <main>
+      <h1 id="scroll-action-heading">Action Scroll</h1>
+      <div class="spacer" />
+      <Form action={action} id="scroll-action-form">
+        <input type="hidden" name="value" value="keep-scroll" />
+        <button id="scroll-action-submit">Submit Action</button>
+      </Form>
+      <p id="scroll-action-result">
+        {action.value?.submitted ? `submitted: ${action.value.submitted}` : 'idle'}
+      </p>
+      <div class="tail" />
+    </main>
+  );
+});

e2e/qwik-e2e/apps/qwikrouter-test/src/routes/scroll-restoration/action-source/index.tsx

@@ -0,0 +1,13 @@
+import { component$ } from '@qwik.dev/core';
+import { Link } from '@qwik.dev/router';
+
+export default component$(() => {
+  return (
+    <main>
+      <h1>Action Source</h1>
+      <Link id="to-scroll-action" href="/qwikrouter-test/scroll-restoration/action-form/">
+        To Action Form
+      </Link>
+    </main>
+  );
+});

e2e/qwik-e2e/tests/qwikrouter/nav.e2e.ts

@@ -235,6 +235,30 @@ test.describe('nav', () => {
         );
       });
 
+      test('should preserve scroll when submitting routeAction$ after SPA navigation', async ({
+        page,
+      }) => {
+        await page.goto('/qwikrouter-test/scroll-restoration/action-source/');
+        await page.locator('#to-scroll-action').click();
+
+        await expect(page).toHaveURL('/qwikrouter-test/scroll-restoration/action-form/');
+        await expect(page.locator('#scroll-action-heading')).toHaveText('Action Scroll');
+
+        await scrollTo(page, 0, 700);
+        await expect.poll(async () => (await getWindowScrollXY(page))[1]).toBe(700);
+
+        await page.locator('#scroll-action-submit').click();
+
+        await expect(page.locator('#scroll-action-result')).toHaveText('submitted: keep-scroll');
+        await page.evaluate(
+          () =>
+            new Promise<void>((resolve) => {
+              requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+            })
+        );
+        expect((await getWindowScrollXY(page))[1]).toBeGreaterThan(600);
+      });
+
       test('issue4502 (link)', async ({ page }) => {
         await page.goto('/qwikrouter-test/issue4502/');
         const count = page.locator('#count');

packages/qwik-router/src/runtime/src/qwik-router-component.tsx

@@ -257,6 +257,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
     NoSerialize<{
       routeName: string;
       navType: NavigationType;
+      prevUrl: URL;
       replaceState: boolean | undefined;
       shouldForcePrevUrl: boolean;
       shouldForceUrl: boolean;
@@ -709,6 +710,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
       navContext.value = noSerialize({
         routeName: $routeName$,
         navType,
+        prevUrl,
         replaceState,
         shouldForcePrevUrl,
         shouldForceUrl,
@@ -770,12 +772,8 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
       const container = _getContextContainer();
       const navigation = routeInternal.untrackedValue;
 
-      const { navType, replaceState, routeName } = nav;
+      const { navType, prevUrl, replaceState, routeName } = nav;
       const trackUrl = routeLocation.url;
-      // prevUrl is only assigned when the path changes (see nav task). On the first SPA nav
-      // after SSR, or on same-path/hash-only navs, prevUrl is undefined — fall back to
-      // trackUrl so isSamePath() returns true and scroll/history logic no-ops correctly.
-      const prevUrl = routeLocation.prevUrl ?? trackUrl;
 
       const scroller = getScroller();
       // Scroll restore setup — must happen before navigation commits