本教程旨在解决mui select组件在多下拉菜单场景下，从一个已打开的菜单切换到另一个菜单时需要两次点击的问题。通过深入理解mui下拉菜单的渲染机制，本文将介绍一种策略：结合调整组件的`zindex`属性和在`onopen`事件中模拟点击背景蒙层，从而实现用户单次点击即可流畅切换不同select组件的交互体验，显著提升用户界面的可用性。
默认行为解析：MUI Select 的两次点击问题
在使用Material-UI (MUI) 的Select组件构建包含多个下拉菜单的界面时，开发者可能会遇到一个常见的交互问题：当一个Select下拉菜单（例如下拉菜单A）已经打开时，用户如果尝试直接点击另一个Select组件（例如下拉菜单B）以打开它，MUI默认会要求用户进行两次点击。第一次点击会关闭当前打开的下拉菜单A，第二次点击才能打开下拉菜单B。
这种行为的根源在于MUI Select组件的内部实现机制。当任何一个Select组件被打开时，MMUI会在页面上动态生成一个名为MuiModal-backdrop的隐形背景蒙层。这个蒙层通常具有较高的z-index值（例如1300），并覆盖了除了当前打开的下拉选项菜单之外的所有页面内容。它的主要作用是捕获下拉菜单外部的点击事件，以便在用户点击页面其他区域时自动关闭当前打开的菜单。
因此，当下拉菜单A打开时，其MuiModal-backdrop覆盖了整个页面。此时用户点击下拉菜单B，实际上是点击到了下拉菜单A的MuiModal-backdrop上。这导致的结果是下拉菜单A被关闭，而下拉菜单B并未被激活。用户必须再次点击下拉菜单B才能将其打开，从而产生了“两次点击”的体验。
解决方案：实现单次点击切换策略
为了优化这种交互体验，实现用户单次点击即可在不同Select组件之间切换的功能，我们需要采取一种策略，既能绕过MuiModal-backdrop的点击阻碍，又能确保在打开新菜单前关闭旧菜单。
核心思路是：
- 提升目标Select组件的z-index：确保当其他Select的backdrop存在时，目标Select组件仍然可以接收到点击事件。
- 程序化关闭现有下拉菜单：在新Select组件打开之前，主动触发关闭当前已打开的任何Select组件。
步骤一：提升目标组件的 Z-index
为了让用户可以直接点击到其他Select组件，即使当前有一个MuiModal-backdrop存在，我们也需要确保Select组件（或其父级FormControl）的z-index高于MuiModal-backdrop。MUI的backdrop默认z-index通常为1300，因此我们可以将我们的FormControl的z-index设置为一个更高的值，例如1350。
<FormControl
variant="outlined"
size="small"
sx={{
// ...其他样式
zIndex: 1350, // 确保FormControl在backdrop之上，可被点击
"& .MuiOutlinedInput-notchedOutline": {
border: "none"
}
}}
>
{/* ...Select组件内容 */}
</FormControl>通过设置zIndex: 1350，当用户点击这个FormControl内部的Select组件时，点击事件将优先被FormControl捕获，而不是被旧Select的backdrop捕获。
步骤二：程序化关闭现有下拉菜单
仅仅提升z-index会导致一个问题：如果用户快速点击多个Select组件，可能会出现多个下拉菜单同时打开的情况，这通常不是我们期望的。因此，我们需要在新的Select组件即将打开时，主动关闭任何当前已打开的Select组件。这可以通过监听Select组件的onOpen事件，并模拟点击MuiModal-backdrop来实现。
当onOpen事件触发时，我们查找页面上是否存在MuiModal-backdrop元素。如果存在，就对其执行一次模拟点击操作。由于backdrop的职责就是关闭当前打开的菜单，模拟点击它将有效地关闭之前打开的Select组件。
<Select
onChange={handleChange}
label={value === "" ? label : ""}
value={value}
onOpen={() => {
// 在新Select打开前，查找并点击当前可能存在的backdrop，以关闭旧的Select
document.querySelector(".MuiModal-backdrop")?.click();
}}
onClose={() => {
setTimeout(() => {
document.activeElement.blur();
}, 0);
}}
sx={{
// ...其他样式
}}
>
{/* ...MenuItem内容 */}
</Select>这里使用了可选链操作符 ?. 来确保即使没有MuiModal-backdrop存在时，代码也不会报错。
示例代码
以下是整合了上述解决方案的Dropdown组件的完整代码示例：
import { InputLabel, MenuItem, FormControl, Select } from "@mui/material";
const Dropdown = ({ value, label, options, setter }) => {
const handleChange = (event) => {
const selectedValue = event.target.value;
setter(selectedValue);
};
return (
<FormControl
variant="outlined"
size="small"
sx={{
minWidth: "140px",
backgroundColor: "#eb6060",
borderRadius: "5px",
border: "1px solid black",
zIndex: 1350, // 关键修改1: 提升FormControl的z-index，使其在backdrop之上可被点击
"& .MuiOutlinedInput-notchedOutline": {
border: "none"
}
}}
>
<InputLabel
shrink={false} // 防止标签在用户点击下拉菜单时缩小到左上角
sx={{
// 防止用户点击下拉菜单时标签文本出现蓝色高亮
color: "black",
opacity: 0.6,
"&.Mui-focused": {
color: "black",
opacity: 0.6
}
}}
>
{value === "" ? label : ""}
</InputLabel>
<Select
onChange={handleChange}
label={value === "" ? label : ""}
value={value}
// 关键修改2: 在新Select打开时，模拟点击现有backdrop以关闭旧Select
onOpen={() => {
document.querySelector(".MuiModal-backdrop")?.click();
}}
onClose={() => {
// 在关闭时取消焦点，避免残留的焦点样式
setTimeout(() => {
document.activeElement.blur();
}, 0);
}}
sx={{
"&:hover": {
backgroundColor: "#b34b4b"
},
"&.Mui-focused": {
backgroundColor: "#b34b4b"
}
}}
>
{options.map((option) => (
<MenuItem
key={option.code}
value={option.code}
sx={{
// 移除下拉选项上的键盘焦点高亮
"&.Mui-focusVisible": {
backgroundColor: "white"
},
// 为下拉选项添加鼠标悬停高亮
"&.MuiMenuItem-root:hover": {
backgroundColor: "#D3D3D3"
}
}}
>
{option.alias}
</MenuItem>
))}
</Select>
</FormControl>
);
};
export default Dropdown;注意事项与最佳实践
DOM操作的考量： 直接使用document.querySelector来查找并操作DOM元素，虽然在此场景下非常有效，但在React等声明式框架中通常被视为一种“hacky”方法，因为它绕过了React的虚拟DOM管理。然而，考虑到MUI Select组件底层对MuiModal-backdrop的实现方式，这种直接操作DOM的方式是目前解决此特定问题的最直接和有效的方法。
Z-index冲突风险： 将FormControl的zIndex设置为1350是为了确保它高于MUI backdrop的默认z-index。如果您的应用程序中存在其他具有更高z-index的组件（例如自定义模态框或浮动元素），可能会导致新的z-index值出现冲突，需要根据实际情况进行调整。
MUI版本兼容性： MUI组件的内部DOM结构和类名（如MuiModal-backdrop）在未来MUI的主要版本更新中可能会发生变化。如果遇到此问题，可能需要检查MUI的官方文档或更新日志，并相应地调整document.querySelector中的选择器。
性能影响： 对于大多数应用程序而言，在onOpen事件中执行一次document.querySelector和click()操作的性能开销可以忽略不计。但在极其复杂或性能敏感的场景下，如果存在大量同时渲染的Select组件，并且频繁进行切换，可以考虑更高级的全局状态管理方案来控制所有Select组件的打开/关闭状态。
总结
通过巧妙地结合CSS z-index属性的调整和JavaScript在onOpen事件中模拟点击MuiModal-backdrop，我们成功地解决了MUI Select组件在多下拉菜单场景下需要两次点击才能切换的问题。这种方法虽然涉及一些对底层DOM的直接操作，但它为用户带来了更加流畅和直观的单次点击切换体验，显著提升了应用程序的用户界面可用性。在应用此方案时，请务必注意上述提及的兼容性和潜在冲突问题。
