title: How to show downshift + popper on top of material-ui dialog?
body: <p>I've implemented an autocomplete multi-select field based on the <code>Downshift</code> with <code>Popper</code> <a href="https://material-ui.com/demos/autocomplete/#downshift" rel="noreferrer">Material-UI demo</a>. That worked well up until I tried to reuse the component within a <a href="https://material-ui.com/api/dialog/#dialog" rel="noreferrer">Material-UI Dialog</a>. The <code>Popper</code> appears behind the mask of the <code>Dialog</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/dEVPO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dEVPO.png" alt="Popper behind dialog&#39;s mask"></a></p>
  
  <p>I've modified the Material-UI demo as an example of this behavior: <a href="https://codesandbox.io/s/76moj1mq1" rel="noreferrer">https://codesandbox.io/s/76moj1mq1</a>.</p>
  
  <p>Looking at Material-UI's old auto-complete solution, it use to use <code>Popover</code> instead of <code>Popper</code>. I tried substituting that in to see if it's <code>z-index</code> would be higher than that of the <code>Dialog</code>, but I think <code>Popover</code> steals focus from <code>Downshift</code> in a way that triggers the autocomplete to close immediately after it opens. Here's an example, again modifying Material-UI's demo <a href="https://codesandbox.io/s/wk84p1myz7" rel="noreferrer">https://codesandbox.io/s/wk84p1myz7</a>.</p>
  
  <p>Any ideas on how I can make either approach work?</p>