From c1b3e334d0b94bfb2eda6fe2af08df43f2755b1f Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 12 Nov 2020 12:52:12 +0100
Subject: [PATCH] [Autocomplete] Use Popper with when disablePortal (#23263)

---
 docs/src/pages/components/autocomplete/ComboBox.js    |  3 ++-
 docs/src/pages/components/autocomplete/ComboBox.tsx   |  3 ++-
 packages/material-ui/src/Autocomplete/Autocomplete.js | 11 ++---------
 3 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js
index 24ab3f73ec45ef..e1737ba03e4c70 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.js
+++ b/docs/src/pages/components/autocomplete/ComboBox.js
@@ -6,11 +6,12 @@ import Autocomplete from '@material-ui/core/Autocomplete';
 export default function ComboBox() {
   return (
     <Autocomplete
+      disablePortal
       id="combo-box-demo"
       options={top100Films}
       style={{ width: 300 }}
       renderInput={(params) => (
-        <TextField {...params} label="Combo box" variant="outlined" />
+        <TextField {...params} label="Movie" variant="outlined" />
       )}
     />
   );
diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx
index 24ab3f73ec45ef..e1737ba03e4c70 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.tsx
+++ b/docs/src/pages/components/autocomplete/ComboBox.tsx
@@ -6,11 +6,12 @@ import Autocomplete from '@material-ui/core/Autocomplete';
 export default function ComboBox() {
   return (
     <Autocomplete
+      disablePortal
       id="combo-box-demo"
       options={top100Films}
       style={{ width: 300 }}
       renderInput={(params) => (
-        <TextField {...params} label="Combo box" variant="outlined" />
+        <TextField {...params} label="Movie" variant="outlined" />
       )}
     />
   );
diff --git a/packages/material-ui/src/Autocomplete/Autocomplete.js b/packages/material-ui/src/Autocomplete/Autocomplete.js
index 209d5f4ddc0864..011f478ddaa52a 100644
--- a/packages/material-ui/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui/src/Autocomplete/Autocomplete.js
@@ -254,12 +254,6 @@ export const styles = (theme) => ({
   },
 });
 
-function DisablePortal(props) {
-  // eslint-disable-next-line react/prop-types
-  const { anchorEl, open, ...other } = props;
-  return <div {...other} />;
-}
-
 const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
@@ -313,7 +307,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     openText = 'Open',
     options,
     PaperComponent = Paper,
-    PopperComponent: PopperComponentProp = Popper,
+    PopperComponent = Popper,
     popupIcon = <ArrowDropDownIcon />,
     renderGroup: renderGroupProp,
     renderInput,
@@ -326,8 +320,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
   } = props;
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
-  const PopperComponent = disablePortal ? DisablePortal : PopperComponentProp;
-
   const {
     getRootProps,
     getInputProps,
@@ -480,6 +472,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
           className={clsx(classes.popper, {
             [classes.popperDisablePortal]: disablePortal,
           })}
+          disablePortal={disablePortal}
           style={{
             width: anchorEl ? anchorEl.clientWidth : null,
           }}