Wanted to add buttons below select dropdown menu with specific height, but when i try to put menu item inside div, multiple select stopped working, no idea why it's happening. Need Help !!!
CodeSandbox: https://codesandbox.io/s/eloquent-breeze-flkcjl?file=/src/App.tsx:0-1666
import "./styles.css";
import { useState } from "react";
import {
Select,
Typography,
MenuItem,
Box,
SelectChangeEvent,
Button
} 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
// MenuProps={{
// sx: { height: "300px" }
// }}
value={val}
onChange={handleChange}
renderValue={(selected: any) => {
if (selected.length === 0) {
return (
<Typography noWrap fontWeight={400} fontSize="13px">
Select
</Typography>
);
}
return selected.join(", ");
}}
>
<Box sx={{ height: "200px", overflow: "auto" }}>
{displayedBlockOptions.map((option: any, i: any) => (
<MenuItem key={i} value={option}>
{option}
</MenuItem>
))}
</Box>
<Box
mt={2}
display="flex"
justifyContent="flex-end"
alignItems="center"
>
<Button sx={{ mx: 1 }} size="small" variant="outlined">
Cancel
</Button>
<Button sx={{ mx: 1 }} size="small" variant="contained">
Done
</Button>
</Box>
</Select>
</div>
);
}
You can't use Box and Button inside the Select component, use it like this:
import "./styles.css"; import { useState } from "react"; import { Select, Typography, MenuItem, Box, SelectChangeEvent, Button } 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"> <Box> <Select displayEmpty multiple // MenuProps={{ // sx: { height: "300px" } // }} value={val} onChange={handleChange} renderValue={(selected: any) => { if (selected.length === 0) { return ( <Typography noWrap fontWeight={400} fontSize="13px"> Select </Typography> ); } return selected.join(", "); }}> {displayedBlockOptions.map((option: any, i: any) => ( <MenuItem key={i} value={option}> {option} </MenuItem> ))} </Select> </Box> <Box mt={2} display="flex" justifyContent="flex-end" alignItems="center"> <Button sx={{ mx: 1 }} size="small" variant="outlined"> Cancel </Button> <Button sx={{ mx: 1 }} size="small" variant="contained"> Done </Button> </Box> </div> ); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.