Material UI AutoComplete dropdown position

Question

how to disable autocomplete auto position?

want to show autocomplete options always bottom.

https://codesandbox.io/s/material-demo-forked-t1luy?file=/demo.js

Answer 1

Add popper props with modifiers:

<Autocomplete
  id="combo-box-demo"
  options={top100Films}

  /* ...yourProps */

  componentsProps={{
    popper: {
      modifiers: [
        {
          name: 'flip',
          enabled: false
        },
        {
           name: 'preventOverflow',
           enabled: false
         }
      ]
    }
  }}

  renderInput={(params) => (
    <TextField {...params} label="Combo box" variant="outlined" />
  )}
/>