[fix] don't override application focus and scroll

.changeset/strong-cups-yell.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+[fix] don't override application focus and scroll

packages/kit/src/runtime/client/renderer.js

@@ -224,8 +224,9 @@ export class Renderer {
 	 * @param {import('./types').NavigationInfo} info
 	 * @param {string[]} chain
 	 * @param {boolean} no_cache
+	 * @param {{hash?: string, scroll: { x: number, y: number } | null, keepfocus: boolean}} [opts]
 	 */
-	async update(info, chain, no_cache) {
+	async update(info, chain, no_cache, opts) {
 		const token = (this.token = {});
 		let navigation_result = await this._get_navigation_result(info, no_cache);
 
@@ -263,12 +264,31 @@ export class Renderer {
 
 			this.root.$set(navigation_result.props);
 			this.stores.navigating.set(null);
-
-			await 0;
 		} else {
 			this._init(navigation_result);
 		}
 
+		if (opts) {
+			const { hash, scroll, keepfocus } = opts;
+
+			if (!keepfocus) {
+				document.body.focus();
+			}
+
+			const deep_linked = hash && document.getElementById(hash.slice(1));
+			if (scroll) {
+				scrollTo(scroll.x, scroll.y);
+			} else if (deep_linked) {
+				// Here we use `scrollIntoView` on the element instead of `scrollTo`
+				// because it natively supports the `scroll-margin` and `scroll-behavior`
+				// CSS properties.
+				deep_linked.scrollIntoView();
+			} else {
+				scrollTo(0, 0);
+			}
+		}
+
+		await 0;
 		dispatchEvent(new CustomEvent('sveltekit:navigation-end'));
 		this.loading.promise = null;
 		this.loading.id = null;

packages/kit/src/runtime/client/router.js

@@ -266,22 +266,6 @@ export class Router {
 			query: info.query
 		});
 
-		await this.renderer.update(info, chain, false);
-
-		if (!keepfocus) {
-			document.body.focus();
-		}
-
-		const deep_linked = hash && document.getElementById(hash.slice(1));
-		if (scroll) {
-			scrollTo(scroll.x, scroll.y);
-		} else if (deep_linked) {
-			// Here we use `scrollIntoView` on the element instead of `scrollTo`
-			// because it natively supports the `scroll-margin` and `scroll-behavior`
-			// CSS properties.
-			deep_linked.scrollIntoView();
-		} else {
-			scrollTo(0, 0);
-		}
+		await this.renderer.update(info, chain, false, { hash, scroll, keepfocus });
 	}
 }

packages/kit/test/apps/basics/src/routes/use-action/_tests.js

@@ -0,0 +1,33 @@
+import * as assert from 'uvu/assert';
+
+/**
+ * A suite of tests that checks that SvelteKit scroll and focus handling don't
+ * interfere with the scroll and focus handling provided by the application
+ * @type {import('test').TestMaker}
+ */
+export default function (test) {
+	test(
+		'app-supplied scroll and focus work on direct page load',
+		'/use-action/focus-and-scroll',
+		async ({ page, js }) => {
+			if (js) {
+				const input = await page.$('#input');
+				assert.ok(input && input.isVisible);
+				assert.ok(await page.$eval('#input', (el) => el === document.activeElement));
+			}
+		}
+	);
+
+	test(
+		'app-supplied scroll and focus work on navigation to page',
+		'/use-action',
+		async ({ page, clicknav, js }) => {
+			await clicknav('[href="/use-action/focus-and-scroll"]');
+			if (js) {
+				const input = await page.$('#input');
+				assert.ok(input && input.isVisible);
+				assert.ok(await page.$eval('#input', (el) => el === document.activeElement));
+			}
+		}
+	);
+}

packages/kit/test/apps/basics/src/routes/use-action/focus-and-scroll.svelte

@@ -0,0 +1,20 @@
+<script>
+	const focusAndScroll = /** @param {HTMLInputElement} node */ (node) => {
+		node.focus();
+		node.scrollIntoView();
+	};
+</script>
+
+<div>They (don't) see me scrollin'...</div>
+<div style="background-color: peru;">
+	<label for="input">Focus! </label>
+	<input use:focusAndScroll id="input" type="text" />
+</div>
+<div style="background-color: teal;">They (not) focusin'</div>
+
+<style>
+	div {
+		background-color: hotpink;
+		height: 180vh;
+	}
+</style>

packages/kit/test/apps/basics/src/routes/use-action/index.svelte

@@ -0,0 +1,15 @@
+<h1>Welcome to a test project</h1>
+<a href="/use-action/focus-and-scroll">Focus and scroll demo</a>
+
+<style>
+	:global(body) {
+		background-color: tan;
+		display: flex;
+		flex-direction: column;
+	}
+
+	a {
+		display: block;
+		margin: 20px;
+	}
+</style>