"我想做的事"
我正在尝试实现包含TextInput元素的控件，该元素在单击时打开Popover，其中嵌入了Autocomplete。当我单击TextInput时，我正在尝试将焦点放在建议列表（Autocomplete的Popper元素）上。

• • 为什么我需要它**这就是它的方式（或至少这是我们的客户想要的）
• • 我的代码是什么**这里是我的代码的简化版本

import "./styles.css";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import Popper from "@mui/material/Popper";

import { createRef, useCallback, useState } from "react";
import Popover from "@mui/material/Popover";

export default function App() {
  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
  const textFieldRef = createRef<HTMLDivElement>();

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

  const handleClose = useCallback(() => {
    setAnchorEl(null);
  }, []);
  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: 54,
          horizontal: 0
        }}
      >
        <Autocomplete
          id='autocomplete'

          openOnFocus
          options={["abc"]}
          freeSolo
          multiple
          fullWidth
          value={[""]}
          PopperComponent={(props) => <Popper {...props} anchorEl={anchorEl}/>}
          renderOption={(props, option) => (
            <Box component="li" {...props}>
              {option}
            </Box>
          )}
          renderInput={(params) => (
            <TextField
              {...params}
              autoFocus
              InputProps={{
                ...params.InputProps
              }}
            />
          )}
        />
      </Popover>
    </>
  );
}

• • 问题是什么**Poppover的焦点位置错误，如下所示

当我单击Autocomplete（或者通常是重新呈现屏幕）时，它会自动更正

• • 为什么会发生**（我的猜测是）在渲染Autocomplete时有延迟，并且Popper在第一次渲染时没有锚点。

{ document.getElementById('popover`) && <Autocomplete ...

• • 我的解决方案是什么我尝试了很多方法（我的意思是很多**）。我能做的最好的是使用

<Autocomplete...
PopperComponent={(props) => <Popper {...props}
              anchorEl={document.getElementById('textfield')
    modifiers={[
                {
                  name: 'offset',
                  options: { offset: [32.5, 58], },
                },
              ]}/>...

有两个问题-一-它是超级丑陋的，二-如果我添加更多的条目，Autocomplete框会增长，我需要以某种方式相应地调整偏移（丑陋得多）

• 如有任何建议，敬请垂询~*