formik-mui
formik-mui copied to clipboard
custom multiple select
Hi i create multiple select with custom styles in dropdown list.
Is it possible delete from value in input
[Object, Object]
?
Here is my code
const useStyles = makeStyles((theme: Theme) => ({
multipleMenuItem: {
position: "relative",
"& .MuiSvgIcon-root": {
display: "none",
},
"&.Mui-selected .MuiSvgIcon-root": {
display: "block",
position: "absolute",
right: theme.spacing(1),
color: theme.palette.tint.main,
},
},
}));
<Field
component={TextField}
type="text"
name="tags"
select
SelectProps={{
multiple: true,
}}
label="Hashtags"
fullWidth
variant="outlined"
margin="normal"
>
{tags.map((tag) => (
<MenuItem
value={tag.id}
key={tag.id}
className={styles.multipleMenuItem}
>
{formatTag(tag.name)}
<CloseIcon />
</MenuItem>
))}
</Field>
@czesuaf92 if you create a codesandbox I can take a look
I get the same issue when I add a checkbox component in the MenuItem component. Seems like it only works if there's no other component inside the MenuItem. @cliedeman try adding a checkbox component inside your menuitem multiple select example and you'll see it.