Storybook: v5.2.5: Only first change of a knob is registered

[fatso83]

Describe the bug
Only the first change to a text or number field (probably other types as well) registers and causes the component to update. It seems to be caused by there being a single set event (for which there is a listener) and no listeners for the subsequent change events.

To Reproduce
Steps to reproduce the behavior:

1. Add a string knob to any component
2. See it render on the storybook
3. Change the value
4. See it update. The console will say something about storybookjs/knobs/set
5. Change the value again
6. Assert there has been no change/rerender. The console will say something about storybookjs/knobs/change for each subsequent change

Expected behavior
The console should rerender

Screenshots
This screenshot shows there are 0 listeners registered for the change event:

Code snippets

    <ConversationSummary
        mostRecentMessage={text('Most recent message', "hey, there, is it me you're looking for?")}
        numberOfUnreadMessages={number('Unread messages', 2)}
      })}
    />

System:
npx -p @storybook/cli@next sb info just hangs and never gets past this output:

Environment Info:

My manual way:

$ jq .dependencies package.json  | egrep 'react|storybook' | pbcopy; pbpaste
  "react": "^16.11.0",
  "react-addons-deep-compare": "0.0.1",
  "react-autosuggest": "^9.4.3",
  "react-dom": "^16.11.0",
  "react-idle-timer": "^4.2.11",
  "react-json-view": "^1.19.1",
  "react-jss": "^8.6.1",
  "react-redux": "^7.1.1",
  "react-router": "^5.1.2",
  "react-router-dom": "^5.1.2",
  "tcomb-react": "^0.9.3",

$ jq .devDependencies package.json  | egrep 'react|storybook' | pbcopy; pbpaste
  "@babel/plugin-transform-react-jsx": "^7.3.0",
  "@storybook/addon-actions": "^5.2.5",
  "@storybook/addon-knobs": "^5.2.5",
  "@storybook/addon-links": "^5.2.5",
  "@storybook/react": "^5.2.5",
  "@storybook/ui": "^5.2.5",
  "@testing-library/react": "^9.3.0",
  "enzyme-adapter-react-16": "^1.15.1",
  "eslint-plugin-react": "^7.16.0",

Additional context
Reverting @storybook/* to v5.1.9 will fix the issue.

[shilman]

@Hypnosphi could this be hooks-related?

[Hypnosphi]

Maybe

[shilman]

@Hypnosphi I think there might be a hooks patch that didn't make it into master yet due to merge conflicts: https://github.com/storybookjs/storybook/pull/8287

Would you mind patching it over?

[Hypnosphi]

Not until Friday, sorry

[Hypnosphi]

Weird, I only see conflicts in package.json & yarn.lock

[Hypnosphi]

@shilman unfortunately, I can't test it on master: yarn bootstrap --core fails with typescript errors:

lerna ERR! yarn run prepare exited 1 in '@storybook/theming'
lerna ERR! yarn run prepare stdout:
$ node ../../scripts/prepare.js
src/animation.ts(54,14): error TS2742: The inferred type of 'animation' cannot be named without a reference to '@emotion/css/node_modules/@emotion/serialize'. This is likely not portable. A type annotation is necessary.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run prepare stderr:
ERR! FAILED (ts) :  
ERR! FAILED to compile ts: @storybook/[email protected] 
error Command failed with exit code 1.

lerna ERR! yarn run prepare exited 1 in '@storybook/theming'
error Command failed with exit code 1.

[KeionneDerousselle]

I'm also having this issue, but when I downgrade @storybook/* from 5.2.5 to 5.1.9, I get an error saying that none of my stories can be found. Is there a difference in setup between version 5.2.x and 5.1.x?

[pladaria]

Same issue here. We cannot downgrade because we already migrated several stories to the new format :/

Is there anything we can do to help merging the fix?

[shilman]

@Hypnosphi Here's what I did:

git cherry-pick -m 1 b51f52d
# resolve conflicts manually
yarn bootstrap --core
yarn test --core --update

However, the test fails:

 FAIL  lib/client-api/src/hooks.test.js
  ● Preview hooks › useEffect › doesn't retrigger the effect from if decorator calls story twice

    expect(jest.fn()).toHaveBeenCalledTimes(1)

    Expected mock function to have been called one time, but it was called two times.

      135 |       };
      136 |       run(story, [decorator]);
    > 137 |       expect(effect).toHaveBeenCalledTimes(1);
          |                      ^
      138 |     });

Help getting this merged would be much appreciated.

[Hypnosphi]

I have 2 failing tests on clean master:

Summary of all failing tests
 FAIL  addons/storyshots/storyshots-core/stories/storyshot.specificConfig.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'get' of undefined

    > 1 | import global, { describe } from 'global';
        | ^
      2 | import addons, { mockChannel } from '@storybook/addons';
      3 | import ensureOptionsDefaults from './ensureOptionsDefaults';
      4 | import snapshotsTests from './snapshotsTestsTemplate';

      at _interopRequireWildcard (node_modules/@babel/runtime/helpers/interopRequireWildcard.js:12:20)
      at Object.<anonymous> (addons/storyshots/storyshots-core/src/api/index.js:1:1)
      at Object.<anonymous> (addons/storyshots/storyshots-core/src/index.js:2:1)
      at Object.<anonymous> (addons/storyshots/storyshots-core/stories/storyshot.specificConfig.test.js:2:1)

 FAIL  addons/storyshots/storyshots-core/stories/storyshot.renderOnly.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'get' of undefined

    > 1 | import global, { describe } from 'global';
        | ^
      2 | import addons, { mockChannel } from '@storybook/addons';
      3 | import ensureOptionsDefaults from './ensureOptionsDefaults';
      4 | import snapshotsTests from './snapshotsTestsTemplate';

      at _interopRequireWildcard (node_modules/@babel/runtime/helpers/interopRequireWildcard.js:12:20)
      at Object.<anonymous> (addons/storyshots/storyshots-core/src/api/index.js:1:1)
      at Object.<anonymous> (addons/storyshots/storyshots-core/src/index.js:2:1)
      at Object.<anonymous> (addons/storyshots/storyshots-core/stories/storyshot.renderOnly.test.js:2:1)

UPD: it's https://github.com/storybookjs/storybook/issues/6490

[Hypnosphi]

@shilman hooks.test.js passes for me. Should I just commit it to master?

[shilman]

@Hypnosphi yes please!

[Hypnosphi]

OK I did, but wasn't able to test it manually because "Hooks" kind gives me a blank page with following exception:

main.b692a25009555ef73b0c.bundle.js:3357 Uncaught TypeError: list.find is not a function
    at getSelectedBackgroundColor (main.b692a25009555ef73b0c.bundle.js:3357)
    at main.b692a25009555ef73b0c.bundle.js:3450
    at main.b692a25009555ef73b0c.bundle.js:12870
    at updateContextConsumer (vendors~main.3034e68520978db5a7f6.bundle.js:127048)
    at beginWork (vendors~main.3034e68520978db5a7f6.bundle.js:127236)
    at performUnitOfWork (vendors~main.3034e68520978db5a7f6.bundle.js:130876)
    at workLoop (vendors~main.3034e68520978db5a7f6.bundle.js:130916)
    at HTMLUnknownElement.callCallback (vendors~main.3034e68520978db5a7f6.bundle.js:111713)
    at Object.invokeGuardedCallbackDev (vendors~main.3034e68520978db5a7f6.bundle.js:111763)
    at invokeGuardedCallback (vendors~main.3034e68520978db5a7f6.bundle.js:111820)

An express debugging showed that parameters.backgrounds is "_duplicate_root.event.args.0.stories.addons-a11y-basebutton--default.parameters.backgrounds"

Looks like something went wrong with telejson deserialization cc @ndelangen

[sanbornhilland]

It's unclear to me if you guys have a handle on this or not but with 5.2.6 I am seeing similar behaviour after a useState setter is called so I thought I'd provide some information about what I'm seeing.

For example this will cause the knob to stop applying changes AFTER the onClick handler is run. If the onClick handler is run then the range knob working but if the setter never gets called the knob works.

.add('Default', () => {
    const [name, setName] = useState('')
    const width = number(
      'Width',
      42,
      {
        min: 1,
        max: 100,
        step: 1,
        range: true,
      },
    )

    return (
      <div 
        style={{ width }}
        onClick={() => setName('foo')}
      >
       { foo }
      </div>
  })

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