title: How can Material-UI's Dialog allow interaction behind the dialog?
body: <p>I am using <a href="https://v3.material-ui.com/" rel="noreferrer">Material-UI</a> in my <strong>React</strong> app, and I have a <code>Dialog</code> that appears over several form elements after I click a button.</p>
  
  <p>I also have that dialog set to allow it to be dragged using <a href="https://v3.material-ui.com/demos/dialogs/#draggable-dialog" rel="noreferrer">react-draggable</a>. </p>
  
  <p>When the dialog is showing, <em>none of the form elements behind it are ale to be accessed</em>. I realize it intuitively makes sense to block interaction with the elements behind the dialog.</p>
  
  <p>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.</p>
  
  <p>Code example <a href="https://codesandbox.io/s/material-demo-fdypj" rel="noreferrer">here</a>:</p>
  
  <p><strong>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)?</strong></p>