Anchor tags within preview panel not working

[benkeen]

Apologies if this isn't a bug or there's standard way to solve it, I couldn't find it.

Describe the bug
An anchor tag within a page in the preview panel iframe doesn't take you to that position within the page, but reloads the top iframe with the page content.

To Reproduce
Steps to reproduce the behavior:

• Create a story within the preview panel, and add a link like About
• Add a target for that link further down the page<a id="about"></a>

Expected behavior
When clicking the "About" link it would take you to the target (i.e. scroll down to the appropriate spot).

Result: it reloads the page in to the top frame.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

@benkeen What version of storybook?

[benkeen]

Thx! 4.1.11.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Is this still broken in v5?

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[mourad1081]

Same issue here.

[renatodeleao]

Still experiencing this at v5.3.18, was this fixed or is there any workaround? ☮️

[xurxe]

I'm also experiencing this and would love a fix or a workaround 😄

[xurxe]

We came up with a workaround for now, which involves:

1. Using event.preventDefault() to prevent reloading of the page.
2. Using window.scrollTo() to scroll to the destination element.
3. Using element.focus() to move focus to the destination element. If the destination element is not focusable, you can make it focusable with tabindex="-1".

Below is a basic version of our React implementation. No idea if this is useful at all towards an actual fix (as I don't know exactly what's causing the bug), but hopefully it's a decent workaround in the meantime! Let me know if you spot any issues :D

import React, { createContext, useRef } from 'react';

export const Anchor = ({ href, toRef, ...rest }) => {
  const go = event => {
    /* Prevent the default, which is, as per the bug, refreshing
    the window to show the iframe alone: */
    event.preventDefault();

    /* Scroll to the destination element: */
    window.scrollTo(0, toRef.current.offsetTop);

    /* Move focus to the destination element, which had to be 
    made focusable with tabindex="-1". Using outline: none on 
    the destination element is ok, since it's not actually a 
    "focusable element", just something we have to make
    focusable in order for this this hack to work for users of 
    assistive technologies (such as keyboards and screen readers): */
    toRef.current.focus();
  };

  return <a href={href} onClick={go} {...rest}></Link>;
};

export const Example = () => {
  /* Create a reference for each element linked to */
  const mainRef = useRef(null);

  /* Put references in the context */
  const RefContext = createContext({
    mainRef,
  });

  return (
    /* Wrap context provider at the top level */
    <RefContext.Provider>
      <nav>
        {/* When the Storybook bug is fixed, use href="#id" prop. 
        In the meantime, use toRef={ref} prop. */}
        <Anchor href="#main" toRef={mainRef}>
          Go to main
        </Anchor>
        <div>
          I'm a navigation bar!
        </div>
        <a href="https://wunder.io/"> Link 1 </a>
        <a href="https://wunder.io/"> Link 2 </a>
        <a href="https://wunder.io/"> Link 3 </a>
      </nav>

      {/* Give an ID to use when the Storybook bug is fixed. 
      In the meantime, as a workaround, give a ref and also 
      make focusable */}
      <main id="main" ref={mainRef} tabIndex="-1">
        <div>I'm the main!</div>
        <button> Button 1 </button>
        <button> Button 2 </button>
        <button> Button 3 </button>
      </main>
    </RefContext.Provider>
  );
};

export default {
  title: 'Example',
};

[reintroducing]

Just ran into this and looked for a solution which was referenced in another issue and works great for anyone who lands here from a Google search: #15934 (comment)