Material UI Autocomplete - render image in list

Question

I'm trying to use the Material UI 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!

Answer 1

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.