Refs do not work properly in docs mode (mdx)

Describe the bug Only in docs mode (not canvas mode), a ref does not contain a reference to the element it’s attached to.

Notes from @shilman :

it’s probably related to react context. in storybook each story is a function, and react hooks down’t work in normal functions alone. however, when those functions are wrapped in React.createElement, hooks are supported. In JSX it’s the difference between {storyFn()} and <StoryFn />. It’s possible that MDX needs to do the latter when the story is inline. Mind filing an issue on this with a simple repro?

To Reproduce

1. Create the following story (in an .mdx file):

  <Story name="Bug">
    {() => { 
      const ref = useRef(null);
      return (
        <>
          <div ref={ref} style={{ overflow: "hidden" }} />
          <button onClick={() => console.log(ref.current)}>Show ref value</button>
        </>
      );
    }}
  </Story>

1. Open your console
2. Go to the canvas tab and click on the “Show ref value” button… In Chrome, it should log out <div></div>.
3. Check docs tab and click on the “Show ref value” button. In Chrome, it should log null.

Expected behavior I expect to log an instance of the element the ref is on in both canvas and docs mode.

Screenshots N/A

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 12.16.0 - /usr/local/bin/node
    Yarn: 1.19.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 80.0.3987.163
    Firefox: 67.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-a11y: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-actions: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-backgrounds: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-centered: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-docs: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-knobs: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addon-links: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/addons: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/react: ^6.0.0-alpha.30 => 6.0.0-alpha.30 
    @storybook/theming: ^6.0.0-alpha.30 => 6.0.0-alpha.30 

Additional context N/A

[nijk]

FWIW I’ve found a potential workaround the the originally reported issue by using a wrapper component with render props, although this doesn’t fix the JSS dynamic values issue.

<Story name="Workaround">
  {() => {
    const Wrapper = ({ children }) => {
      const ref = useRef(null);
      return (
        <>
          <div ref={ref} style={{ overflow: "hidden" }} />
          {children({ ref })}
        </>
      )
    };
    return (
      <Wrapper>
        {({ ref }) => (
          <button onClick={() => console.log(ref.current)}>Show ref value</button>
        )}
      </Wrapper>
    );
  }}
</Story>

[shilman]

@nijk bad markdown formatting. updated