如何禁用Material UI Menu组件的键入选择功能，解决内部TextField输入冲突

问题原因 #

Material UI的Menu组件默认内置了列表项首字母匹配的键盘导航逻辑，该逻辑会监听上层的键盘输入事件，匹配到对应首字母的MenuItem时就会自动把焦点切过去，因此会抢走内部TextField的输入焦点，导致无法正常输入。

解决方法 #

方案一：阻止事件冒泡（改动最小，适配现有逻辑） #

只需要给内部的TextField添加onKeyDown事件，阻止按键事件向上冒泡到Menu组件即可，修改后的代码如下：

<TextField
  value={text}
  onChange={(e) => setText(e.target.value)}
  variant={"outlined"}
  label={"search a different food..."}
  // 新增以下代码阻止事件冒泡
  onKeyDown={(e) => e.stopPropagation()}
/>

如果Menu内有多个输入类控件，可以统一在包裹输入控件的父容器上添加onKeyDown={(e) => e.stopPropagation()}，不需要给每个输入单独配置。

方案二：更换更适配的组件 #

Menu组件的设计场景是纯选项选择类菜单，如果你需要在弹出层中放置大量筛选控件、表单元素，更推荐使用Popover组件：

• Popover是通用弹出层容器，没有内置菜单导航逻辑，完全不会触发输入冲突
• 支持和Menu完全一致的锚点定位、弹出/关闭配置，改造成本极低

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