I'm trying to use the MUI Autocomplete component for Google places autocomplete, and I need to add an image for "powered by google" to the end of the list, and don't want it to be a selectable item.
I know you can render the individual items with renderOption
, but is there some way I can add custom render logic to the list itself, like adding a div to the bottom of it?
Thanks!
I figured this out: I just needed to add a custom ListboxComponent
and pass it to the Autocomplete
.
Here's the custom component:
function ListboxComponent(props) {
return(
<>
<ul
{...props}
/>
<img src={googleLogo}/>
</>
);
}
And I set up the Autocomplete
as follows:
<Autocomplete
ListboxComponent={ListboxComponent}
[...]
/>
Works like a charm. Note that this only renders the image when there are options-- if options is empty, it doesn't render it.