MUI多选复选框Select问题：下拉框未关闭时页面其他按钮不可点击

核心解决方案：配置Select的MenuProps属性 #

MUI的Select组件默认会在下拉菜单展开时，通过内置的模态机制锁定外部元素交互，你可以通过修改MenuProps的相关配置解除这个限制：

• 解除焦点与滚动锁定：给MenuProps添加如下配置，关闭强制焦点、自动聚焦和滚动锁定，让外部元素恢复可交互性：

<Select
  multiple
  renderValue={(selected) => selected.join(', ')}
  MenuProps={{
    disableScrollLock: true,
    ModalProps: {
      disableEnforceFocus: true,
      disableAutoFocus: true,
    },
  }}
>
  {/* 你的选项列表 */}
</Select>

• 禁用菜单的模态渲染：如果不需要模态层的特性，可直接将菜单设置为非模态模式，同时调整渲染方式避免层级问题：

<Select
  multiple
  renderValue={(selected) => selected.join(', ')}
  MenuProps={{
    disablePortal: true,
    keepMounted: true,
    variant: "menu",
    style: { zIndex: 1300 }, // 确保菜单层级不被其他元素遮挡
  }}
>
  {/* 你的选项列表 */}
</Select>

补充提示 #

• 使用disablePortal后，菜单会渲染在当前组件的DOM层级下，若出现菜单被遮挡的情况，可通过调整style里的zIndex值解决（MUI默认模态层的zIndex为1300，设置相同或更高数值即可）。
• 上述配置不会影响多选Select的核心功能，仅解除外部元素的交互锁定。

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