react-restart / ui

MIT License
132 stars 22 forks source link

Add option to keep container scrolling enabled when using Modal #88

Open jsakas opened 1 year ago

jsakas commented 1 year ago

Is your feature request related to a problem? Please describe

I am working on a set of components in a library: Dialog, Modal, and Popover. It is feasible that these can be nested in an order. For example, a Modal with a Popover button inside of it.

I want to use the Modal from this library as the base for all three of these, as it allows us to nest these in any order and keeps track of the open order and focus state.

The Modal component can almost be used to create accessible popovers as described, but it needs to allow us to keep container scrolling intact when using stand-alone outside of a modal.

Describe the solution you'd like

A new prop added to Modal, disableContainerScroll, that defaults to true.

jquense commented 1 year ago

You can control this via the modal manager prop. Check out the constructor options to it to disable the overflow.

jsakas commented 1 year ago

Hi @jquense, thanks for the reply and outstanding library.

I see the option you are referring to now; however, in the functionality I've described, the scroll would only be disabled for modals or dialogs but remain enabled for popovers. if I am reading this properly, you would lose the close ordering if you use different modal managers for different component types.

It would be interesting if individual modals override this setting while active, and the modal manager would pull the prop off the modal instance.