Merge pull request #10311 from backstage/techdocs-fix-permalink-scrolling

[TechDocs] Fix permalink scrolling

.changeset/techdocs-coats-obey.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-techdocs': patch
+---
+
+Fix permalink scrolling for anchors where the id starts with a number.

plugins/techdocs/src/reader/transformers/scrollIntoAnchor.test.ts

@@ -35,11 +35,25 @@ describe('scrollIntoAnchor', () => {
   it('scroll to the hash anchor element', async () => {
     const scrollIntoView = jest.fn();
     dom.querySelector.mockReturnValue({ scrollIntoView });
-    const hash = '#hash';
-    window.location.hash = hash;
+    window.location.hash = '#hash';
     transformer(dom as unknown as Element);
     jest.advanceTimersByTime(200);
-    expect(dom.querySelector).toHaveBeenCalledWith(`#${hash.slice(1)}`);
+    expect(dom.querySelector).toHaveBeenCalledWith(
+      expect.stringMatching('[id="hash"]'),
+    );
+    expect(scrollIntoView).toHaveBeenCalledWith();
+    window.location.hash = '';
+  });
+
+  it('works for anchor starting with number', async () => {
+    const scrollIntoView = jest.fn();
+    dom.querySelector.mockReturnValue({ scrollIntoView });
+    window.location.hash = '#1-hash';
+    transformer(dom as unknown as Element);
+    jest.advanceTimersByTime(200);
+    expect(dom.querySelector).toHaveBeenCalledWith(
+      expect.stringMatching('[id="1-hash"]'),
+    );
     expect(scrollIntoView).toHaveBeenCalledWith();
     window.location.hash = '';
   });

plugins/techdocs/src/reader/transformers/scrollIntoAnchor.ts

@@ -22,7 +22,8 @@ export const scrollIntoAnchor = (): Transformer => {
       // Scroll to the desired anchor on initial navigation
       if (window.location.hash) {
         const hash = window.location.hash.slice(1);
-        dom?.querySelector(`#${hash}`)?.scrollIntoView();
+        // fix invalid selector error for anchor starting with number
+        dom?.querySelector(`[id="${hash}"]`)?.scrollIntoView();
       }
     }, 200);
     return dom;