Unable to fix popper placement in autocomplete

Question

I am using the <Autocomplete /> component of Material-UI and I have a situation where I want my drop-down to always appear at the bottom. Therefore I did this:

PopperComponent={(props) => <Popper {...props} placement='bottom-start' />}

My drop-down still appear at the top sometimes.

Moreover, when i did the above, the width of my popper is no longer the width of my autocomplete.

I decided then that i want to change the zIndex of the popper so that the app bar won't cover it if the position of the popper switches to the top.

How can i fix it?

score 3 · Accepted Answer · answered May 07 '21 at 12:35

Yes, placement appears to be broken when used in Autocomplete's Popper (material-ui v. 4.11.4).

A hack that worked for me is as follows:

<Autocomplete
  // Force menu to open below, with the correct width
  PopperComponent={({ style, ...props }) => (
    <Popper
      {...props}
      style={{ ...style, height: 0 }} // width is passed in 'style' prop
    />
  )}
  // Set menu max height (optional)
  ListboxProps={{ style: { maxHeight: '30vh' } }}
/>

score 2 · Answer 2 · answered Jun 10 '22 at 18:10

I am using MUI 5.4.4 and ran into a similar issue where the Autocompeletes Popper component was trying to flip to the top (and therefor disappearing) when there wasn't enough space on the bottom of the page. I fixed the issue by creating custom popper component with a flip modifier with the fallbackPlacements option set to an empty array and setting the popperOptions placement to bottom so that the Popper menu is always at the bottom regardless of if there is enough space or not.

The popper docs for the flip modifier explained it pretty well.

Custom popper:

const CustomerPopper = (props) => {
  const modifiers = [
    {
      name: 'flip',
      options: {
        fallbackPlacements: []
      },
    },
  ]

  return (
    <Popper
      {...props}
      modifiers={modifiers}
      popperOptions={{
        placement: 'bottom',
      }}
    />
  )
}

Autocomplete:

<Autocomplete
  {...otherStuff}
  PopperComponent={(props) => <CustomerPopper {...props} />}
/>

score 1 · Answer 3 · answered Apr 22 '22 at 04:36

If anyone is still looking for an answer. You can achieve this by using flip modifier

const CustomerPopper = (props: any) => <Popper
        {...props} 
        modifiers={{
            flip: {
                enabled: false,
            }
        }}
        popperOptions={{
         placement:'bottom',
        }}
    />;

Unable to fix popper placement in autocomplete

3 Answers3