I've encountered an issue with my select menu. When I click on it, the options are displayed in a single line. However, upon selecting an item, it appears on two lines - one for the text and another for the icon. How can I ensure that the selection remains on one line?
import "./styles.css";
import EditIcon from "@material-ui/icons/Edit";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Select from "@material-ui/core/Select";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
const items = ["a", "b", "c"];
export default function App() {
return (
<>
<FormControl>
<InputLabel>Please select an option</InputLabel>
<Select required defaultValue="hi" fullWidth>
{items.map((item, idx) => (
<MenuItem key={idx} value={item}>
<ListItemText primary={item} />
<ListItemIcon>
<EditIcon />
</ListItemIcon>
</MenuItem>
))}
</Select>
<FormHelperText>Just select something already</FormHelperText>
</FormControl>
</>
);
}
https://codesandbox.io/s/brave-stallman-9brmk?file=/src/App.js