Autocomplete disablePortal breaks Popper behavior

[BrentFarese]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

The Autocomplete component allows a developer to pass disablePortal. The disablePortal implementation is found here. Because the implementation simply relies on absolute positioning of a <div />, it breaks functionality of the Popper component that contains the Autocomplete options. For instance, the list options don't flip their anchor position when they encounter the edge of the browser window.

Expected Behavior 🤔

disablePortal should maintain the existing functionality of the Popper.

Steps to Reproduce 🕹

Steps:

Create an Autocomplete component and use disablePortal and observe when the list box options encounter the browser window edge, no flipping of the list box options occurs.

Context 🔦

We are using disablePortal as we have a click-away listener around the Autocomplete and it only works if the list box options stay within the DOM hierarchy of the Autocomplete. But, the disablePortal breaks the UI functionality of the Popper. We are going to try now just creating our own custom Popper to use with the Autocomplete that doesn't rely on a portal.

Possible Fix: Simply leverage the disablePortal prop on Material-UI's Popper component to preserve UI behavior but provide a disablePortal option to the Autocomplete?

Your Environment 🌎

Tech	Version
Material-UI	v4.10.2
Material-UI-Lab	4.0.0-alpha.56
React	17
Browser	Chrome
TypeScript	Y

[oliviertassinari]

@eps1lon works on this problem in #23263.