[Autocomplete] Use Popper with when disablePortal (#23263)

mui · Nov 12, 2020 · c1b3e33 · c1b3e33
1 parent 96118a2
commit c1b3e33
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,
           }}