fix: blur active element before component update during navigation (#14575)

Blur the active element before `root.$set()` so that blur/focusout
handlers fire while the old component's data is still valid. Previously,
data was nulled out before blur fired, causing TypeErrors in blur
handlers that accessed component data.

Guarded by `!keepfocus` and only applies when the active element is not
the body.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: MathiasWP

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

@@ -1739,6 +1739,16 @@ async function navigate({
 			navigation_result.props.page.url = url;
 		}
 
+		// Remove focus before updating the component tree, so that blur/focusout
+		// handlers fire while the old component's data is still valid (#14575)
+		if (
+			!keepfocus &&
+			document.activeElement instanceof HTMLElement &&
+			document.activeElement !== document.body
+		) {
+			document.activeElement.blur();
+		}
+
 		const fork = load_cache_fork && (await load_cache_fork);
 
 		if (fork) {

packages/kit/test/apps/basics/src/routes/accessibility/blur-during-navigation/other/+page.svelte

@@ -0,0 +1,2 @@
+<h1>Other page</h1>
+<a href="/accessibility/blur-during-navigation/page-with-input">Back</a>

packages/kit/test/apps/basics/src/routes/accessibility/blur-during-navigation/page-with-input/+page.js

@@ -0,0 +1,3 @@
+export function load() {
+	return { message: 'hello' };
+}

packages/kit/test/apps/basics/src/routes/accessibility/blur-during-navigation/page-with-input/+page.svelte

@@ -0,0 +1,14 @@
+<script>
+	export let data;
+
+	function handleBlur() {
+		// Without the fix, data was already nulled when blur fired during
+		// navigation, causing "Cannot read properties of undefined".
+		// We write to window so the result survives component teardown.
+		window.__blur_test_result = data.message;
+	}
+</script>
+
+<h1>Blur test</h1>
+<input id="blur-input" on:blur={handleBlur} />
+<a href="/accessibility/blur-during-navigation/other">Go to other</a>

packages/kit/test/apps/basics/test/cross-platform/client.test.js

@@ -122,6 +122,25 @@ test.describe('a11y', () => {
 		).toBe('BODY');
 		expect(await page.evaluate(() => document.activeElement?.nodeName)).toBe('BODY');
 	});
+
+	test('blur handler can access data during navigation', async ({ page, app }) => {
+		const errors = /** @type {string[]} */ ([]);
+		page.on('pageerror', (err) => errors.push(err.message));
+
+		await page.goto('/accessibility/blur-during-navigation/page-with-input');
+
+		// Focus the input
+		await page.locator('#blur-input').focus();
+
+		// Navigate away — this triggers blur on the focused input.
+		// Without the fix, data would be nulled before blur fired, causing a TypeError.
+		await app.goto('/accessibility/blur-during-navigation/other');
+
+		expect(errors).toEqual([]);
+
+		// The blur handler should have been able to read data.message
+		expect(await page.evaluate(() => /** @type {any} */ (window).__blur_test_result)).toBe('hello');
+	});
 });
 
 test.describe('Navigation lifecycle functions', () => {