如何将MUI Autocomplete组件用作搜索框并禁用点击弹出的下拉列表

问题原因 #

你现有代码不生效的核心原因有3个：

• onMouseClick 不是 Material-UI Autocomplete 组件的合法回调属性，组件内部不会识别和绑定这个事件，你写在里面的逻辑完全不会执行
• 单独配置 openOnFocus={false} 仅能阻止「输入框首次获得焦点」时自动弹出下拉，无法拦截输入框已经处于聚焦状态时，用户点击输入框区域触发的下拉弹出逻辑
• freeSolo 属性的作用是允许用户输入不在选项列表内的自定义值，本身不控制下拉面板的显隐，因此配置后无法达到禁止点击弹出的效果

实现方案 #

通过受控模式完全接管下拉面板的显隐状态，自定义下拉的打开时机即可实现需求，参考代码如下：

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

export default function SearchBar() {
  // 控制下拉显隐的状态
  const [dropDownOpen, setDropDownOpen] = useState(false);
  // 绑定输入框内容
  const [inputValue, setInputValue] = useState('');
  // 替换为你实际的选项列表
  const labels = [];

  return (
    <Autocomplete
      open={dropDownOpen}
      onOpen={(event) => {
        // 点击输入框本身时直接拦截，不打开下拉
        if (event.type === 'click' && event.target.tagName === 'INPUT') {
          return;
        }
        setDropDownOpen(true);
      }}
      onClose={() => setDropDownOpen(false)}
      inputValue={inputValue}
      onInputChange={(_, newVal) => {
        setInputValue(newVal);
        // 仅当输入框有实际内容时，才弹出下拉展示匹配选项
        setDropDownOpen(newVal.trim().length > 0);
      }}
      disablePortal={true}
      id="combo-box-demo"
      freeSolo
      options={labels}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="SKU" />}
    />
  );
}

效果说明 #

• 点击输入框/搜索区域时不会弹出选项列表
• 输入内容后会自动弹出匹配的选项列表
• 清空输入内容后下拉会自动关闭
• 如果你需要保留点击右侧下拉箭头展开全部选项的功能，现有逻辑已经支持；如果不需要，直接在onOpen回调里统一拦截所有非输入触发的打开事件即可。

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