1

The second clear button shows only on Chromium; it doesn't show on Firefox.

Example of a MUI React Autocomplete component showing two clear buttons.

All the solutions mentioned here hide only the right most button, not the one on the left.

How do I hide the one on the left?

This seems to happen only when type: 'search' is added to InputProps

Minimal, reproducible example on Chromium Version 110.0.5481.100:

<Autocomplete
  disablePortal
  disableClearable
  id="combo-box-demo"
  options={supported_games}
  sx={{ width: 300 }}
  renderInput={(params) => <TextField {...params} label="Movie" InputProps={{ ...params.InputProps, type: 'search'}} />}
/>

Reproducible outcome:

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
mohab
  • 11
  • 2
  • Is this a bug from MUI? Can you provide a minimal and reproducible example? – Joshua Feb 20 '23 at 09:07
  • @konekoya Added. I don't know if it's a bug, which is why I haven't started a Github issue, but I noticed the second clear button shows up when I involve `InputProps` If `InputProps` is taken out of the example code, it works as intended. Edit: It seems to be `type: 'search'` making it happen. – mohab Feb 20 '23 at 09:46

0 Answers0