-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
addon-knobs - prevent page reload #6705
Comments
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! |
@leoyli I've updated the description with a gif showing the issue |
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 |
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: { ... }
}); |
@danstans I already use |
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. |
You
me
you
@danstans I'm struggling to follow. you said that 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),
},
}),
); |
Oops, my bad, I misunderstood. That looks similar to what I have. |
related to #6679. |
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! |
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! |
I am having exactly the same issue with a modal. The transitions don't work, instead the component is re-rendered. Any updates? |
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
The text was updated successfully, but these errors were encountered: