My search bar utilizes Autocomplete from material ui to suggest options, and it includes a TextField for inputting text.
The issue I'm facing is that when typing in the TextField, I notice two clear buttons (x button) - one on the left of the loading screen and another on the right. Once the loading screen disappears, these two buttons are displayed next to each other. I find the extra button on the left unnecessary and visually unappealing, but I'm unsure why it appears there.
https://i.stack.imgur.com/moeih.png
https://i.stack.imgur.com/CMwBG.png
Search.jsx:
<div className={searchClasses.search}>
<Autocomplete
options={isEmpty ? [] : suggestionsList}
freeSolo
style={{width: "100%"}}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
margin="normal"
required
fullWidth
autoFocus
loading={loading}
style={{margin: 0}}
classes={{ notchedOutline: classes.input }}
onChange={handleOnChange}
onKeyDown={e => handleKeyDown(e)}
placeholder="Search..."
type="search"
InputProps={{
...params.InputProps,
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
classes: { notchedOutline: classes.noBorder }
}}
/>
)}
renderOption={(option, { inputValue }) => {
const matches = match(option.title, inputValue);
const parts = parse(option.title, matches);
return (
<div>
{parts.map((part, index) => (
<span
key={index}
style={{ fontWeight: part.highlight ? 700 : 400 }}
>
{part.text}
</span>
))}
</div>
);
}}
/>
</div>