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,