Always show "X" on Autocomplete to delete content

Question

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?

Answer 1

just change the The sx prop to this :

sx={{
    width: 300,        
    "& button.MuiButtonBase-root" : {
      visibility: "visible"
    }
  }}

Answer 2

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