From 7ee052cf51d417990a8833e787d9e3e8fb6b20d7 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Mon, 26 Oct 2020 08:54:31 +0100
Subject: [PATCH 1/3] [docs] Improve a11y for initial Autocomplete demo

---
 docs/src/pages/components/autocomplete/ComboBox.js  | 3 ++-
 docs/src/pages/components/autocomplete/ComboBox.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 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" />
       )}
     />
   );

From 261854dfaa2132be42d4a123c3132fd5c0f57488 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Mon, 26 Oct 2020 09:46:25 +0100
Subject: [PATCH 2/3] Fix: combobox[disablePortal] does not work inside flex

---
 .../pages/components/autocomplete/ComboBox.js | 20 ++++++++++---------
 .../components/autocomplete/ComboBox.tsx      | 20 ++++++++++---------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js
index e1737ba03e4c70..cf89dd9220ad04 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.js
+++ b/docs/src/pages/components/autocomplete/ComboBox.js
@@ -5,15 +5,17 @@ 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="Movie" variant="outlined" />
-      )}
-    />
+    <div>
+      <Autocomplete
+        disablePortal
+        id="combo-box-demo"
+        options={top100Films}
+        style={{ width: 300 }}
+        renderInput={(params) => (
+          <TextField {...params} label="Movie" variant="outlined" />
+        )}
+      />
+    </div>
   );
 }
 
diff --git a/docs/src/pages/components/autocomplete/ComboBox.tsx b/docs/src/pages/components/autocomplete/ComboBox.tsx
index e1737ba03e4c70..cf89dd9220ad04 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.tsx
+++ b/docs/src/pages/components/autocomplete/ComboBox.tsx
@@ -5,15 +5,17 @@ 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="Movie" variant="outlined" />
-      )}
-    />
+    <div>
+      <Autocomplete
+        disablePortal
+        id="combo-box-demo"
+        options={top100Films}
+        style={{ width: 300 }}
+        renderInput={(params) => (
+          <TextField {...params} label="Movie" variant="outlined" />
+        )}
+      />
+    </div>
   );
 }
 

From 9a5c7b8085acd035ad232c4c801c316d389da0a2 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Tue, 3 Nov 2020 13:46:22 +0100
Subject: [PATCH 3/3] [Autocomplete] Use Popper with when disablePortal

---
 .../pages/components/autocomplete/ComboBox.js | 20 +++++++++----------
 .../components/autocomplete/ComboBox.tsx      | 20 +++++++++----------
 .../src/Autocomplete/Autocomplete.js          | 11 ++--------
 3 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/docs/src/pages/components/autocomplete/ComboBox.js b/docs/src/pages/components/autocomplete/ComboBox.js
index cf89dd9220ad04..e1737ba03e4c70 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.js
+++ b/docs/src/pages/components/autocomplete/ComboBox.js
@@ -5,17 +5,15 @@ import Autocomplete from '@material-ui/core/Autocomplete';
 
 export default function ComboBox() {
   return (
-    <div>
-      <Autocomplete
-        disablePortal
-        id="combo-box-demo"
-        options={top100Films}
-        style={{ width: 300 }}
-        renderInput={(params) => (
-          <TextField {...params} label="Movie" variant="outlined" />
-        )}
-      />
-    </div>
+    <Autocomplete
+      disablePortal
+      id="combo-box-demo"
+      options={top100Films}
+      style={{ width: 300 }}
+      renderInput={(params) => (
+        <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 cf89dd9220ad04..e1737ba03e4c70 100644
--- a/docs/src/pages/components/autocomplete/ComboBox.tsx
+++ b/docs/src/pages/components/autocomplete/ComboBox.tsx
@@ -5,17 +5,15 @@ import Autocomplete from '@material-ui/core/Autocomplete';
 
 export default function ComboBox() {
   return (
-    <div>
-      <Autocomplete
-        disablePortal
-        id="combo-box-demo"
-        options={top100Films}
-        style={{ width: 300 }}
-        renderInput={(params) => (
-          <TextField {...params} label="Movie" variant="outlined" />
-        )}
-      />
-    </div>
+    <Autocomplete
+      disablePortal
+      id="combo-box-demo"
+      options={top100Films}
+      style={{ width: 300 }}
+      renderInput={(params) => (
+        <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 de3ec2bf0b1456..3363fc1b49b12d 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 {
@@ -314,7 +308,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     openText = 'Open',
     options,
     PaperComponent = Paper,
-    PopperComponent: PopperComponentProp = Popper,
+    PopperComponent = Popper,
     popupIcon = <ArrowDropDownIcon />,
     renderGroup: renderGroupProp,
     renderInput,
@@ -327,8 +321,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,
@@ -481,6 +473,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
           className={clsx(classes.popper, {
             [classes.popperDisablePortal]: disablePortal,
           })}
+          disablePortal={disablePortal}
           style={{
             width: anchorEl ? anchorEl.clientWidth : null,
           }}