fix: handle special chars in anchors when navigating (#8806)

fixes #8804
sveltejs · Jan 31, 2023 · 5571e4a · 5571e4a
1 parent 5c63f4d
commit 5571e4a
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/hip-eggs-raise.md b/.changeset/hip-eggs-raise.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: handle anchors with special chars when navigating
diff --git a/packages/kit/src/runtime/client/client.js b/packages/kit/src/runtime/client/client.js
@@ -343,7 +343,8 @@ export function create_client({ target, base }) {
 			}
 
 			if (autoscroll) {
-				const deep_linked = url.hash && document.querySelector(decodeURIComponent(url.hash));
+				const deep_linked =
+					url.hash && document.getElementById(decodeURIComponent(url.hash.slice(1)));
 				if (scroll) {
 					scrollTo(scroll.x, scroll.y);
 				} else if (deep_linked) {

diff --git a/packages/kit/test/apps/basics/src/routes/anchor/+page.svelte b/packages/kit/test/apps/basics/src/routes/anchor/+page.svelte
@@ -1,6 +1,7 @@
 <h1>Welcome to a test project</h1>
 <a id="scroll-anchor" href="#last-anchor-2">Bottom of this page</a>
 <a id="non-ascii-anchor" href="/anchor/anchor#go-to-encöded">Anchor demo (non-ASCII)</a>
+<a id="special-char-anchor" href="/anchor/anchor#go-to-.=">Anchor demo (special characters)</a>
 <a id="first-anchor" href="/anchor/anchor#go-to-element">Anchor demo (first)</a>
 <div>Spacing</div>
 <a id="second-anchor" href="/anchor/anchor#go-to-element">Anchor demo (second)</a>

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
@@ -5,3 +5,6 @@
 <div style="height: 180vh; background-color: tomato;">
 	<p id="go-to-encöded">The browser scrolls to me</p>
 </div>
+<div style="height: 180vh; background-color: honeydew;">
+	<p id="go-to-.=" class="special-char-id">The browser scrolls to me</p>
+</div>
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
@@ -224,6 +224,16 @@ test.describe('Scrolling', () => {
 		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,
+		clicknav
+	}) => {
+		await page.goto('/anchor');
+		await clicknav('#special-char-anchor');
+		expect(await in_view('.special-char-id')).toBe(true);
+	});
+
 	test('url-supplied anchor works when navigated from scrolled page', async ({
 		page,
 		clicknav,