diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md
index 3b98615f021a0d..88ab04054a77b6 100644
--- a/docs/pages/api/autocomplete.md
+++ b/docs/pages/api/autocomplete.md
@@ -36,6 +36,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the input will be disabled. |
 | <span class="prop-name">disableListWrap</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the list box in the popup will not wrap focus. |
 | <span class="prop-name">disableOpenOnFocus</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the popup won't open on input focus. |
+| <span class="prop-name">disablePortal</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Disable the portal behavior. The children stay within it's parent DOM hierarchy. |
 | <span class="prop-name">filterOptions</span> | <span class="prop-type">func</span> |  | A filter function that determines the options that are eligible.<br><br>**Signature:**<br>`function(options: undefined, state: object) => undefined`<br>*options:* The options to render.<br>*state:* The state of the component. |
 | <span class="prop-name">filterSelectedOptions</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, hide the selected options from the list box. |
 | <span class="prop-name">freeSolo</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options. |
@@ -55,12 +56,12 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">open</span> | <span class="prop-type">bool</span> |  | Control the popup` open state. |
 | <span class="prop-name">options</span> | <span class="prop-type">array</span> | <span class="prop-default">[]</span> | Array of options. |
 | <span class="prop-name">PaperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Paper</span> | The component used to render the body of the popup. |
-| <span class="prop-name">PopupComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Popper</span> | The component used to render the popup. |
+| <span class="prop-name">PopperComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">Popper</span> | The component used to position the popup. |
 | <span class="prop-name">renderGroup</span> | <span class="prop-type">func</span> |  | Render the group.<br><br>**Signature:**<br>`function(option: any) => ReactNode`<br>*option:* The group to render. |
 | <span class="prop-name required">renderInput&nbsp;*</span> | <span class="prop-type">func</span> |  | Render the input.<br><br>**Signature:**<br>`function(params: object) => ReactNode`<br>*params:* null |
 | <span class="prop-name">renderOption</span> | <span class="prop-type">func</span> |  | Render the option, use `getOptionLabel` by default.<br><br>**Signature:**<br>`function(option: any, state: object) => ReactNode`<br>*option:* The option to render.<br>*state:* The state of the component. |
 | <span class="prop-name">renderTags</span> | <span class="prop-type">func</span> |  | Render the selected value.<br><br>**Signature:**<br>`function(value: any) => ReactNode`<br>*value:* The `value` provided to the component. |
-| <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The input value. |
+| <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the autocomplete. |
 
 The `ref` is forwarded to the root element.
 
@@ -83,7 +84,8 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">clearIndicatorDirty</span> | <span class="prop-name">.MuiAutocomplete-clearIndicatorDirty</span> | Styles applied to the clear indictator if the input is dirty.
 | <span class="prop-name">popupIndicator</span> | <span class="prop-name">.MuiAutocomplete-popupIndicator</span> | Styles applied to the popup indictator.
 | <span class="prop-name">popupIndicatorOpen</span> | <span class="prop-name">.MuiAutocomplete-popupIndicatorOpen</span> | Styles applied to the popup indictator if the popup is open.
-| <span class="prop-name">popup</span> | <span class="prop-name">.MuiAutocomplete-popup</span> | Styles applied to the popup element.
+| <span class="prop-name">popper</span> | <span class="prop-name">.MuiAutocomplete-popper</span> | Styles applied to the popper element.
+| <span class="prop-name">popperDisablePortal</span> | <span class="prop-name">.MuiAutocomplete-popperDisablePortal</span> | Styles applied to the popper element if `disablePortal={true}`.
 | <span class="prop-name">paper</span> | <span class="prop-name">.MuiAutocomplete-paper</span> | Styles applied to the `Paper` component.
 | <span class="prop-name">listbox</span> | <span class="prop-name">.MuiAutocomplete-listbox</span> | Styles applied to the `listbox` component.
 | <span class="prop-name">loading</span> | <span class="prop-name">.MuiAutocomplete-loading</span> | Styles applied to the loading wrapper.
diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.js b/docs/src/pages/components/autocomplete/GitHubLabel.js
index 0f94ddaeee1c8c..3c1544201fe50b 100644
--- a/docs/src/pages/components/autocomplete/GitHubLabel.js
+++ b/docs/src/pages/components/autocomplete/GitHubLabel.js
@@ -1,6 +1,5 @@
 /* eslint-disable no-use-before-define */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useTheme, fade, makeStyles } from '@material-ui/core/styles';
 import Popper from '@material-ui/core/Popper';
 import SettingsIcon from '@material-ui/icons/Settings';
@@ -10,23 +9,6 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import InputBase from '@material-ui/core/InputBase';
 
-function Popup(props) {
-  const { popperRef, anchorEl, open, ...other } = props;
-  return <div {...other} />;
-}
-
-Popup.propTypes = {
-  anchorEl: PropTypes.object,
-  open: PropTypes.bool.isRequired,
-  popperRef: PropTypes.oneOfType([
-    PropTypes.oneOf([null]),
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.any.isRequired,
-    }),
-  ]).isRequired,
-};
-
 const useStyles = makeStyles(theme => ({
   root: {
     width: 221,
@@ -201,7 +183,7 @@ export default function GitHubLabel() {
             setPendingValue(newValue);
           }}
           disableCloseOnSelect
-          PopupComponent={Popup}
+          disablePortal
           renderTags={() => null}
           noOptionsText="No labels"
           renderOption={(option, { selected }) => (
diff --git a/docs/src/pages/components/autocomplete/GitHubLabel.tsx b/docs/src/pages/components/autocomplete/GitHubLabel.tsx
index 1d584814bed6b6..240c4d70c7a6c7 100644
--- a/docs/src/pages/components/autocomplete/GitHubLabel.tsx
+++ b/docs/src/pages/components/autocomplete/GitHubLabel.tsx
@@ -5,15 +5,10 @@ import Popper from '@material-ui/core/Popper';
 import SettingsIcon from '@material-ui/icons/Settings';
 import CloseIcon from '@material-ui/icons/Close';
 import DoneIcon from '@material-ui/icons/Done';
-import Autocomplete, { PopupProps } from '@material-ui/lab/Autocomplete';
+import Autocomplete from '@material-ui/lab/Autocomplete';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import InputBase from '@material-ui/core/InputBase';
 
-function Popup(props: PopupProps) {
-  const { popperRef, anchorEl, open, ...other } = props;
-  return <div {...other} />;
-}
-
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
@@ -190,7 +185,7 @@ export default function GitHubLabel() {
             setPendingValue(newValue);
           }}
           disableCloseOnSelect
-          PopupComponent={Popup}
+          disablePortal
           renderTags={() => null}
           noOptionsText="No labels"
           renderOption={(option: LabelType, { selected }) => (
diff --git a/docs/src/pages/components/autocomplete/Playground.js b/docs/src/pages/components/autocomplete/Playground.js
index 405ef7802afc9a..76d671b3428e98 100644
--- a/docs/src/pages/components/autocomplete/Playground.js
+++ b/docs/src/pages/components/autocomplete/Playground.js
@@ -105,6 +105,13 @@ export default function Playground() {
         disabled
         renderInput={params => <TextField {...params} label="disabled" margin="normal" fullWidth />}
       />
+      <Autocomplete
+        {...defaultProps}
+        disablePortal
+        renderInput={params => (
+          <TextField {...params} label="disablePortal" margin="normal" fullWidth />
+        )}
+      />
     </div>
   );
 }
diff --git a/docs/src/pages/components/autocomplete/Playground.tsx b/docs/src/pages/components/autocomplete/Playground.tsx
index 785e960b84417c..f3f147dfc264c2 100644
--- a/docs/src/pages/components/autocomplete/Playground.tsx
+++ b/docs/src/pages/components/autocomplete/Playground.tsx
@@ -103,6 +103,13 @@ export default function Playground() {
         disabled
         renderInput={params => <TextField {...params} label="disabled" margin="normal" fullWidth />}
       />
+      <Autocomplete
+        {...defaultProps}
+        disablePortal
+        renderInput={params => (
+          <TextField {...params} label="disablePortal" margin="normal" fullWidth />
+        )}
+      />
     </div>
   );
 }
diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.js b/docs/src/pages/components/autocomplete/UseAutocomplete.js
index 4c6e7aa92994ec..f58a7c51ee85b3 100644
--- a/docs/src/pages/components/autocomplete/UseAutocomplete.js
+++ b/docs/src/pages/components/autocomplete/UseAutocomplete.js
@@ -4,6 +4,9 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
+  root: {
+    position: 'relative',
+  },
   input: {
     width: 200,
   },
@@ -32,7 +35,7 @@ const useStyles = makeStyles(theme => ({
 export default function UseAutocomplete() {
   const classes = useStyles();
   const {
-    getRootProps,
+    getComboboxProps,
     getInputProps,
     getInputLabelProps,
     getListboxProps,
@@ -44,10 +47,12 @@ export default function UseAutocomplete() {
   });
 
   return (
-    <div {...getRootProps()}>
-      <label {...getInputLabelProps()}>useAutocomplete</label>
-      <br />
-      <input className={classes.input} {...getInputProps()} />
+    <div className={classes.root}>
+      <div {...getComboboxProps()}>
+        <label {...getInputLabelProps()}>useAutocomplete</label>
+        <br />
+        <input className={classes.input} {...getInputProps()} />
+      </div>
       {groupedOptions.length > 0 ? (
         <ul className={classes.listbox} {...getListboxProps()}>
           {groupedOptions.map((option, index) => (
diff --git a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
index b076dfc8f1ed59..13fc3ec5045c17 100644
--- a/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
+++ b/docs/src/pages/components/autocomplete/UseAutocomplete.tsx
@@ -5,6 +5,9 @@ import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
+    root: {
+      position: 'relative',
+    },
     input: {
       width: 200,
     },
@@ -34,7 +37,7 @@ const useStyles = makeStyles((theme: Theme) =>
 export default function UseAutocomplete() {
   const classes = useStyles();
   const {
-    getRootProps,
+    getComboboxProps,
     getInputProps,
     getInputLabelProps,
     getListboxProps,
@@ -46,10 +49,12 @@ export default function UseAutocomplete() {
   });
 
   return (
-    <div {...getRootProps()}>
-      <label {...getInputLabelProps()}>useAutocomplete</label>
-      <br />
-      <input className={classes.input} {...getInputProps()} />
+    <div className={classes.root}>
+      <div {...getComboboxProps()}>
+        <label {...getInputLabelProps()}>useAutocomplete</label>
+        <br />
+        <input className={classes.input} {...getInputProps()} />
+      </div>
       {groupedOptions.length > 0 ? (
         <ul className={classes.listbox} {...getListboxProps()}>
           {groupedOptions.map((option, index) => (
diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md
index 46214f226b27d5..86ff7e297d70b1 100644
--- a/docs/src/pages/components/autocomplete/autocomplete.md
+++ b/docs/src/pages/components/autocomplete/autocomplete.md
@@ -152,6 +152,13 @@ Search within 10,000 randomly generated options. The list is virtualized thanks
 
 {{"demo": "pages/components/autocomplete/Virtualize.js"}}
 
+## Limitations
+
+### iOS VoiceOver
+
+VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well.
+You can work around the issue with the `disablePortal` prop.
+
 ## Accessibility
 
 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox)
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
index 003b5976640f9f..b59faeeb5636ee 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { StandardProps } from '@material-ui/core';
 import { UseAutocompleteProps, CreateFilterOptions } from '../useAutocomplete';
 
-export interface PopupProps extends React.HTMLAttributes<HTMLElement> {
+export interface PopperProps extends React.HTMLAttributes<HTMLElement> {
   anchorEl?: HTMLElement;
   open: boolean;
   popperRef: React.Ref<unknown>;
@@ -48,6 +48,11 @@ export interface AutocompleteProps
    * If `true`, the input will be disabled.
    */
   disabled?: boolean;
+  /**
+   * Disable the portal behavior.
+   * The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal?: boolean;
   /**
    * The component used to render the listbox.
    */
@@ -69,9 +74,9 @@ export interface AutocompleteProps
    */
   PaperComponent?: React.ComponentType<React.HTMLAttributes<HTMLElement>>;
   /**
-   * The component used to render the popup.
+   * The component used to position the popup.
    */
-  PopupComponent?: React.ComponentType<PopupProps>;
+  PopperComponent?: React.ComponentType<PopperProps>;
   /**
    * Render the group.
    *
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index dde74d6abda20f..79ecd16093040b 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -73,10 +73,14 @@ export const styles = theme => ({
   popupIndicatorOpen: {
     transform: 'rotate(180deg)',
   },
-  /* Styles applied to the popup element. */
-  popup: {
+  /* Styles applied to the popper element. */
+  popper: {
     zIndex: theme.zIndex.modal,
   },
+  /* Styles applied to the popper element if `disablePortal={true}`. */
+  popperDisablePortal: {
+    position: 'absolute',
+  },
   /* Styles applied to the `Paper` component. */
   paper: {
     ...theme.typography.body1,
@@ -145,6 +149,12 @@ export const styles = theme => ({
   },
 });
 
+function DisablePortal(props) {
+  // eslint-disable-next-line react/prop-types
+  const { popperRef, anchorEl, open, ...other } = props;
+  return <div {...other} />;
+}
+
 const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
   /* eslint-disable no-unused-vars */
   const {
@@ -161,6 +171,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     disabled = false,
     disableListWrap = false,
     disableOpenOnFocus = false,
+    disablePortal = false,
     filterOptions,
     filterSelectedOptions = false,
     freeSolo = false,
@@ -180,7 +191,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
     open,
     options = [],
     PaperComponent = Paper,
-    PopupComponent = Popper,
+    PopperComponent: PopperComponentProp = Popper,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
@@ -196,15 +207,15 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
       popperRef.current.update();
     }
   });
+  const PopperComponent = disablePortal ? DisablePortal : PopperComponentProp;
 
   const {
-    getRootProps,
+    getComboboxProps,
     getInputProps,
     getInputLabelProps,
     getPopupIndicatorProps,
     getClearProps,
     getTagProps,
-    getPopupProps,
     getListboxProps,
     getOptionProps,
     value,
@@ -267,73 +278,76 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
   };
 
   return (
-    <div
-      ref={ref}
-      className={clsx(
-        classes.root,
-        {
-          [classes.focused]: focused,
-        },
-        className,
-      )}
-      {...getRootProps()}
-      {...other}
-    >
-      {renderInput({
-        ref: setAnchorEl,
-        disabled,
-        InputLabelProps: getInputLabelProps(),
-        InputProps: {
-          className: classes.inputRoot,
-          startAdornment,
-          endAdornment: (
-            <React.Fragment>
-              {disableClearable || disabled ? null : (
-                <IconButton
-                  {...getClearProps()}
-                  title="Clear"
-                  className={clsx(classes.clearIndicator, {
-                    [classes.clearIndicatorDirty]: dirty,
-                  })}
-                >
-                  <CloseIcon fontSize="small" />
-                </IconButton>
-              )}
-
-              {freeSolo ? null : (
-                <IconButton
-                  {...getPopupIndicatorProps()}
-                  disabled={disabled}
-                  title={popupOpen ? 'Close popup' : 'Open popup'}
-                  className={clsx(classes.popupIndicator, {
-                    [classes.popupIndicatorOpen]: popupOpen,
-                  })}
-                >
-                  <ArrowDropDownIcon />
-                </IconButton>
-              )}
-            </React.Fragment>
-          ),
-        },
-        inputProps: {
-          className: clsx(classes.input, {
-            [classes.inputFocused]: focusedTag === -1,
-          }),
+    <React.Fragment>
+      <div
+        ref={ref}
+        className={clsx(
+          classes.root,
+          {
+            [classes.focused]: focused,
+          },
+          className,
+        )}
+        {...getComboboxProps()}
+        {...other}
+      >
+        {renderInput({
+          ref: setAnchorEl,
           disabled,
-          ...getInputProps(),
-        },
-      })}
+          InputLabelProps: getInputLabelProps(),
+          InputProps: {
+            className: classes.inputRoot,
+            startAdornment,
+            endAdornment: (
+              <React.Fragment>
+                {disableClearable || disabled ? null : (
+                  <IconButton
+                    {...getClearProps()}
+                    title="Clear"
+                    className={clsx(classes.clearIndicator, {
+                      [classes.clearIndicatorDirty]: dirty,
+                    })}
+                  >
+                    <CloseIcon fontSize="small" />
+                  </IconButton>
+                )}
 
+                {freeSolo ? null : (
+                  <IconButton
+                    {...getPopupIndicatorProps()}
+                    disabled={disabled}
+                    title={popupOpen ? 'Close popup' : 'Open popup'}
+                    className={clsx(classes.popupIndicator, {
+                      [classes.popupIndicatorOpen]: popupOpen,
+                    })}
+                  >
+                    <ArrowDropDownIcon />
+                  </IconButton>
+                )}
+              </React.Fragment>
+            ),
+          },
+          inputProps: {
+            className: clsx(classes.input, {
+              [classes.inputFocused]: focusedTag === -1,
+            }),
+            disabled,
+            ...getInputProps(),
+          },
+        })}
+      </div>
       {popupOpen && anchorEl ? (
-        <PopupComponent
-          className={classes.popup}
+        <PopperComponent
+          className={clsx(classes.popper, {
+            [classes.popperDisablePortal]: disablePortal,
+          })}
           style={{
             width: anchorEl ? anchorEl.clientWidth : null,
           }}
+          role="presentation"
           popperRef={popperRef}
           anchorEl={anchorEl}
           open
-          {...getPopupProps()}
         >
           <PaperComponent className={classes.paper}>
             {loading ? <div className={classes.loading}>{loadingText}</div> : null}
@@ -356,9 +370,9 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
               </ListboxComponent>
             ) : null}
           </PaperComponent>
-        </PopupComponent>
+        </PopperComponent>
       ) : null}
-    </div>
+    </React.Fragment>
   );
 });
 
@@ -426,6 +440,11 @@ Autocomplete.propTypes = {
    * If `true`, the popup won't open on input focus.
    */
   disableOpenOnFocus: PropTypes.bool,
+  /**
+   * Disable the portal behavior.
+   * The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal: PropTypes.bool,
   /**
    * A filter function that determines the options that are eligible.
    *
@@ -522,9 +541,9 @@ Autocomplete.propTypes = {
    */
   PaperComponent: PropTypes.elementType,
   /**
-   * The component used to render the popup.
+   * The component used to position the popup.
    */
-  PopupComponent: PropTypes.elementType,
+  PopperComponent: PropTypes.elementType,
   /**
    * Render the group.
    *
@@ -555,7 +574,7 @@ Autocomplete.propTypes = {
    */
   renderTags: PropTypes.func,
   /**
-   * The input value.
+   * The value of the autocomplete.
    */
   value: PropTypes.any,
 };
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
index 4160b0152da14a..85b7910efed304 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts
@@ -145,7 +145,7 @@ export interface UseAutocompleteProps {
    */
   options?: any[];
   /**
-   * The input value.
+   * The value of the autocomplete.
    */
   value?: any;
 }
@@ -153,13 +153,12 @@ export interface UseAutocompleteProps {
 export default function useAutocomplete(
   props: UseAutocompleteProps,
 ): {
-  getRootProps: () => {};
+  getComboboxProps: () => {};
   getInputProps: () => {};
   getInputLabelProps: () => {};
   getClearProps: () => {};
   getPopupIndicatorProps: () => {};
   getTagProps: () => {};
-  getPopupProps: () => {};
   getListboxProps: () => {};
   getOptionProps: ({ option, index }: { option: any; index: number }) => {};
   id: string;
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 72d7c84c367f72..e60cf0804ac886 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -658,7 +658,7 @@ export default function useAutocomplete(props) {
   }
 
   return {
-    getRootProps: () => ({
+    getComboboxProps: () => ({
       'aria-owns': popupOpen ? `${id}-popup` : null,
       role: 'combobox',
       'aria-expanded': popupOpen,
@@ -702,9 +702,6 @@ export default function useAutocomplete(props) {
     getTagProps: () => ({
       onDelete: handleTagDelete,
     }),
-    getPopupProps: () => ({
-      role: 'presentation',
-    }),
     getListboxProps: () => ({
       role: 'listbox',
       id: `${id}-popup`,