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

fatso83 · 2019-10-29T11:31:03Z

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:

Add a string knob to any component
See it render on the storybook
Change the value
See it update. The console will say something about storybookjs/knobs/set
Change the value again
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.

The text was updated successfully, but these errors were encountered:

shilman · 2019-10-29T13:11:15Z

@Hypnosphi could this be hooks-related?

Hypnosphi · 2019-10-29T13:35:08Z

Maybe

shilman · 2019-10-29T13:39:26Z

@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 · 2019-10-29T19:13:26Z

Not until Friday, sorry

Hypnosphi · 2019-11-01T19:27:54Z

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

Hypnosphi · 2019-11-01T20:27:00Z

@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 · 2019-11-02T06:11:21Z

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 · 2019-11-06T11:21:28Z

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 · 2019-11-09T09:45:35Z

@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 · 2019-11-09T12:11:58Z

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 · 2019-11-09T23:09:20Z

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

shilman · 2019-11-10T01:16:50Z

@Hypnosphi yes please!

Hypnosphi · 2019-11-10T11:18:52Z

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 · 2019-11-16T00:08:37Z

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 · 2019-12-07T00:40:08Z

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 · 2020-05-28T17:55:44Z

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.

Please upgrade and try them out today. Thanks for your help and support getting this stable for release!

shilman · 2020-06-01T14:38:51Z

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?

Hypnosphi self-assigned this Oct 30, 2019

shilman self-assigned this Nov 7, 2019

shilman transferred this issue from storybookjs/storybook May 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

fatso83 commented Oct 29, 2019

shilman commented Oct 29, 2019 •

edited

Loading

Hypnosphi commented Oct 29, 2019

shilman commented Oct 29, 2019

Hypnosphi commented Oct 29, 2019

Hypnosphi commented Nov 1, 2019

Hypnosphi commented Nov 1, 2019 •

edited

Loading

KeionneDerousselle commented Nov 2, 2019

pladaria commented Nov 6, 2019 •

edited

Loading

shilman commented Nov 9, 2019 •

edited

Loading

Hypnosphi commented Nov 9, 2019 •

edited

Loading

Hypnosphi commented Nov 9, 2019 •

edited

Loading

shilman commented Nov 10, 2019

Hypnosphi commented Nov 10, 2019 •

edited

Loading

sanbornhilland commented Nov 16, 2019

stale bot commented Dec 7, 2019

shilman commented May 28, 2020

shilman commented Jun 1, 2020

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

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

Comments

fatso83 commented Oct 29, 2019

shilman commented Oct 29, 2019 • edited Loading

Hypnosphi commented Oct 29, 2019

shilman commented Oct 29, 2019

Hypnosphi commented Oct 29, 2019

Hypnosphi commented Nov 1, 2019

Hypnosphi commented Nov 1, 2019 • edited Loading

KeionneDerousselle commented Nov 2, 2019

pladaria commented Nov 6, 2019 • edited Loading

shilman commented Nov 9, 2019 • edited Loading

Hypnosphi commented Nov 9, 2019 • edited Loading

Hypnosphi commented Nov 9, 2019 • edited Loading

shilman commented Nov 10, 2019

Hypnosphi commented Nov 10, 2019 • edited Loading

sanbornhilland commented Nov 16, 2019

stale bot commented Dec 7, 2019

shilman commented May 28, 2020

shilman commented Jun 1, 2020

shilman commented Oct 29, 2019 •

edited

Loading

Hypnosphi commented Nov 1, 2019 •

edited

Loading

pladaria commented Nov 6, 2019 •

edited

Loading

shilman commented Nov 9, 2019 •

edited

Loading

Hypnosphi commented Nov 9, 2019 •

edited

Loading

Hypnosphi commented Nov 9, 2019 •

edited

Loading

Hypnosphi commented Nov 10, 2019 •

edited

Loading