Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#770 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 3 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
25/100
Tipo di issue
Funzionalità
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia dal componente e riproduci i due elementi .pac-container iniettati con il widget Google Places Autocomplete. Verifica se la Google Maps JavaScript API consente di disabilitare o indirizzare il secondo contenitore, quindi determina se è fattibile una prop supportata o se la limitazione debba essere documentata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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 🙏

Image

Proposal

I don't have any proposal for now

Lingua principale
TypeScript
Stelle
1.9k
Fork
195
Merge medio
2g 18h
PR unite (30g)
15

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di visgl/react-google-maps

Tutte le issue di visgl/react-google-maps

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.