1

Ran into an issue using the MUI Modal component with the nested Popper.

So, we have an edit form that is implemented with MUI Modal (once opened, scroll Y is disabled by default), inside we have a MUI popper that is used with a calendar.

It how it looks now on a big screen looks fine.

But on smaller screens, when the Popper is open, part of the component is cut off and I can't scroll or do anything.

Here's what it looks like.

Can't see part of the component or scroll it

I found some solution - add disablePortal prop to Popper, in this case it's nesting to the parent and I can scroll inside of the Modal, but it looks kinda bad for me. (we don't have effect of the floating Popper over Modal).

How it looks with disablePortal, we have a scroll now.

With disablePortal

So the problem, I need to make somehow the Modal to react on opened Popper inside.

Do I need to use other components/libs for this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129

0 Answers0