Modal: scrolling issue when using sub-modals

[guillaumep]

✔ BUGS → This form is required:

I have a modal that invokes a modal, and this blocs scrolling in the first modal.

Here is how to reproduce:

Steps

1. Open: https://codesandbox.io/s/pw5on5o7m7
2. In the running app, click on 'Show modal'.
3. Reduce window height until the button row of the modal is no longer visible.
4. You will notice you can access the button row by scrolling the screen. Scroll so you can see the buttons and click on 'Open sub modal'.
5. Close the modal with the 'x' at the top-right corner.
6. You will be back at the first modal. Try to scroll to access the buttons.

Expected Result

You can access the button row by scrolling.

Actual Result

Scrolling does not work.

Version

0.75.1

Testcase

• https://codesandbox.io/s/pw5on5o7m7
• Also: https://github.com/guillaumep/semantic-ui-react-modal-issue/blob/master/src/App.js

[layershifter]

Thanks for detailed report 👍 Help is much appreciated there

[guillaumep]

I think I have found what is going on: when opening the sub-modal, the "scrolling" class is removed from the body element. It is not added back when the sub-modal is closed.

My understanding is that this is done here:

Semantic-UI-React/src/modules/Modal/Modal.js

Line 262 in 9904616

mountNode.classList.remove('scrolling')

As the second modal does not know about the first, the second modal removes the "scrolling" class, even though it should not have done so.

[RetroCraft]

Seems to already have been talked about (but not fixed) in #1157.

There's already a workaround solution there, for anybody interested.

[RetroCraft]

I've incorporated the workaround into a PR. Feedback?

[nzhtrtlc]

Is it fixed ? or not yet ?

[Zacele]

Could someone please fix this issue. It is causing alot of mess in my project right now

[nzhtrtlc]

@Zacele It is already fixed but not merged yet. There are 24 pull requests still waiting for approve.
I found a temp solution. I added this css code in to my css file. Then i imported this css file into javascript class which includes my modal.

.dimmed.dimmable > .ui.animating.dimmer, .dimmed.dimmable > .ui.visible.dimmer, .ui.active.dimmer { overflow: auto }

[guillaumep]

@Zacele @nzhtrtlc @RetroCraft Please have a look at #2394.