fix: blur active element before component update during navigation

.changeset/blur-during-navigation.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: blur active element before component update during navigation so that blur/focusout handlers fire while old component data is still valid

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>
+	let { data } = $props();
+
+	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.
+		/** @type {any} */ (window).__blur_test_result = data.message;
+	}
+</script>
+
+<h1>Blur test</h1>
+<input id="blur-input" onblur={handleBlur} />
+<a href="/accessibility/blur-during-navigation/other">Go to other</a>

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

@@ -9,7 +9,7 @@
 test.describe.configure({ mode: 'parallel' });
 
 test.describe('a11y', () => {
 	test('resets focus', async ({ page, clicknav, browserName }) => {
 		const tab = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
 		await page.goto('/accessibility/a');
@@ -32,7 +32,7 @@
 		expect(await page.evaluate(() => document.documentElement.getAttribute('tabindex'))).toBe(null);
 	});
 
 	test('applies autofocus after a navigation', async ({ page, clicknav }) => {
 		await page.goto('/accessibility/autofocus/a');
 
 		await clicknav('[href="/accessibility/autofocus/b"]', {
@@ -122,6 +122,25 @@
 		).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', () => {
@@ -183,7 +202,7 @@
 		expect(await page.innerHTML('pre')).toBe('1 true leave');
 	});
 
 	test('beforeNavigate is not triggered on redirect', async ({ page, baseURL }) => {
 		await page.goto('/navigation-lifecycle/before-navigate/prevent-navigation');
 
 		await page.click('[href="/navigation-lifecycle/before-navigate/redirect"]');
@@ -322,7 +341,7 @@
 		expect(afterNav.type).toBe('enter');
 	});
 
 	test('scroll state is provided on link navigation', async ({ page, clicknav, scroll_to }) => {
 		await page.goto('/navigation-lifecycle/scroll-state/a');
 		await scroll_to(0, 500);
 
@@ -490,7 +509,7 @@
 		expect(await in_view('#go-to-element')).toBe(true);
 	});
 
 	test('scrolling to url-supplied anchor respects scroll-margin', async ({ page, clicknav }) => {
 		await page.goto('/anchor');
 		await clicknav('#to-scroll-margin');
 		expect(
@@ -589,7 +608,7 @@
 		else expect(await in_view('#go-to-element')).toBe(true);
 	});
 
 	test('app-supplied scroll and focus work on direct page load', async ({ page, in_view }) => {
 		await page.goto('/use-action/focus-and-scroll');
 		expect(await in_view('#input')).toBe(true);
 		await expect(page.locator('#input')).toBeFocused();
@@ -731,7 +750,7 @@
 		);
 	});
 
 	test('client-side error from load()', async ({ page }) => {
 		await page.goto('/errors/load-error-client');
 
 		expect(await page.textContent('footer')).toBe('Custom layout');
@@ -761,7 +780,7 @@
 		);
 	});
 
 	test('Root error falls back to error.html (expected error)', async ({ page, clicknav }) => {
 		await page.goto('/errors/error-html');
 		await clicknav('button:text-is("Expected")');
 
@@ -812,7 +831,7 @@
 		}
 	});
 
 	test('prefetches data programmatically', async ({ baseURL, page, app }) => {
 		await page.goto('/routing/a');
 
 		/** @type {string[]} */
@@ -1177,7 +1196,7 @@
 });
 
 test.describe('cookies', () => {
 	test('etag forwards cookies', async ({ page }) => {
 		await page.goto('/cookies/forwarded-in-etag');
 		await expect(page.locator('p')).toHaveText('foo=bar');
 		await page.locator('button').click();