I've customized the MenuItems in a TextField of type Select to include checkboxes. However, when I select an item from the menu, the checkbox is also displayed in the input field of the TextField.
Requirement: I want to hide the checkbox in the TextField input and only use the TextField with the Select attribute.
Could someone provide assistance with this? Thank you.
https://i.sstatic.net/p3Bnr.png
sandbox link: https://codesandbox.io/s/basicselect-material-demo-forked-06gns?file=/demo.js
code:
import * as React from "react";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import ListItemText from "@mui/material/ListItemText";
import Checkbox from "@mui/material/Checkbox";
import TextField from "@mui/material/TextField";
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250
}
}
};
const names = ["Oliver Hansen", "Van Henry"];
export default function MultipleSelectCheckmarks() {
const [personName, setPersonName] = React.useState([]);
const handleChange = (event) => {
const {
target: { value }
} = event;
setPersonName(
// On autofill we get a the stringified value.
typeof value === "string" ? value.split(",") : value
);
};
return (
<div>
<FormControl sx={{ m: 1, width: 300 }}>
<TextField
// multiple
select
value={personName}
onChange={handleChange}
renderValue={(selected) => selected.join(", ")}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={personName.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</TextField>
</FormControl>
</div>
);
}