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

score 4 · Answer 1 · answered Jul 23 '23 at 11:39

4

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" />
  )}
/>

answered Jul 23 '23 at 11:39

Olya Solomonenko

41
2

2

Thank you, finally a solution that works. **Note of others**: For this to work, I had to upgrade to the latest version of `@mui/material`, which as of now, is `5.14.2` – tsuki Jul 25 '23 at 12:27

score 2 · Answer 2 · answered Feb 18 '21 at 06:11

For the current latest version of MaterialUI, you can use the property disablePortal to achieve behavior when a popup with a list of options will always be shown on the bottom

Should be something like this

<Autocomplete
  id="combo-box-demo"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  style={{ width: 300, paddingTop: 300 }}

  disablePortal={true}

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

did you test it? in my case 'disablePortal' does not alter the dropdown position behavior — MadJoRR, Jan 13 '23 at 17:19

score 2 · Answer 3 · answered Jul 07 '21 at 21:40

2

property disablePortal={true} works for me.

answered Jul 07 '21 at 21:40

Aaron github

29
2

score 1 · Answer 4 · answered Oct 20 '22 at 19:23

For MUI v5, if you're trying to use the "disablePortal" prop, as it should work on previous versions of MUI, what worked for me is to simply remove the "disablePortal" prop, which automatically set the placement of the dropdown list to "bottom" for any number of elements in the list.

score 0 · Answer 5 · answered Feb 16 '21 at 16:01

You can do it with flexbox

You can wrap your Autocomplete component with a div and add the below style

    <div style={{display: 'flex', alignItems: 'flex-end'}}>
        <Autocomplete
          id="combo-box-demo"
          options={top100Films}
          getOptionLabel={(option) => option.title}
          style={{ width: 300}}
          renderInput={(params) => (
            <TextField {...params} label="Combo box" variant="outlined" />
          )}
        />
    </div>

material UI AutoComplete dropdown position

5 Answers5