如何禁用MUI Select的首字母选中功能并实现内置搜索框

一、禁用首字母自动选中功能 #

MUI Select默认的首字母匹配逻辑由Listbox组件的键盘事件实现，要禁用该功能，只需在Select的ListboxProps中重写onKeyDown事件，拦截字母/数字类按键的默认行为，同时保留方向键、回车等必要操作：

<Select
  // 你的其他原有props
  ListboxProps={{
    onKeyDown: (e) => {
      // 定义允许保留的按键：上下方向键、回车、空格、ESC、Tab
      const allowedKeys = ['ArrowUp', 'ArrowDown', 'Enter', ' ', 'Escape', 'Tab'];
      // 拦截单个字符的按键输入（排除允许的按键）
      if (!allowedKeys.includes(e.key) && e.key.length === 1) {
        e.preventDefault();
      }
    },
  }}
>
  {/* 你的选项MenuItem */}
</Select>

二、解决搜索框输入触发选项选中的问题 #

你添加的搜索框输入时，按键事件会冒泡到Listbox组件，导致触发首字母选中逻辑。只需给搜索框添加onKeyDown事件，阻止事件冒泡即可：

const SearchBox = ({ value, onChange }) => (
  <TextField
    value={value}
    onChange={onChange}
    placeholder="搜索选项"
    fullWidth
    margin="normal"
    onKeyDown={(e) => {
      e.stopPropagation(); // 阻止按键事件向上冒泡到Listbox
    }}
  />
);

三、基于Select实现带搜索框的过滤功能 #

要在Select中实现自定义搜索过滤，可通过维护过滤后的选项列表来实现，步骤如下：

1. 定义状态管理搜索值、菜单展开状态和原始选项：

const [searchValue, setSearchValue] = useState('');
const [open, setOpen] = useState(false);
const [selectedValue, setSelectedValue] = useState('');
const originalOptions = ['Apple', 'Apricot', 'Banana', 'Blueberry'];

2. 计算过滤后的选项：

const filteredOptions = originalOptions.filter(option =>
  option.toLowerCase().includes(searchValue.toLowerCase())
);

3. 自定义MenuProps，插入搜索框并渲染过滤后的选项：

<Select
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.target.value)}
  open={open}
  onOpen={() => setOpen(true)}
  onClose={() => {
    setSearchValue(''); // 关闭菜单时清空搜索框
    setOpen(false);
  }}
  ListboxProps={{
    onKeyDown: (e) => {
      const allowedKeys = ['ArrowUp', 'ArrowDown', 'Enter', ' ', 'Escape', 'Tab'];
      if (!allowedKeys.includes(e.key) && e.key.length === 1) {
        e.preventDefault();
      }
    },
  }}
  MenuProps={{
    children: () => (
      <>
        <SearchBox
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
        />
        {/* 渲染过滤后的选项 */}
        {filteredOptions.map((option) => (
          <MenuItem key={option} value={option}>
            {option}
          </MenuItem>
        ))}
      </>
    ),
  }}
>
  <MenuItem>{selectedValue || '请选择'}</MenuItem>
</Select>

通过手动控制菜单的open状态，在关闭时清空搜索值，同时用MenuProps.children覆盖默认选项列表，实现自定义搜索过滤逻辑。

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