MUI带删除按钮的Chip选择组件点击删除触发下拉弹窗问题求助

问题出在点击Chip删除按钮时，事件冒泡到了MUI Select组件的根元素，触发了下拉展开逻辑。即使添加了event.stopPropagation()，如果没绑定到正确的元素上，就不会生效。以下是具体解决方案：

方案1：给删除按钮单独绑定阻止冒泡事件 #

将Chip的deleteIcon替换为自定义的IconButton，在它的onClick事件中调用stopPropagation()，确保点击删除按钮时不会把事件传递给父级Select：

import IconButton from '@mui/material/IconButton';
import CancelIcon from '@mui/icons-material/Cancel';

// 渲染Chip的部分
{selectedOptions.map((item) => (
  <Chip
    key={item}
    label={item}
    onDelete={() => handleDelete(item)}
    deleteIcon={
      <IconButton
        onClick={(e) => e.stopPropagation()}
        size="small"
      >
        <CancelIcon />
      </IconButton>
    }
    sx={{ m: 0.5 }}
  />
))}

方案2：在handleDelete函数中阻止事件冒泡 #

确保handleDelete函数接收事件参数，并在执行删除逻辑前调用stopPropagation()：

const handleDelete = (item, e) => {
  e.stopPropagation();
  // 执行删除逻辑，更新选中项
  setSelectedOptions(prev => prev.filter(opt => opt !== item));
};

// 对应Chip的onDelete写法
<Chip
  key={item}
  label={item}
  onDelete={(e) => handleDelete(item, e)}
  sx={{ m: 0.5 }}
/>

关键原理 #

MUI Select组件的下拉展开逻辑是监听其根容器的点击事件，只要内部元素的点击事件没有阻止冒泡，就会触发下拉。删除按钮作为Chip的子元素，点击时默认会把事件冒泡到Chip，再到Select容器，所以必须在删除按钮的点击事件链上阻止冒泡传递。

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