React MUI：嵌套Popover的Autocomplete组件Popper初始位置偏移问题

核心问题分析 #

首次打开Popover时，Autocomplete的Popper在Popover布局未完全稳定的情况下就计算了位置，导致偏移；同时手动指定Popper的anchorEl为外部TextField，破坏了Autocomplete内部Popper的默认锚定逻辑，加剧了位置计算错误。

优化代码实现 #

import "./styles.css";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import Popover from "@mui/material/Popover";
import { createRef, useCallback, useState, useEffect } from "react";

export default function App() {
  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
  const [autoCompleteOpen, setAutoCompleteOpen] = useState(false);
  const [value, setValue] = useState<string[]>([]);
  const textFieldRef = createRef<HTMLDivElement>();

  const handleClick = useCallback(() => {
    setAnchorEl(textFieldRef.current);
  }, [textFieldRef]);

  const handleClose = useCallback(() => {
    setAnchorEl(null);
  }, []);
  
  // 监听Popover状态，延迟打开Autocomplete的Popper确保布局稳定
  useEffect(() => {
    if (anchorEl) {
      const timer = setTimeout(() => {
        setAutoCompleteOpen(true);
      }, 80);
      return () => clearTimeout(timer);
    } else {
      setAutoCompleteOpen(false);
    }
  }, [anchorEl]);

  const open = Boolean(anchorEl);

  return (
    <>
      <TextField id='textfield' ref={textFieldRef} onClick={handleClick} fullWidth />
      <Popover
        id='popover'
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        disablePortal
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
      >
        <Autocomplete
          id='autocomplete'
          open={autoCompleteOpen}
          onOpen={() => setAutoCompleteOpen(true)}
          onClose={() => setAutoCompleteOpen(false)}
          options={["abc", "def", "ghi"]}
          freeSolo
          multiple
          fullWidth
          value={value}
          onChange={(_, newValue) => setValue(newValue)}
          renderOption={(props, option) => (
            <Box component="li" {...props}>
              {option}
            </Box>
          )}
          renderInput={(params) => (
            <TextField
              {...params}
              autoFocus
              placeholder="输入或选择选项"
            />
          )}
        />
      </Popover>
    </>
  );
}

关键优化点 #

1. 移除自定义Popper锚点：删除手动指定PopperComponent的anchorEl，让Autocomplete内部管理Popper的锚定（默认锚定自身输入框），避免与外层Popover的锚点逻辑冲突。
2. 延迟打开Autocomplete的Popper：通过useEffect监听Popover的打开状态，延迟80ms触发Autocomplete的Popper显示，确保Popover完成布局后再计算Popper位置，解决首次渲染偏移问题。
3. 自适应定位Popover：将Popover的anchorOrigin和transformOrigin改为相对定位（如bottom/left），替代固定数值，适配不同尺寸的TextField和屏幕。
4. 受控状态管理：将Autocomplete的value改为受控状态，符合React的状态管理规范，避免固定值导致的异常。

额外说明 #

如果延迟时间需要调整，可以根据实际布局复杂度微调（通常50-100ms足够）。这种方案无需手动调整偏移量，能自适应Autocomplete内容变化，更具鲁棒性。

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