MUI Autocomplete组件Popper位置异常问题求助

问题描述 #

使用MUI Autocomplete组件时，弹出的Popper容器位置不稳定，时而出现在输入框左侧，时而出现在右侧。

解决方案 #

1. 强制固定Popper位置 #

Autocomplete默认会根据视口空间自动调整Popper位置，这是导致位置飘忽的核心原因。通过配置PopperProps关闭自动调整逻辑，指定固定的锚定位置：

<ThemeProvider theme={theme}>
  <Autocomplete
    disablePortal={true}
    id="combo-box-demo"
    options={technologies}
    sx={{ width: 300 }}
    className="nodrag"
    value={value}
    onChange={handleChange}
    // 新增Popper固定配置
    PopperProps={{
      placement: "bottom-start", // 固定在输入框底部左侧对齐，可按需改为bottom-end/top-start等
      modifiers: [
        {
          name: "flip",
          enabled: false, // 禁用自动翻转位置
        },
        {
          name: "preventOverflow",
          enabled: false, // 禁用视口溢出时的位置调整
        },
      ],
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        label="Technology"
        color="neutral"
        className="nodrag"
      />
    )}
  />
</ThemeProvider>

2. 检查父容器定位 #

确保Autocomplete的直接父容器使用position: relative，避免absolute/fixed等定位属性干扰Popper的定位计算：

<div sx={{ position: 'relative' }}>
  <Autocomplete {...yourProps} />
</div>

3. 排查自定义样式冲突 #

检查nodrag类是否包含transform、position等可能影响元素定位的样式，暂时移除该类测试，确认是否为样式冲突导致的问题。

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