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

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

Answer 2

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',
        }}
    />;