Storybook: Knobs object UI disappears when changing values

Created on 25 Feb 2020 · 2Comments · Source: storybookjs/storybook

Describe the bug

When changing the values of an object rendered through @storybook/addon-knobs, the UI disappears.

To Reproduce

Create an object using addon-knobs
npm run storybook
Change the object values in the Storybook knobs tab
Note the object disappears

Expected behavior

The object values should be editable from within the Storybook UI without the knob disappearing.

Screenshots

storybook-knobs-object-bug

Code snippets

Working example here: https://github.com/benjarwar/storybook-knobs-object-test

Clone the repo
npm i
npm run storybook

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 8.15.1 - ~/.nvm/versions/node/v8.15.1/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v8.15.1/bin/yarn
    npm: 6.13.7 - ~/.nvm/versions/node/v8.15.1/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.1
    Safari: 13.0.5
  npmPackages:
    @storybook/addon-actions: ^5.3.14 => 5.3.14 
    @storybook/addon-knobs: ^5.3.14 => 5.3.14 
    @storybook/addon-links: ^5.3.14 => 5.3.14 
    @storybook/addons: ^5.3.14 => 5.3.14 
    @storybook/react: ^5.3.14 => 5.3.14

knobs question / support

Source

benjarwar

👍1

Most helpful comment

The problem here is you are not creating the object knob inside the story function. If you change your example to something like this you should be all set:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer on 26 Feb 2020

👍5

All 2 comments

The problem here is you are not creating the object knob inside the story function. If you change your example to something like this you should be all set:

export const Ctas = () => {

  const value = object(label, defaultValue);

  return (
    <div>
      <div>
        <h3>CTA</h3>
        <Cta href="#primary-cta" type="Primary">
          {text("Primary CTA Label", "Primary CTA")}
          {value.foo}
        </Cta>
      </div>
    </div>
  );
};

jonspalmer on 26 Feb 2020

👍5

Ah, thanks @jonspalmer. That indeed did the trick, and makes sense.

benjarwar on 26 Feb 2020

Was this page helpful?

0 / 5 - 0 ratings