如何阻止Material UI Autocomplete点击内部按钮时关闭结果弹窗

要阻止点击renderOption里的按钮时关闭Autocomplete的搜索弹窗，核心是拦截触发弹窗关闭的事件传递，具体做法如下：

• 给按钮添加onMouseDown事件处理函数，在其中调用event.preventDefault()和event.stopPropagation()，阻止事件的默认行为和向上冒泡。
• 保留onClick事件处理你的PopOver触发逻辑，确保功能正常。

示例代码片段：

renderOption={(props, option) => (
  <Box component="li" {...props}>
    {option.label}
    <Button
      variant="outlined"
      size="small"
      // 关键：阻止mousedown事件触发弹窗关闭
      onMouseDown={(e) => {
        e.preventDefault();
        e.stopPropagation();
      }}
      onClick={() => {
        // 这里写你的PopOver显示逻辑
        console.log(`触发${option.label}的PopOver`);
      }}
    >
      更多操作
    </Button>
  </Box>
)}

原理说明 #

Material UI的Autocomplete下拉弹窗（Paper组件）会监听内部的mousedown事件，一旦捕获到就会触发关闭逻辑。通过在按钮的mousedown事件里阻止事件传递，就能避免这个关闭逻辑被触发。只处理onClick是不够的，因为mousedown事件会先于onClick执行，已经触发了弹窗关闭。

另外要注意：外层的li元素必须传递props，这是Autocomplete用来处理选项选中状态等内部逻辑的必要属性，不能省略。

内容的提问来源于stack exchange，提问作者lucasbbs.dk