在Accordion内点击MUI Autocomplete时，如何阻止事件传播？

要阻止点击Autocomplete时触发Accordion展开和聚焦，核心是在事件传播的早期阶段拦截事件，避免其传递到AccordionSummary。之前用onClick阻止传播无效，是因为click事件触发在Accordion的展开逻辑之后，需改用mousedown（适配桌面端）和touchStart（适配移动端）事件处理：

1. 给Autocomplete组件添加onMouseDown和onTouchStart事件处理函数
2. 在函数中同时调用event.stopPropagation()和event.preventDefault()——前者阻止事件向上传播到AccordionSummary，后者避免触发Accordion的聚焦行为

修改后的代码示例：

<Accordion>
  <AccordionSummary expandIcon={<ExpandMoreIcon />}>
    <Typography>Accordion Title</Typography>
    <Autocomplete
      options={top100Films}
      sx={{ width: 300, marginLeft: 2 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
      onMouseDown={(e) => {
        e.stopPropagation();
        e.preventDefault();
      }}
      onTouchStart={(e) => {
        e.stopPropagation();
        e.preventDefault();
      }}
    />
  </AccordionSummary>
  <AccordionDetails>
    <Typography>
      Accordion content here...
    </Typography>
  </AccordionDetails>
</Accordion>

原理说明 #

AccordionSummary的展开和聚焦逻辑是通过监听mousedown事件实现的，点击Autocomplete时，mousedown事件会先于click触发。在这个阶段拦截事件传播，就能彻底避免Accordion捕获到该事件，自然不会触发展开或聚焦行为。

内容的提问来源于stack exchange，提问作者Gabriel de Moura