Storybook: addon-knobs - prevent page reload

[blemaire]

Is your feature request related to a problem? Please describe.
Changing a knobs value the page refreshes meaning animations are not visible on the components

Demo

[leoyli]

As far as I know, changing on a knob is not going to "refresh" the page. Not sure which framework you are using. In react, it enforce rerendering due to props get changed. It is also important to ensure the component "key" is persisted (in cased used). Could your provide more details or some filming on what was happened in your use case?! Tx!

[blemaire]

@leoyli I've updated the description with a gif showing the issue

[leoyli]

This used to give a smooth state transition rather than unmount and remount the component. Possibly due to other knobs interference or really have something changed internally in knob. @shilman do you have any idea?! I'm also thinking how to make knob sync with the preview. Taking the above film as an example. When the disable clicked, the knob also being clicked.

[shilman]

@leoyli this is the most recent relevant change AFAIK https://github.com/storybooks/storybook/pull/6022

[danstans]

I had a similar issue; if you're using withOptions switching to addParamters is what fixed this issue for me. #5665 might be relevant.

addParameters({
  options: { ... }
});

[blemaire]

@danstans I already use addParameters but that's for other plugins, not knobs, right?

[danstans]

I believe according to the 5.0 upgrade guide, this is something that could cause breaking issues. If you're using withOptions on 5.0, I'd recommend trying out the new method. It's what fixed reloading for me.

[blemaire]

You

I had a similar issue; if you're using withOptions switching to addParamters is what fixed this issue for me

me

I already use addParameters

you

If you're using withOptions on 5.0, I'd recommend trying out the new method.

@danstans I'm struggling to follow. you said that addParameters({options}) is what fixed it for you.
Then I said that's what i'm doing and you're then asking me not to use withOptions

here is my setup:

// config.js

addDecorator(centered);
addParameters({viewPorts: INITIAL_VIEWPORTS});
addParameters({
  options: {
    panelPosition: 'right',
    theme: nwaTheme,
  },
});

// buttons.stories.js

storiesOf('Components|Button', module)
  .addDecorator(
    moduleMetadata({
      imports: [ButtonsModule],
    }),
  )
  .addDecorator(withKnobs)
  .add(
    'default',
    () => ({
      template: `
        <button
          [theme]="theme"
          [disabled]="disabled"
        >
          {{label}}
        </button>
      `,
      props: {
        theme: radios('Theme', ThemeEnum, ThemeEnum.Neutral),
        label: text('Label', 'My Button'),
        disabled: boolean('Disabled', false),
      },
    }),
);

[danstans]

Oops, my bad, I misunderstood. That looks similar to what I have.

[leoyli]

related to #6679.

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

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[pitops]

I am having exactly the same issue with a modal. The transitions don't work, instead the component is re-rendered. Any updates?