Reputation: 55
I want to create Autocomplete
with TextField
component without underline. I have disabled underline using InputProps={{ disableUnderline: true }}
in TextField
props, it did its job, but it also removed the selection bar, so the question is, how can I accomplish this without removing the select bar?
Upvotes: 2
Views: 4974
Reputation: 81833
To enable the dropdown list again, you need to spread all provided props in the nested property too (InputProps
). So replace this line
<TextField {...params} InputProps={{ disableUnderline: true }} />
With:
<TextField {...params} InputProps={{ ...params.InputProps, disableUnderline: true }} />
Full working code:
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
renderInput={(params) => (
<TextField
{...params}
InputProps={{ ...params.InputProps, disableUnderline: true }}
label="Combo box"
/>
)}
/>
Upvotes: 5