MWPW-140172 Fix anchor scroll (#1651)

* MWPW-140172 Fix anchor scroll * unit test
adobecom · Dec 15, 2023 · f831bd9 · f831bd9
1 parent 62a8fd5
commit f831bd9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/libs/utils/utils.js b/libs/utils/utils.js
@@ -901,7 +901,7 @@ async function loadPostLCP(config) {
 
 export function scrollToHashedElement(hash) {
   if (!hash) return;
-  const elementId = hash.slice(1);
+  const elementId = decodeURIComponent(hash).slice(1);
   let targetElement;
   try {
     targetElement = document.querySelector(`#${elementId}:not(.dialog-modal)`);

diff --git a/test/utils/mocks/body.html b/test/utils/mocks/body.html
@@ -2,6 +2,7 @@
   <div>
     <!-- Block Decorating -->
     <div id="not-block"></div>
+    <div id="tools-für-das-verhalten"></div>
     <!-- Picture Decorating -->
     <p><em><picture><img src="http://localhost:2000/test/utils/mocks/media_.png"/></picture></em></p>
     <p><strong><picture><img src="http://localhost:2000/test/utils/mocks/media_.png"/></picture></strong></p>

diff --git a/test/utils/utils.test.js b/test/utils/utils.test.js
@@ -473,6 +473,17 @@ describe('Utils', () => {
       utils.scrollToHashedElement('');
       expect(scrollToCalled).to.be.false;
     });
+
+    it('should scroll to the hashed element with special character', () => {
+      let scrollToCalled = false;
+      window.scrollTo = () => {
+        scrollToCalled = true;
+      };
+
+      utils.scrollToHashedElement('#tools-f%C3%BCr-das-verhalten');
+      expect(scrollToCalled).to.be.true;
+      expect(document.getElementById('tools-für-das-verhalten')).to.exist;
+    });
   });
 
   describe('useDotHtml', async () => {