[dialog] Body scrollbar is overlapping when nesting Dialogs

[MasterProvider]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/modern-moon-ntps8w
2. Click the edit icon to open the activity
3. In activity click update to open Inner Dialog

Current behavior

When opening a nested (inner) Dialog inside a fullscreen outer Dialog, the scrollbar behavior becomes inconsistent.

Opening the inner Dialog causes a body scrollbar to appear.

After closing the inner Dialog, the fullscreen outer Dialog overlaps with the scrollbar, causing layout shifting / scrollbar overlay issues.

Expected behavior

Opening or closing the inner Dialog should not cause the fullscreen outer Dialog to overlap with the body scrollbar.

When the inner Dialog is opened, the scrollbar should be hidden. When the inner Dialog is closed, the fullscreen Dialog should not overlap with the body scrollbar or cause layout shifts.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Dialog

[AmitSingh-5600]

on initial render there is one scrollbar which is body scrollbar.

on clicking edit icon we got another scrollbar for the edit modal

on clicking update another modal opens and this modal has its the body scrollbar.

now on closing the nested modal both the body scrollbar and the scrollbar of edit modal is visible.

this is what I have understood from this issue .

@mj12albert could you please assign this issue to me . I think i found the solution

[mj12albert]

@AmitSingh-5600 Sure ~ you can ping this thread for assistance/reviews 🙏

[MasterProvider]

This is fix in v7.3.3

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[mj12albert]

@MasterProvider Is it really fixed? I don't see anything in the changelog that seems related 😅

https://github.com/mui/material-ui/releases/tag/v7.3.3

[MasterProvider]

@MasterProvider Is it really fixed? I don't see anything in the changelog that seems related 😅

https://github.com/mui/material-ui/releases/tag/v7.3.3

Apologies, I initially thought this issue was already fixed since it worked fine when I tested it yesterday. However, upon further checking, the behavior is still present.

Thank you, @mj12albert, for confirming this.

[mohammad-ali-dehlvi]

I think this is not the issue with Material UI Dialog; instead, some JavaScript is running inside the plyr-react library, which is overriding the overflow property of the body.

Note: I suggest using `iframe` or `Shadow DOM` technique to resolve this or use some other library for video player

With Plyr tag from the plyr-react library

https://github.com/user-attachments/assets/4afa0d46-65cb-4883-99bd-03dfaa077185

---

Without `Plyr` tag from the `plyr-react` library

https://github.com/user-attachments/assets/1e7bbcaa-7711-4473-9e7c-156e3447e81b

cc @mj12albert @MasterProvider @AmitSingh-5600

[mj12albert]

@mohammad-ali-dehlvi Thanks you are right ~

Removing import "plyr-react/plyr.css" also works (without removing the Plyr component), so I guess the cause is their CSS and not the whole library, you could possibly patch over plyr.css to fix this @MasterProvider