在 Material UI 菜单组件中禁用“通过键入选择”

Question

我正在尝试制作一个具有几个不同过滤器（按钮、选择和文本字段）的弹出菜单。我正在使用 Material UI 菜单组件，但在尝试使用文本字段时遇到了问题。因为菜单组件的作用就像一个

<Select />

，所以当我在文本字段中输入内容时，它会尝试选择不同的菜单项，而不是专注于文本框。

因此，使用下面沙箱中的示例，如果“搜索不同食物”文本框中以“A”、“B”或“C”开头，用户将无法输入任何内容。如果您想输入“apricots”，菜单会将焦点从文本框更改为“Apples”菜单项。

我在菜单 API 中没有看到任何支持此操作的道具，所以我很好奇是否有任何解决方法，甚至是更适合此操作的不同组件。

谢谢！

这是一个codesandbox：https://codesandbox.io/s/wizardly-mccarthy-zy2b7

import { useState } from "react";
import "./styles.css";
import { Button, Menu, MenuItem, TextField } from "@material-ui/core";

export default function App() {
  const [menu, setMenu] = useState(null);
  const [text, setText] = useState("");

  return (
    <div className="App">
      <Button variant="outlined" onClick={(e) => setMenu(e.currentTarget)}>
        Filters
      </Button>

      <Menu
        anchorEl={menu}
        open={Boolean(menu)}
        getContentAnchorEl={null}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left"
        }}
        onClose={() => setMenu(null)}
      >
        <MenuItem>Apples</MenuItem>
        <MenuItem>Bananas</MenuItem>
        <MenuItem>Carrots</MenuItem>
        <MenuItem>
          <TextField
            value={text}
            onChange={(e) => setText(e.target.value)}
            variant={"outlined"}
            label={"search a different food..."}
          />
        </MenuItem>
      </Menu>
    </div>
  );
}

Answer 1

在包含 TextField 的 MenuItem 的 onKeyDown 事件中使用 e.stopPropagation()。这将防止按键事件传播到菜单组件。

    <MenuItem onKeyDown={(e) => e.stopPropagation()}>
        <TextField
            value={text}
            onChange={(e) => setText(e.target.value)}
            variant={"outlined"}
            label={"search a different food..."}
        />
    </MenuItem>

参考：如何在选择组件中按下选项的第一个字母时禁用项目的选择？

Answer 2

接受的答案是当您能够使用

MenuItem

时，但在您不能或不想使用

MenuItem

的情况下，您可以使用

<Box>

并给它

role="menuitem"

<Box
  role="menuitem"
  onKeyDown={(e) => e.stopPropagation()}
>
  {children}
</Box>