带全选的 MUI 自动完成

Question

我正在使用Material UI (5) 和Autocomplete 组件并启用了multiselect 选项。我还使用了 MUI 文档中的“复选框”自定义。我正在尝试做一个小的改进，以便能够“选中/取消选中所有”选项。为此，我使用了PopperComponent 属性。

遵循代码沙盒示例:https://codesandbox.io/s/checkboxestags-material-demo-forked-5b0pt

但是，我有 2 个问题我不知道如何解决：

• 当我单击全选时 -> 在组件外部单击 -> 在组件中再次单击 -> 尝试单击全选。请注意，弹出/菜单关闭...就像ClickAwayListener 拦截了组件外部的点击一样，但事实并非如此；
• 单击组件-> 向下滚动-> 选择一个选项-> 注意向上滚动到顶部。它应该保持在相同的位置。

Answer 1

因为你使用的是ClickAwayListener，所以它认为'全选'Checkbox已经不在了。

您可以通过添加onMouseDown 事件来防止这种情况：

<Checkbox
    checked={checkAll}
    onChange={checkAllChange}
    id="check-all"
    sx={{ marginRight: "8px" }}
    onMouseDown={(e) => e.preventDefault()}   // <== add this 
/>