I have a modal component I'm documenting via Storybook that is shown via a click of a button. I used the useState hook of @storybook/preview-api to set the open state of the modal when the button is clicked. It's working in that the modal is shown, however, the state appears to be shared between the primary block and the first story so two modals are actually rendered when any of the two canvases' button is clicked. The first modal is from the primary block, and the second is from the first story, where the second modal overlaps the first. But when the args are updated via the primary block's control panel, it doesn't apply to the first story, so what happens is the modal with the updated content is hidden behind the modal with the original content. I know it's confusing so here's a video of the issue:
On the primary doc block's control panel, update the description arg to have more content.
Click the OPEN MODAL button of the primary doc block. Notice that there are two modals rendered stacked together where the top modal doesn't have the updated content.
Describe the bug
I have a modal component I'm documenting via Storybook that is shown via a click of a button. I used the
useState
hook of@storybook/preview-api
to set theopen
state of the modal when the button is clicked. It's working in that the modal is shown, however, the state appears to be shared between the primary block and the first story so two modals are actually rendered when any of the two canvases' button is clicked. The first modal is from the primary block, and the second is from the first story, where the second modal overlaps the first. But when the args are updated via the primary block's control panel, it doesn't apply to the first story, so what happens is the modal with the updated content is hidden behind the modal with the original content. I know it's confusing so here's a video of the issue:https://github.com/user-attachments/assets/c2f3aaea-dcb0-4a93-958c-52e73ba2eaab
Reproduction link
https://stackblitz.com/edit/github-y4gwez?file=src%2Fstories%2FModal.stories.tsx
Reproduction steps
OPEN MODAL
button of the primary doc block. Notice that there are two modals rendered stacked together where the top modal doesn't have the updated content.System
Additional context
No response