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

[Bug] InfoWindow flickering on re render (creating several portals?)

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

I maintainer di solito rispondono entro 2 giorni

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
35/100
Tipo di issue
Bug
Chiarezza
Da chiarire
Stato di attività
Ferma
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Inizia dalla riproduzione CodeSandbox collegata e confronta il primo rendering di InfoWindow con le modifiche di posizione successive. Traccia il ciclo di vita dell’aggiornamento di InfoWindow e del portale, incluso il caso headerContent, e verifica che gli aggiornamenti ripetuti non aggiungano sfarfallio né attivino il loop guidato dall’hover.

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

Descrizione

bug
Description

When I open an InfoWindow for the first time, it works fine. But after I update the position (I tested with position, but could be true for other props), I can see the content flickering every time it re renders. It seems to get worse with every position change. If the position changed once, the content will blink once on re render. If position changed twice, content will blink twice and so on.

Maybe it's adding a new portal with every position change? I managed to fix the problem in some cases by using position as key of InfoWindow, which could indicate that something is not being cleaned up properly on props update. The "key" trick doesn't work when headerContent is set.

Steps to Reproduce

This is not the exact same scenario as I described, but it is an easier way to reproduce the same problem. In this case I am using the flickering to trigger an infinite loop: mouse enter -> update state -> flicker -> flicker causes mouse leave -> update state -> flicker -> mouse enter

CodeSandbox example: https://codesandbox.io/p/devbox/marker-issue-forked-kssrss?workspaceId=ws_AJApL5q2Q836HiYdKXszjW

  • Click anywhere on the map to open the InfoWindow
  • Notice that you can hover over the content elements to change the box color, at least the first time InfoWindow is opened
  • Click on another location on the map to move the InfoWindow
  • Hovering the elements should now trigger an infinite loop
Environment
  • Library version: 1.5.5
  • Google maps version: weekly
  • Browser and Version: Chrome Version 140.0.7339.133
  • OS: MacOS 15.6
Lingua principale
TypeScript
Stelle
1.9k
Fork
195
Merge medio
2g 11h
PR unite (30g)
14

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.