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: storybookjs/storybook#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/theming@5.2.5 
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 storybookjs/storybook#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