MUI v5 Dialog中Autocomplete下拉选项被边框截断该如何解决

你当前代码里的Autocomplete组件显式设置了disablePortal属性，该属性会强制下拉菜单的DOM节点渲染在当前组件父层级内，而MUI的Dialog、DialogContent默认都设置了overflow: hidden样式，超出容器边界的内容会直接被裁剪，就出现了你遇到的下拉被截断的问题。

方案1（优先推荐） #

直接删除disablePortal属性即可。
Autocomplete默认会把下拉菜单通过portal挂载到body根节点下，不受Dialog的overflow样式限制，层级也高于Dialog，自然不会被截断。修改后的代码如下：

<Dialog open={open}>
  <DialogContent>
    <Autocomplete
      id="combo-box-demo"
      options={options}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Numbers" />}
    />
  </DialogContent>
</Dialog>

方案2（需保留disablePortal时使用） #

如果业务场景必须要保留disablePortal属性，可以给DialogContent覆盖默认的overflow样式：

<Dialog open={open}>
  <DialogContent sx={{ overflow: 'visible' }}>
    <Autocomplete
      disablePortal
      id="combo-box-demo"
      options={options}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Numbers" />}
    />
  </DialogContent>
</Dialog>

注意：该方案会让Dialog内容超出时无法滚动，仅适合Dialog内容固定不需要滚动的场景使用。

内容的提问来源于stack exchange，提问作者picklepick