How can Material-UI's Dialog allow interaction behind the dialog?

Question

I am using Material-UI in my React app, and I have a Dialog that appears over several form elements after I click a button.

I also have that dialog set to allow it to be dragged using react-draggable.

When the dialog is showing, none of the form elements behind it are ale to be accessed. I realize it intuitively makes sense to block interaction with the elements behind the dialog.

However, I am trying to figure out how to have the dialog showing, and yet still being able to edit the form elements behind it.

Code example here:

Does anyone know if it's possible to show a MaterialUI Dialog and still be able to interact with form elements behind the dialog (ie, when the dialog is dragged away)?

Answer 1

The dialog was meant to block all other interaction so the user can focus on its contents. Anyway, I found one solution, probably not the better but is working here, the code is this:

<Dialog
  hideBackdrop // Disable the backdrop color/image
  disableEnforceFocus // Let the user focus on elements outside the dialog
  style={{ position: 'initial' }} // This was the key point, reset the position of the dialog, so the user can interact with other elements
  disableBackdropClick // Remove the backdrop click (just to be sure)
  ...
>
  ...
</Dialog>

Here a working example