leaflet marker popup opening and immediately closing

Question

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.

Answer 1

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!