He agregado casillas de verificación a MenuItems en TextField de tipo Select . Cuando selecciono uno de los Elementos de menú, la casilla de verificación también se muestra en la entrada de TextField.

Req: necesito dejar de mostrar la casilla de verificación en la entrada de TextField. Necesito usar estrictamente el TextField con el atributo Selcet.

¿Puede alguien por favor ayudarme con esto? Gracias.

enlace de la caja de arena: https://codesandbox.io/s/basicselect-material-demo-forked-06gns?file=/demo.js

código:

 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> ); }