custom multiple select

[czesuaf92]

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>

[cliedeman]

@czesuaf92 if you create a codesandbox I can take a look

[frankchau93]

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.