question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Clicking on anchor with in page bookmark replaces Storybook frame

See original GitHub issue

Describe the bug If I have a component with an an anchor, containing a bookmark/fragment/hash url/href such as:

const App = (props) => {
  return (
    <div>
      <a href="#some-content">Bookmark link to some content</a>
      <p id="some-content">
        Some content
      </p>
    </div>
  );
};

Clicking on the anchor in Storybook should scroll the linked content in to view, but instead replaces the main Storybook frame.

https://user-images.githubusercontent.com/1027024/131162583-ea633a67-cbe6-4ad4-8c04-9b1db7f66704.mov

System Storybook 6.3.7, also reproducible in 5.3.21

To Reproduce https://github.com/penx/storybook-bookmarks

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:3
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
VilleMiekkojacommented, Feb 10, 2022

This also occurs in the current storybook version (6.4.18). Basically cannot use anchor links in storybook components at all, unless you’re already on the iframe frame.

1reaction
shilmancommented, Aug 31, 2021

@MichaelArestad this looks like another issue you’re digging into, right? if it’s the same can you please clone or the other as duplicate? looks like there’s a repro here ☝️

Read more comments on GitHub >

github_iconTop Results From Across the Web

html - Is there a way to bookmark or link to a section of a page ...
I want the page to get scrolled down to a particular section when accessed from a bookmark or hyperlink even if there is...
Read more >
Google Documents - Creating Page Anchors (aka Bookmarks)
Click in the location you added it. A pop-up should appear 2. Click Remove. To use an anchor/bookmark within the document:
Read more >
Creating an Anchor - Helpdesk
an Anchor, content authors can direct page visitors to a specific paragraph or image ... Style Class “bookmark” is automatically assigned to new...
Read more >
PDF Bookmarks - affinity.help
Manually wherever the Anchors panel lets you create an anchor in your document, e.g. within text or attached to an object such as...
Read more >
Learn how to create, manage, and edit hyperlinks in InDesign
If you create a hyperlink to a page or text anchor in a different ... Right-click the selected text, frame, or graphic, and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found