I am trying to always show the "x" in the MUI Autocomplete instead of only showing it on hover.
What I mean: https://codesandbox.io/s/combobox-material-demo-forked-obbuu9
When you hover over the Dropdown the X will show up which will delete the content of the dropdown.
Is there any way to keep that X there at all times?
Here is what you can do with a little Css:
export default function ComboBox() {
return (
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
value={top100Films[0]}
sx={{
width: 300,
"& button[title='Clear']": {
visibility: "visible"
}
}}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
);
}
Here is the demo in codesandbox: https://codesandbox.io/s/combobox-material-demo-forked-7u1noe?file=/demo.js:137-511
just change the The sx prop to this :
sx={{
width: 300,
"& button.MuiButtonBase-root" : {
visibility: "visible"
}
}}