如何让TextField与Popover组件同时聚焦并兼顾可访问性

我有一个渲染在TextField组件下方的Popover组件，需求是用户在TextField中输入特殊字符（如:）时触发菜单，点击菜单项可自动补全TextField内容。GitHub的Hidden text expander功能就是此类场景的优秀示例。

我试过两种实现方式：

• MUI默认实现：菜单打开时会创建焦点陷阱，阻止用户继续输入，但菜单支持ESC、ENTER、TAB等键盘操作，失焦时会自动关闭。
• 禁用菜单聚焦：通过MUI的API关闭了Popover菜单的自动聚焦功能，这样用户在菜单打开时仍能输入，但担心丢失了可访问性特性。

现在想实现类似GitHub的功能，既保留组件可访问性，又允许用户自由在TextField中输入，以下是我禁用菜单聚焦功能的实现代码：

return (
  <>
    <div className="card">
      <TextField
        fullWidth
        inputRef={inputRef}
        value={text}
        id="filled-basic"
        label="Filled"
        variant="filled"
        onChange={(e) => handleChange(e)}
      />
      <Menu
        id="demo-positioned-menu"
        aria-labelledby="demo-positioned-button"
        open={activeToken?.word === "#"}
        onClose={handleClick}
        anchorReference="anchorPosition"
        autoFocus={false}
        disableAutoFocus={true}
        disableEnforceFocus={true}
        anchorPosition={{
          top: t + 20,
          left: l
        }}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
      >
        <MenuItem onClick={() => handleClose('JavaScript')}>#JavaScript</MenuItem>
        <MenuItem onClick={() => handleClose('Clojure')}>#Clojure</MenuItem>
        <MenuItem onClick={() => handleClose('Python')}>#Python</MenuItem>
      </Menu>
    </div>
  </>
)

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