防止 Material UI when Select Dropdown when clicking away 事件冒泡

Prevent event bubbling in Material UI when Select Dropdown when clicking away

我有一个带有复选框的 div 和一个 Select 下拉列表（使用 ClickAwayListener，不确定是否相关）。

我可以点击此 div 中的任意位置来更改复选框，但 Select 除外，它不应更改复选框，而是打开、关闭和 select和项目而不触及复选框。

问题是即使所有代码都用于防止事件冒泡，当我尝试关闭 select 时复选框仍在变化。如果我与 select 进行交互，我不希望复选框发生变化。我该如何解决这个问题？

这是一个演示问题的演示：

这张 gif 还显示了具体情况：

要重新创建它，请查看如何在不更改复选框的情况下打开下拉列表。

现在，单击 div 外部关闭下拉菜单。您会看到复选框发生了变化。这不应该发生。如果我 select 一个项目或通过单击其他地方关闭它，打开下拉列表后，复选框不应更改。

无论如何，我能做些什么来解决这个问题？

谢谢！

嗯，我最好的猜测是，当您在 select 外部单击时，Select 组件会将 click 事件从背景转发到 Select 组件。

因为您只捕获了 blur 事件，所以捕获 click 事件应该可以解决问题。