-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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
Multiple modals in storybook, jumping issue #9312
Comments
Hi there, @FabianPiconeDev 👋 Could you provide some steps to reproduce this issue in a CodeSandbox? |
Hi @joshblack, sure:
The behavior in CodeSandbox is slightly different than in Storybook. But an unexpected scroll jump happens in both cases. It seems that it has to do with a focusing on the primary-, and/or close button. See screen recording: |
@FabianPiconeDev Have you attempted to put these in different stories to prevent the case of multiple modals being in the same story? I can see the jump in the codesandbox, but am unsure on your use case. |
Hi @tay1orjones. Each modal is already in a single story. I can't find a simple basic ready-to-use react+storybook Codesandbox, but now I created a new simple reproducible example project with react+storybook. Feel free to clone and run the project: https://github.com/FabianPiconeDev/storybook-carbon-modal-jumping
Screenrecording: |
The implementation of modal includes the intent that only one modal be displayed on a page at a time. That said, I think this could be related to the focus trap ( Otherwise I don't believe we intend to support multiple modals on the same page. |
Closing this up as a wont fix. We can reopen if we find the issue unrelated to multiple open modals in the future 👍🏾 |
carbon-components
10.35.0carbon-components-react
7.35.0Detailed description
I have multiple Modal stories in storybook. I render one open Modal per story. (I already fixed the issue that the stories are not scrollable due to carbon`s overflow hidden.)
Now, when I click on the content area of a Modal, some magic scrolling happens that jumps me to the very top of the page. I looked for
click
in the Modal sourcecode, but I could`t find anything useful to prevent this phenomena.I tried to give each modal a unique ID for trying to possibly separate any magic stuff happening between the Modals on click, but it didn't help.
I don't expect a scroll of any type by clicking on an area in the Modal. No scroll should happen when clicking on any area of the Modal.
Chrome 91.0.4472.164 (Official Build) (64-bit)
The text was updated successfully, but these errors were encountered: