Multiple modals in storybook, jumping issue

[fabpico]

carbon-components 10.35.0
carbon-components-react 7.35.0

Detailed 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)

[joshblack]

Hi there, @FabianPiconeDev 👋

Could you provide some steps to reproduce this issue in a CodeSandbox?

[fabpico]

Hi @joshblack, sure:

1. Go to https://codesandbox.io/s/9312-8ni3p .
2. Size the browser area to minimum medium breakpoint.
3. Scroll to a modal, click on its content area (nothing happens yet).
4. Scroll to to another modal, click on its content area, you should notice a scrolling jump.

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:

[tay1orjones]

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

[fabpico]

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
Modal stories code:

• https://github.com/FabianPiconeDev/storybook-carbon-modal-jumping/blob/master/src/stories/Modal.stories.jsx
• https://github.com/FabianPiconeDev/storybook-carbon-modal-jumping/blob/master/src/stories/Modal.stories.scss

Screenrecording:

[fabpico]

The Show code toggle is also affected, which is a problem. See:

[tay1orjones]

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 (wrapFocus) behavior included in the Modal implementation. One thing you might try - apply a unique class to each modal, and use the selectorPrimaryFocus prop to configure a primary focus target unique to each modal.

Otherwise I don't believe we intend to support multiple modals on the same page.

[dakahn]

Closing this up as a wont fix. We can reopen if we find the issue unrelated to multiple open modals in the future 👍🏾