Button knob causes a re-render on a HTML story

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.

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

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