Material UI Select下拉菜单点击外部关闭时如何阻止事件冒泡影响复选框

• MUI的Select组件默认使用Portal将下拉菜单渲染到页面根节点而非父div内部，且ClickAwayListener依赖全局的事件监听实现外部点击关闭逻辑，仅给Select内部加阻止冒泡无法覆盖点击外部关闭的场景
• 点击外部关闭Select时，点击事件会正常触发外层div的点击回调，之前添加的阻止冒泡逻辑对这类非Select内部触发的点击完全不生效，最终导致复选框被意外切换

1. 新增状态标记Select的展开状态

import { useState } from 'react';
// 组件内部新增状态
const [isSelectOpen, setIsSelectOpen] = useState(false);

2. 给Select绑定开/关事件同步状态，同时保留原有阻止冒泡逻辑

<Select
  onClick={e => e.stopPropagation()}
  onOpen={() => setIsSelectOpen(true)}
  onClose={() => setIsSelectOpen(false)}
  // 保留你原来的其他Select属性，比如value、onChange等
>
  {/* 原有选项代码 */}
</Select>

3. 修改外层div的点击回调逻辑，仅当Select未展开时才切换复选框状态

const handleContainerClick = () => {
  // 仅Select未打开时才执行复选框切换
  if (!isSelectOpen) {
    setChecked(prev => !prev);
  }
};

该方案完全规避了事件冒泡、ClickAwayListener的事件触发顺序等底层逻辑影响，从业务逻辑层面直接拦截不符合预期的操作，稳定性更高，完全覆盖需求场景：点击Select区域操作、选择选项关闭、点击外部关闭都不会意外触发复选框变更。

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