I built an AutoComplete component that looks like this:
<Autocomplete
freeSolo
size="small"
id="filter-locks-autocomplete"
options={json_list ? json_list : []}
groupBy={(option) => option.lock.building}
getOptionLabel={(option) => (option.name)}
inputValue={inputValue}
onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label={'lock'}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<Search sx={{ color: "black", fontSize: 20, marginLeft: "2px" }} />
{params.InputProps.startAdornment}
</InputAdornment>
),
}}
/>
)}
/>;
However, the list of options do no longer appear when clicking inside the box.
If I remove the InputProps from <TextField />
like so:
<Autocomplete
freeSolo
size="small"
id="filter-locks-autocomplete"
options={json_list ? json_list : []}
groupBy={(option) => option.lock.building}
getOptionLabel={(option) => option.name}
inputValue={inputValue}
onInputChange={(event, newInputValue) => setInputValue(newInputValue)}
ListboxProps={{ sx: { zIndex: 1500 } }}
renderInput={(params) => (
<TextField {...params} variant="standard" label={"lock name"} />
)}
/>;
the list of options show as expected.
Is there a way I can add an inputAdornment (just a search icon) to AutoComplete component without removing the Options list?
Here I found the solution, you can try following code
<Autocomplete
id="tags-standard"
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[13]]}
renderInput={params => {
return (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
fullWidth
InputProps={{
...params.InputProps,
startAdornment: (
<>
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
{params.InputProps.startAdornment}
</>
)
}}
/>
);
}}
/>
It is working fine. you can also check here in CodeSandbox
for more details check this Github material-ui issue