fix: defer when clicking hash links with data-sveltekit-reload

.changeset/chilled-cats-hang.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: ensure element is focused after subsequent clicks of the same hash link

.changeset/strange-buckets-sell.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: avoid reloading behaviour for hash links with data-sveltekit-reload if the hash is on the same page

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

@@ -2089,8 +2089,11 @@ function _start_router() {
 
 		if (download) return;
 
+		const [nonhash, hash] = url.href.split('#');
+		const same_pathname = nonhash === strip_hash(location);
+
 		// Ignore the following but fire beforeNavigate
-		if (external || options.reload) {
+		if (external || (options.reload && (!same_pathname || !hash))) {
 			if (_before_navigate({ url, type: 'link' })) {
 				// set `navigating` to `true` to prevent `beforeNavigate` callbacks
 				// being called when the page unloads
@@ -2105,8 +2108,7 @@ function _start_router() {
 		// Check if new url only differs by hash and use the browser default behavior in that case
 		// This will ensure the `hashchange` event is fired
 		// Removing the hash does a full page navigation in the browser, so make sure a hash is present
-		const [nonhash, hash] = url.href.split('#');
-		if (hash !== undefined && nonhash === strip_hash(location)) {
+		if (hash !== undefined && same_pathname) {
 			// If we are trying to navigate to the same hash, we should only
 			// attempt to scroll to that element and avoid any history changes.
 			// Otherwise, this can cause Firefox to incorrectly assign a null
@@ -2121,7 +2123,11 @@ function _start_router() {
 				if (hash === '' || (hash === 'top' && a.ownerDocument.getElementById('top') === null)) {
 					window.scrollTo({ top: 0 });
 				} else {
-					a.ownerDocument.getElementById(decodeURIComponent(hash))?.scrollIntoView();
+					const element = a.ownerDocument.getElementById(decodeURIComponent(hash));
+					if (element) {
+						element.scrollIntoView();
+						element.focus();
+					}
 				}
 
 				return;

packages/kit/test/apps/basics/src/routes/data-sveltekit/reload/hash/+page.svelte

@@ -0,0 +1,3 @@
+<a href="#example" data-sveltekit-reload>focus</a>
+<input id="example" />
+<a href="/data-sveltekit/reload/hash/new">new page</a>

packages/kit/test/apps/basics/src/routes/data-sveltekit/reload/hash/new/+page.svelte

@@ -0,0 +1 @@
+<p>hello world</p>

packages/kit/test/apps/basics/src/routes/routing/hashes/focus/+page.svelte

@@ -0,0 +1,2 @@
+<a href="#example">focus</a>
+<input id="example" />

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');
@@ -33,7 +33,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"]');
@@ -715,6 +715,30 @@
 		expect(await page.textContent('#page-url-hash')).toBe('#target');
 	});
 
+	test('clicking on a hash link focuses the associated element', async ({ page }) => {
+		await page.goto('/routing/hashes/focus');
+		await page.locator('a[href="#example"]').click();
+		await expect(page.getByRole('textbox')).toBeFocused();
+		// check it still works when the hash is already present in the URL
+		await page.locator('a[href="#example"]').click();
+		await expect(page.getByRole('textbox')).toBeFocused();
+	});
+
+	test('backwards navigation works after clicking a hash link with data-sveltekit-reload', async ({
+		page,
+		clicknav,
+		baseURL
+	}) => {
+		await page.goto('/data-sveltekit/reload/hash');
+		await page.locator('a[href="#example"]').click();
+		expect(page.url()).toBe(`${baseURL}/data-sveltekit/reload/hash#example`);
+		await clicknav('a[href="/data-sveltekit/reload/hash/new"]');
+		expect(page.url()).toBe(`${baseURL}/data-sveltekit/reload/hash/new`);
+		await page.goBack();
+		expect(page.url()).toBe(`${baseURL}/data-sveltekit/reload/hash#example`);
+		await expect(page.getByRole('textbox')).toBeVisible();
+	});
+
 	test('back button returns to previous route when previous route has been navigated to via hash anchor', async ({
 		page,
 		clicknav
@@ -796,7 +820,7 @@
 		expect(await page.textContent('h3')).toBe('bar');
 	});
 
 	test('responds to <form target="_blank"> submission with new tab', async ({ page }) => {
 		await page.goto('/routing/form-target-blank');
 
 		let tabs = page.context().pages();
@@ -810,7 +834,7 @@
 		expect(tabs.length > 1);
 	});
 
 	test('responds to <button formtarget="_blank" submission with new tab', async ({ page }) => {
 		await page.goto('/routing/form-target-blank');
 
 		let tabs = page.context().pages();