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?

Answer 1

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