[Bug]: docs-mode table-of-contents does not change URL when clicking on an anchor

[kroeder]

Describe the bug

If you enable toc: true, docs-mode renders a table-of-contents inside the docs page.
When clicking on one of the toc list-items, the expected behavior would be to add the # anchor to the browser URL.

It should behave the same as clicking the # icon on a docs-page headline.

To Reproduce

https://stackblitz.com/edit/github-w91kck?file=.storybook%2Fpreview.ts

• Open "Button / Docs"
• Click on table of contents anchor -> nothing is added to the URL

System

No response

Additional context

No response

[vanessayuenn]

@kroeder in the repro you provided, the TOC does link to the # anchor. Can you clarify how do you expect it to work differently?

[ftr93]

@vanessayuenn yes, it links to the anchor correctly, but clicking it doesn't change the browser URL

[sooster910]

I have confirmed the behavior @kroeder described: When hovering over the anchor tag, as shown in the image below, it behaves as expected. However, upon clicking, the browser URL does not update to reflect the clicked anchor tag.
It is supposed to scroll down to where the anchor tag is located.

@vanessayuenn Can I give it a try? Thanks.

[vanessayuenn]

@sooster910 of course! We'd be thrilled to have your contribution. If this is your first contribution, be sure to check the contribution guide and hop onto the Storybook Discord if you need any help getting started. Looking forward to your PR! ✨

[emlynmac]

Just came across this issue in a repo I'm working with.

@sooster910 can you update your PR to no conflicts?
@vanessayuenn would you be able to review once the updates are made?

[sooster910]

Just came across this issue in a repo I'm working with.

@sooster910 can you update your PR to no conflicts? @vanessayuenn would you be able to review once the updates are made?

@emlynmac Sure. Given the conflicts with the original PR, I'll go ahead and create a new PR to address the issue from scratch.

@vanessayuenn once the new PR is up, I would appreciate it if you could review it. Thanks.

[kroeder]

This could be related #29361

If you have an anchor hash value,

1. On page load, it gets removed from the URL (which would make sharing the hash value of a toc-entry useless)
2. When adding an anchor hash value, the page does not scroll to the anchor

@sooster910 by any chance, did your PR fix problem 2? If not, that's fine! I'm currently investigating #29361 myself

[sooster910]

This could be related #29361

If you have an anchor hash value,

1. On page load, it gets removed from the URL (which would make sharing the hash value of a toc-entry useless)
2. When adding an anchor hash value, the page does not scroll to the anchor

@sooster910 by any chance, did your PR fix problem 2? If not, that's fine! I'm currently investigating #29361 myself

@kroeder hi, the scrolling only works when you click the TOC now - the click handler updates the anchor, but if you type the anchor directly in the address bar, it doesn't work. Let me know if you need any clarification!

[Sidnioulz]

#30130 should fix this based on an initial PR from @sookmax.

I'd love for someone in this thread to check out that PR and confirm the bug is fixed for them.