Storybook: Button knob causes a re-render on a HTML story

[andyearnshaw]

Describe the bug
When you add a button(label, action) knob to a HTML story, clicking the button causes the story to rerender after performing the handler action.

To Reproduce
This minimal story code should repro:

import { storiesOf } from '@storybook/html';
import { withKnobs, button } from '@storybook/addon-knobs';

storiesOf('Button bugs', module)
  .addDecorator(withKnobs)
  .add('Rerender', () => {
    const input = document.createElement('input');
    button('Focus input', () => {
        input.ownerDocument.defaultView.focus();
        input.focus();
    });
    return input;
  });

When you click the "Focus input" button knob, the input doesn't actually get focus. On closer inspection, you can see that this is because the story re-renders and the input that gets focus is destroyed.

Expected behavior
I would expect a button action not to automatically re-render a story. If re-rendering is desirable in some cases, then a return false; could be provided to prevent re-render.

System:

• Framework: html
• Addons: knobs
• Version: 5.1.0-alpha.36

Additional context
The reproduce story above is a very simple replication of our use case. We're providing a component with a method that programmatically pulls focus, we are using a button knob but the only way to stop it from re-rendering is to throw an error at the end of the handler function, which is far from desirable.

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

[danrha]

Are there any updates on this? I'm having a similar issue using the knob on a React story. It didn't happen on Storybook 3. My click handler is sending an event the component is listening to, and the component effectively receives the message, but immediately re-renders, so the change can't be seen.

[danrha]

I submitted a pull request several days ago which got approved, so the fix should be up on an upcoming version. @andyearnshaw 's suggestion to prevent re-render by returning false was implemented.

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-alpha.37 containing PR #7197 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[shilman]

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.1.10 containing PR #7197 that references this issue. Upgrade today to try it out!