材质 UI 自动完成下拉位置

【问题标题】：material UI AutoComplete dropdown position材质 UI 自动完成下拉位置
【发布时间】：2021-05-19 08:31:06
【问题描述】：

如何禁用自动完成自动定位？

希望始终在底部显示自动完成选项。

https://codesandbox.io/s/material-demo-forked-t1luy?file=/demo.js

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

你可以用flexbox做到这一点

您可以用div 包装您的Autocomplete 组件并添加以下样式

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

【讨论】：

【解决方案2】：

对于当前最新版本的 MaterialUI，您可以使用属性disablePortal 来实现当带有选项列表的弹出窗口始终显示在底部时的行为

应该是这样的

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

【讨论】：

【解决方案3】：

property disablePortal={true} 对我有用。

【讨论】：