Add a Dialog created without Modal

[darkgrayknight]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Dialogs are both modal and non-modal, as noted in mdn web docs and w3c aria.

I am currently building some tool windows and toolboxes that would be great as floating, draggable dialogs that allow interaction on the page below as well as in the dialog. However, the current Dialog is build on top of Modal, and that creates issues with accessibility for accessing controls on the page and in the dialog.

Can we add a property to Dialog (and possibly Drawer) for isModal={false}?

Examples 🌈

A decent example is Photopea. When you select Layer -> Layer Style -> Blending Options and you get a floating, draggable dialog with options inside the dialog, but also can still select other things at the same time.

Motivation 🔦

Really, the summary expresses it best. Dialogs can be modal or non-modal. Why is Material UI limited to only modal Dialogs? And why create more accessibility issues by limiting to modals? While there are ways to turn off aspects of the Modal component, it has several bugs that still create accessibility issues that have not yet been fixed.

[plgagnon2]

bumping this, really need a non modal Dialog

[siriwatknp]

I checked the specs of both MD2 and MD3, they are all modal.

I think we need another component for the non-modal dialog. This request is similar to Select component for not being a modal.

[plgagnon2]

atm can be "hacked" via this https://stackoverflow.com/questions/55733179/how-to-create-a-non-modal-dialog-in-material-ui