MUI v5 Autocomplete：点击选项按钮时保持下拉列表开启的方法

要实现这个需求，核心是阻止播放按钮的点击事件向上冒泡，避免触发Autocomplete选项的默认选中逻辑，同时确保列表不会关闭。下面是具体的实现步骤和修改后的代码：

关键修改点 #

• 在播放按钮的点击事件中调用event.stopPropagation()，阻止事件传递到外层的选项容器，从而避免触发选中行为。
• 确保Autocomplete的disableCloseOnSelect属性设为true（如果需要点击选项本身时也不关闭列表，可按需调整）；即使不设置这一项，阻止事件冒泡后按钮点击也不会触发列表关闭。

修改后的完整代码 #

<Autocomplete
  disableCloseOnSelect={true}
  options={options}
  getOptionLabel={(option: any) => option[optionLabel]}
  isOptionEqualToValue={(option: any, value: any) => option.id === value.id}
  renderInput={(params) => {
    return <TextField {...params} placeholder={placeholder} />;
  }}
  PaperComponent={AutocompletePaper}
  renderOption={(renderProps, option: any, { selected, inputValue }) => {
    return (
      <span {...renderProps}>
        <Stack>
          {/* 给播放按钮添加事件阻止冒泡 */}
          <PlayArrowRoundedIcon 
            onClick={(event) => {
              event.stopPropagation(); // 阻止事件冒泡到选项容器
              console.log('播放按钮被点击');
            }}
            style={{ cursor: 'pointer' }} // 可选：添加鼠标指针样式提升交互体验
          />

          <StyledAvatar src={option.avatar} />
          <span>{option.name}</span>
        </Stack>
      </span>
    );
  }}
/>

原理说明 #

Autocomplete的每个选项容器（即renderOption返回的span元素）绑定了默认的点击事件，用于触发选项选中和列表关闭逻辑。当点击播放按钮时，事件会向上冒泡到这个容器，进而触发默认行为。通过调用event.stopPropagation()，我们切断了事件的传播路径，使得选项容器的默认事件不会被触发，从而实现点击按钮既不选中选项，也不关闭列表的效果。

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