MUI使用ClickAwayListener关闭Popper时影响内部Select如何解决？

Material UI 原生的 Select 组件弹出的下拉选项菜单默认会通过 Portal 挂载到页面根节点（通常是<body>），不在你写的 Paper 组件的 DOM 树范围内，因此点击下拉选项的操作会被 ClickAwayListener 判定为「点击了监听区域外」，触发关闭逻辑，导致下拉框刚弹出就消失。

你可以选择以下任意一种方案解决：

• 方案1：给Select组件添加disablePortal属性
  这是最简单的解法，添加后Select的下拉菜单会直接挂载在父组件内部，不会被判定为外部点击。
  修改你的renderSettingsForm()中用到Select的代码即可：

<Select
  // 新增这一行即可
  disablePortal
  // 你原来的其他属性保持不变
  value={yourValue}
  onChange={yourChangeHandler}
>
  {/* 选项内容 */}
</Select>

• 方案2：修改onClickAway逻辑，过滤下拉菜单的点击事件
  如果你因为样式/层级原因不想使用disablePortal，可以在关闭逻辑中主动过滤掉属于MUI弹出层的点击事件：

const closeSettingsPopup = (event) => {
  // 点击目标属于MUI弹出层（Select下拉菜单、Popover等）时，不执行关闭
  if (event.target.closest('.MuiPopover-root, .MuiMenu-root')) {
    return
  }
  // 原来的关闭逻辑保持不变
  setPopupOpenState(false)
}

如果类名不匹配，可以在浏览器控制台审查下拉菜单的DOM元素，替换成实际的弹出层类名即可。

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