Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

95
Vistas
leaflet marker popup opening and immediately closing

In my leaflet map, clicking on a marker opens its popup and immediately closes it.

Logging of map events reveals that instead of firing just a popupopen event, the click on the marker triggers 2 events - popupopen followed by popupclose of the same marker.

This behavior is semi-consistent:

  • Open+close happens when you just click on the marker without dragging the mouse at all. But if you click the marker and move the mouse by just few pixels (< ~30px) while at it, the popup now opens just fine (and only a popupopen event is fired, without popupclose following it).
  • Open+close happens reliably only in Safari on Mac and iPhone. It also happens sometimes in Chrome on Mac, and when it does - it's consistent during the testing session.
  • This only happens in one of my 2 map pages, which use a common map component (one for mobile, one for desktop). Obviously this is a good place to start debugging, but despite many hours of debugging I haven't been able to narrow down the relevant difference between them.

I debugged the source of the popupclose event, and was suprised to discover that the _openPopup function in src/layer/Popup.js:473 is invoked twice. This method ends up calling this.closePopup() on the second invocation.

Note sure it if's related, but looking at click events on the map, I see in Safari two such events per mouse click, both having an original event of type MouseEvent. In Chrome, when things work correctly, there is just a single event with an original event of PointerEvent.

I suspect that this could be related to #7255, however unfortunately the recommended workaround of setting tap to false didn't help.

Any ideas what could be the cause and how to work around it?

Using Leaflet 1.7.1 through react-leaflet 3.2.1.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Update:

It turns out that setting tap to false actually did resolve this!

Not sure how I missed this previously. Definitely one of the more frustrating third-party issues I encountered recently!

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda