ui icon indicating copy to clipboard operation
ui copied to clipboard

Add option to keep container scrolling enabled when using Modal

Open jsakas opened this issue 1 year ago • 2 comments

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.

jsakas avatar Jul 07 '23 19:07 jsakas

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

jquense avatar Jul 07 '23 21:07 jquense

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.

jsakas avatar Jul 17 '23 20:07 jsakas