[Feat] Support disabling or targeting the second `.pac-container` injected by Google Autocomplete

[bleriotnoguia]

Target Use Case

Hi 👋 and thank you for the great work on this library!

I'm currently using the <Autocomplete> component from @react-google-maps/api and I noticed that, when the Google Places Autocomplete widget is initialized, it injects two div.pac-container elements into the DOM.

• The first seems to contain the actual place predictions.
• The second appears to be used for internal styling or highlight rendering.

While this behavior comes from the underlying Google Maps JavaScript API, it creates styling and layout issues in certain cases (e.g., inside modals or custom UI containers), especially when trying to apply scoped CSS in a React app.

Feature Request

Would it be possible to expose a prop or configuration option on the <Autocomplete> component that allows:

1. Either disabling the second .pac-container (if safe and feasible), or
2. Assigning a custom className or wrapper element to help us target it more precisely with CSS.

Even though this is mostly controlled by Google’s API, some developers might benefit from being able to more easily identify or interact with the injected containers.

Alternatives Considered

I tried this but it doesn't work

.pac-container:nth-of-type(2) {
  display: none !important;
}

Context

I'm using the latest version of the library with React 18, and I've confirmed the behavior is consistent across several environments. If there's a known workaround or best practice for this case, I'd appreciate any pointers!

Thanks again for your hard work 🙏

Proposal

I don't have any proposal for now

[usefulthink]

First off – this is not the issue-tracker you're looking for, this is the correct one :)

The problem with styling the legacy Autocomplete component has always been that the .pac-container will always be created at the top-level of the DOM (see here for example: https://geo-devrel-javascript-samples.web.app/samples/places-autocomplete/app/dist/), so the react-library you're using won't have any Idea where and when those DOM-elements are created. This can lead to a number of problems, but I'm not aware of seeing multiple .pac-container elements created by a single Autocomplete object.

I would recommend you look into using either the new <gmp-place-autocomplete> web-component for something that is quick and easy to integrate or the Autocomplete Data API if you want full flexibility to integrate it with your own UI framework (could be any framework that has a combobox implementation).

For our library, there is an example here: https://visgl.github.io/react-google-maps/examples/autocomplete:

• WebComponent version
• Custom with UI framework (also here)

That won't 100% match what you need to do when using @react-gooogle-maps/api but it should give you a good idea. It's not too complicated!

[bleriotnoguia]

@usefulthink Thank you very much for your clear and detailed answer. I will also test your library to see if it meets my expectations.