Блог

Я использую <Autocomplete /> компонент Material-UI, и у меня возникла ситуация, когда я хочу, чтобы мой выпадающий список всегда отображался внизу. Поэтому я сделал это:

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

Мой выпадающий список все еще иногда появляется вверху.

Более того, когда я сделал выше, ширина моего поппера больше не соответствует ширине моего автозаполнения.

Тогда я решил, что хочу изменить zIndex поппера, чтобы панель приложений не закрывала его, если положение поппера переключается на верхнее.

Как я могу это исправить?

Да, placement кажется, что он сломан при использовании в поппере автозаполнения (material-ui v. 4.11.4).

Хак, который сработал для меня, заключается в следующем:

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

Я использую MUI 5.4.4 и столкнулся с аналогичной проблемой, когда компонент Autocompelete s Popper пытался перевернуться наверх (и поэтому исчезал), когда внизу страницы было недостаточно места. Я исправил проблему, создав пользовательский компонент popper с flip модификатором с fallbackPlacements параметром, установленным в пустой массив, и установив для popperOptions размещения значение bottom, чтобы Popper меню всегда было внизу, независимо от того, достаточно места или нет.

Документы popper для модификатора flip довольно хорошо объяснили это.

Пользовательский поппер:

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

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

Автозаполнение:

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

Если кто-то все еще ищет ответ. Вы можете добиться этого с помощью модификатора flip

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