MUI Autocomplete自定义选项无法选中？自定义renderOption属性后无法选择选项的原因排查

这个问题我之前也踩过坑！核心原因是你在自定义renderOption时，没有把MUI自动传入的props传递给选项的最外层元素。

MUI的renderOption参数里的props包含了很多关键的交互属性——比如onClick点击事件、aria-selected选中状态标识、role语义化角色等等，这些是Autocomplete组件识别“用户选中了哪个选项”的核心依赖。如果你的自定义选项根元素不接收并应用这些props，组件就无法响应你的选择操作。

修复后的代码 #

<Autocomplete
  disablePortal
  id="combo-box-demo"
  options={top100Films}
  sx={{ width: 300 }}
  renderOption={(props, option) => (
    // 关键：把props展开传递给最外层div
    <div {...props} style={{ padding: "4px 10px" }}>
      {option.label + " " + option.year}
    </div>
  )}
  renderInput={(params) => <TextField {...params} label="Movie" />}
/>

简单来说，只要确保renderOption返回的根元素接收了props，选择功能就能正常工作啦！

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