Storybook: Knobs object UI disappears when changing values

[benjarwar]

Describe the bug

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

To Reproduce

1. Create an object using addon-knobs
2. npm run storybook
3. Change the object values in the Storybook knobs tab
4. Note the object disappears

Expected behavior

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

Screenshots

Code snippets

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

1. Clone the repo
2. npm i
3. 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 

[jonspalmer]

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>
  );
};

[benjarwar]

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