优化MUI Select组件交互：实现单次点击切换下拉菜单

<FormControl
    variant="outlined"
    size="small"
    sx={{
        // ...其他样式
        zIndex: 1350, // 确保FormControl在backdrop之上，可被点击
        "& .MuiOutlinedInput-notchedOutline": {
            border: "none"
        }
    }}
>
    {/* ...Select组件内容 */}
</FormControl>

<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>

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;