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?
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"
/>
)}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.