I'm putting in a lot of effort to customize the option elements in the autocomplete list. My plan is to achieve this using the renderOptions prop, where I can create DOM elements and easily apply styles with sx or styled components.
However, something seems off. When I attempt to render the options list elements wrapped in divs, the movie names are mysteriously hidden. They do get rendered because I can still select an option, which then appears as selected. But the input list remains broken, and CSS styles aren't being applied properly.
What am I overlooking? Autocomplete and its styling are relatively new concepts for me.
Here's the code:
<Autocomplete
freeSolo
id="free-solo-2-demo"
disableClearable
options={top100Films.map((option) => option.title)}
renderOption={(props, option) => {
return (
<li {...props}>
<div
sx={{
backgroundColor: "red",
color: "orange"
}}
>
{option.title}
</div>
</li>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
InputProps={{
...params.InputProps,
type: "search"
}}
/>
)}
/>
</Stack>
);
}
Here's the demo : https://codesandbox.io/s/freesolo-material-demo-forked-dupxol?file=/demo.js