MUI多选下拉框添加按钮后功能失效问题求助

问题根源 #

MUI的Select组件会直接识别直接子级的MenuItem作为可选项，当你把MenuItem嵌套在Box里作为Select的子元素时，Select内部的选项识别逻辑会失效，导致多选功能（勾选、值更新）无法正常工作。

解决方案 #

通过Select的MenuProps自定义下拉菜单的完整结构，将选项放在固定高度的滚动容器中，按钮区域放在菜单底部，这样既满足高度控制需求，又不会打断Select对MenuItem的识别：

import "./styles.css";
import { useState } from "react";

import {
  Select,
  Typography,
  MenuItem,
  Box,
  SelectChangeEvent,
  Button,
  Menu
} from "@mui/material";

const displayedBlockOptions = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

export default function App() {
  const [val, setVal] = useState<string[]>([]);

  const handleChange = (event: SelectChangeEvent<typeof val>) => {
    const {
      target: { value }
    } = event;
    setVal(typeof value === "string" ? value.split(",") : value);
  };

  return (
    <div className="App">
      <Select
        displayEmpty
        multiple
        value={val}
        onChange={handleChange}
        renderValue={(selected) => {
          if (selected.length === 0) {
            return (
              <Typography noWrap fontWeight={400} fontSize="13px">
                Select
              </Typography>
            );
          }
          return selected.join(", ");
        }}
        MenuProps={{
          children: (props) => (
            <Menu {...props}>
              {/* 选项区域：固定高度+滚动 */}
              <Box sx={{ maxHeight: 200, overflow: "auto", p: 1 }}>
                {displayedBlockOptions.map((option, i) => (
                  <MenuItem key={i} value={option}>
                    {option}
                  </MenuItem>
                ))}
              </Box>
              {/* 底部按钮区域 */}
              <Box
                sx={{ p: 2, borderTop: 1, borderColor: "divider" }}
                display="flex"
                justifyContent="flex-end"
              >
                <Button sx={{ mx: 1 }} size="small" variant="outlined">
                  Cancel
                </Button>
                <Button sx={{ mx: 1 }} size="small" variant="contained">
                  Done
                </Button>
              </Box>
            </Menu>
          )
        }}
      />
    </div>
  );
}

关键调整点 #

1. 移除Select直接子级的Box，改用MenuProps.children自定义菜单内容
2. 将选项放入带maxHeight和overflow:auto的Box，实现指定高度的滚动效果
3. 按钮区域通过边框与选项区分隔，保持视觉层次，同时不影响MenuItem的事件交互

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