Storybook: Knobs render improperly using HTML and addon-docs

[daneah]

Describe the bug
In an HTML Storybook, when switching to Docs and then back to Canvas, the knobs panel renders all knobs defined in the stories file.

To Reproduce
Steps to reproduce the behavior:

1. Build an MDX file with multiple HTML stories that each use a unique knob
2. Open Storybook to the Canvas
3. Navigate to Docs and then back to Canvas
4. Observe multiple knobs appear

Expected behavior
Only the knobs relevant to the selected story should render.

Screenshots

Code snippets

import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
import { withKnobs, text } from '@storybook/addon-knobs';
import { withA11y } from '@storybook/addon-a11y';

# HTML

<Meta
    title='Components|Alert'
    decorators={[withKnobs({ escapeHTML: false }), withA11y]}
/>

<Preview>
    <Story name='Base'>{`
        <div class="alert" role="alert">${text('Alert text', 'Hello World')}</div>
    `}</Story>
</Preview>

<Preview>
    <Story name='Error'>{`
        <div class="alert alert--error" role="alert">${text('Error text', 'Error')}</div>
    `}</Story>
</Preview>

<Preview>
    <Story name='More text'>{`
        <div class="alert alert--error" role="alert">${text('More text', 'MOAR')}</div>
    `}</Story>
</Preview>

System:

Environment Info

  System:
    OS: macOS Mojave 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 12.4.0 - ~/.nvm/versions/node/v12.4.0/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v12.4.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.79
    Firefox: 67.0.1
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/addon-docs: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/addon-knobs: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/addon-storysource: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/html: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/react: ^5.3.0-beta.31 => 5.3.0-beta.31
    @storybook/source-loader: ^5.3.0-beta.31 => 5.3.0-beta.31

Additional context
This seems like it could relate to #7880 / #7992 but I can't say for sure.

[kosek-michal]

I also run into this issue. Does anybody have an idea about some workaround for this?

[ndelangen]

I remember debugging this a while ago, can't remember if it's fixed. I'll add this to my todo-list to check what needs to happen.

[shilman]

I'm pretty sure we fixed this @ndelangen but it's possible that the fix doesn't work for HTML or that it somehow to got lost in the shuffle. Happy to pair on this again at some point!

[kosek-michal]

Hi guys,
I have retested it today against version 6.0.0-alpha.1 and the issue is still here. Just in my case, it needs to switch between stories when in doc view mode (see below). Stories are defined in two separate MDX files.

Also found out that, when the issue occurs, it can be fixed by running __STORYBOOK_ADDONS.getChannel().emit('storybookjs/knobs/reset')
in console.

Screen:

[ndelangen]

I could definitely use a second brain debugging this!

[daneah]

Definitely still present 😄

[stale[bot]]

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]

Hi gang, We’ve just released addon-controls in 6.0-beta!

Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls README
• Migration instructions

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!

[shilman]

For anybody who is interested in Controls but don't know where to start, I've created a quick & dirty step-by-step walkthrough to go from a fresh CRA project to a working demo. Check it out:

=> Storybook Controls w/ CRA & TypeScript

There are also some "knobs to controls" migration docs in the Controls README:

=> How do I migrate from addon-knobs?

[daneah]

We're on to controls at this point, and they're looking really nice. More responsive, more granular, and so on. Really liking them in the short time we've worked with them! Thanks for the work on this @shilman .

[ndelangen]

Is this something we can close then?

I think the goal long term is to deprecate knobs.

[daneah]

We’re not even using a raw HTML set of stories anymore, either, so difficult for me to say if controls have fixed the original issue as filed. Closing this would suffice for me, but I can’t speak for anyone else in the thread 😄

[ndelangen]

Happy to re-open if requested