Storybook: Knobs don't handle dynamic default value

[Tom910]

Describe the bug
I update the storybook in 5.0.11 to 5.2.3 and have a regression bug with knobs. When changing values in knobs, react component not reloading with the correct value

To Reproduce
Steps to reproduce the behavior:

1. Clone repo https://github.com/Tom910/storybook-knob-regression
2. npm run storybook
3. go to "as-dynamic-variables"
4. Change knobs

Expected behavior
Knobs change props

System:

  System:
    OS: macOS 10.15
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 68.0.2
    Safari: 13.0.2

Additional context
in storybook 5.0.11 work fine

[shilman]

@Hypnosphi maybe this is another preview hooks case?

[seanmheff]

I'm seeing the same behavior when going from 5.1.9 to 5.2.1

[seanmheff]

I'm seeing the same behavior when going from 5.1.9 to 5.2.1

Looks like my issue was caused by using a duplicate withKnobs decorator - one at the global level, and the order at the individual story level. Can verify the addon works fine when I removed the duplicate decorator.

[Hypnosphi]

@shilman it doesn't look like @Tom910 has duplicate decorators in the example

[Hypnosphi]

@seanmheff do you have knobs nested like that as well?

  const props = object('properties', {
    children: text('children', 'Cool text', 'options'),
    className: text('className', 'active', 'options')
  }, 'properties');

[Hypnosphi]

@ndelangen looks like we stopped handling updates to knob default values with https://github.com/storybookjs/storybook/commit/42b26cf9afd048d0e1f15bd57dfa36c6304dee17

[shilman]

Ta-da!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.18 containing PR #8407 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[Hypnosphi]

@shilman do you have some bot that does this? How can I mention an issue in a PR without triggering the bot?

[shilman]

It's part of my release script. It closes issues & adds this comment for any issue that's mentioned in the first line of the PR.

[Hypnosphi]

I see, will add some extra lines next time. Can it ignore links to comments BTW?

[shilman]

I'll update it to ignore links to comments

[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!

[devinus]

We actually discovered this issue after 42b26cf9afd048d0e1f15bd57dfa36c6304dee17 as well. Our use case is that we add stories dynamically based on JSON files that we import. Hot reloading when those JSON files are modified works, but wrapping them in the object knob broke seeing those changes since they're no longer deep compared.

[b0z1]

Im not sure if this is related but a fix for me is to insert this in the config.js
It clears the story everytime a story is rendered

addons.getChannel().on('storyRender', () => {
  /**
   * TODO: Find a better solution for this
   * Note: Updating a story does not update the knobs default value
   */
  require('@storybook/addon-knobs/dist/registerKnobs').manager.knobStore.store = {}
})

[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?