如何阻止MUI Menu Item自动聚焦？自定义搜索选择组件问题

问题根源 #

MUI的Menu组件自带键盘交互逻辑：当用户输入字符时，会自动匹配首字母对应的MenuItem并将焦点转移过去，这就是导致搜索框失焦的核心原因——和MenuItem的autoFocus属性无关。

具体解决方法 #

1. 直接禁用Menu的键盘导航行为 #

给你的StyledMenu添加disableKeyboardNavigation属性，关闭自动聚焦的内置逻辑：

<StyledMenu
  id="search-location-menu"
  anchorEl={anchorEl}
  open={Boolean(anchorEl)}
  onClose={handleClose}
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'left',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'left',
  }}
  autoFocus={false}
  disableKeyboardNavigation // 新增该行代码
>

2. 手动强制搜索框保持焦点（可选增强） #

如果禁用键盘导航后仍出现偶发失焦，可在搜索输入的回调里手动重新聚焦搜索框：

const handleSearchChange = (e) => {
  setSearchValue(e.target.value);
  // 强制聚焦搜索框
  document.getElementById('search-location')?.focus();
};

3. 更优替代方案：使用MUI官方Autocomplete组件 #

如果你的需求是带搜索功能的选择器，MUI官方的Autocomplete组件已经内置了完善的搜索、焦点管理逻辑，比手动拼接Menu+TextField更稳定，简化示例：

<Autocomplete
  options={yourFullOptionsList}
  getOptionLabel={(option) => option.label}
  renderInput={(params) => (
    <TextField {...params} label={t('location')} />
  )}
  onChange={(event, selectedValue) => {
    // 处理选中后的逻辑
  }}
/>

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