如何允许同时关注两个组件，TextField 和 Popover

Question

我有一个呈现在文本字段组件下方的弹出框组件。用例是当用户在文本字段中键入特殊键（例如

:

）时切换菜单。然后，用户可以单击这些菜单项之一“自动完成”文本字段。

GitHubs 隐藏文本扩展器功能就是一个很好的例子。

我有两个实现。 mui 默认实现的一种实现是，当菜单打开时，会在菜单上创建焦点陷阱，从而阻止用户在文本编辑组件中自由键入内容。然后可以使用 ESC、ENTER、TAB 等键盘控件访问菜单组件，并在模糊时关闭。

为了允许用户在菜单仍然打开时继续在文本字段中输入内容，我使用 mui 提供的一些 api 禁用了弹出菜单组件上的自动对焦。

我怎样才能实现像 GitHub 功能这样的功能，允许组件具有一定的可访问性，同时继续允许用户在文本字段中自由输入内容？

这是禁用弹出菜单的聚焦功能的实现。

  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>
    </>
  )

Answer 1

恐怕你无法同时关注两个元素。但是您可以在封闭的 div 上处理键盘单击事件，然后根据单击的键执行操作。