fix: decode hash when clicking on same hash to correctly scroll on no…

…n ascii hashes (#12699) * fix: decode hash when clicking on same hash to correctly scroll on non ascii * chore: changeset * chore: fix changeset * Update .changeset/smooth-dogs-travel.md * add test --------- Co-authored-by: Tee Ming <[email protected]> Co-authored-by: Chew Tee Ming <[email protected]>
sveltejs · Oct 11, 2024 · 5780deb · 5780deb
1 parent 989949a
commit 5780deb
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/smooth-dogs-travel.md b/.changeset/smooth-dogs-travel.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: decode non ASCII anchor hashes when scrolling into view
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
@@ -2121,7 +2121,7 @@ function _start_router() {
 				if (hash === '' || (hash === 'top' && a.ownerDocument.getElementById('top') === null)) {
 					window.scrollTo({ top: 0 });
 				} else {
-					a.ownerDocument.getElementById(hash)?.scrollIntoView();
+					a.ownerDocument.getElementById(decodeURIComponent(hash))?.scrollIntoView();
 				}
 
 				return;

diff --git a/packages/kit/test/apps/basics/src/routes/anchor/anchor/+page.svelte b/packages/kit/test/apps/basics/src/routes/anchor/anchor/+page.svelte
@@ -8,3 +8,4 @@
 <div style="height: 180vh; background-color: honeydew;">
 	<p id="go-to-.=" class="special-char-id">The browser scrolls to me</p>
 </div>
+<a id="non-ascii-anchor" href="#go-to-encöded">Anchor demo (non-ASCII)</a>
diff --git a/packages/kit/test/apps/basics/test/cross-platform/client.test.js b/packages/kit/test/apps/basics/test/cross-platform/client.test.js
@@ -280,6 +280,20 @@ test.describe('Scrolling', () => {
 		expect(await in_view('#go-to-encöded')).toBe(true);
 	});
 
+	test('url-supplied non-ascii anchor works on navigation to page after manual scroll', async ({
+		page,
+		in_view,
+		clicknav
+	}) => {
+		await page.goto('/anchor');
+		await clicknav('#non-ascii-anchor');
+		await page.evaluate(() => {
+			window.scrollTo(0, 50);
+		});
+		await page.locator('#non-ascii-anchor').click();
+		expect(await in_view('#go-to-encöded')).toBe(true);
+	});
+
 	test('url-supplied anchor with special characters works on navigation to page', async ({
 		page,
 		in_view,