Leaflet: Leaflet 1.7.1 causes 2 click events to be emitted by Leaflet Controls in Safari

I ran into this problem in firefox as well (and mobile safari). I was not able to reproduce it reliably but the hint that it comes from the tap option led me to the solution which disables tap entirely as I apparently don’t need it to open the popup, even on mobile safari:

var map = L.map('map', { "tap": false });

disabling tap altogether fixes this for me on safari (using leaflet from react-leaflet) and all my tap events still work.

var map = L.map('map', { "tap": false });

works great! Not sure what “tap” actually does since my markers, panning etc all still work.

source: https://bleepcoder.com/leaflet/694192486/leaflet-1-7-1-causes-2-click-events-to-be-emitted-by-leaflet

edit: says @eikes comment was pinned but I actually had to “unhide” it to see it

@AduchiMergen we are currently in the final phase before releasing 1.8.0. We think we release it with march

For anyone using Vue-Leaflet, setting tap to false seems to work to resolve the issue, but remember that vue-leaflet only allows some options to be passed as props to the map component directly, for the rest (like ‘tap’) you need to pass a custom ‘options’ object, as per: https://vue2-leaflet.netlify.app/faq/#how-can-i-specify-leaflet-options-that-aren-t-part-of-a-component-s-props

Disabling tap fixed the problem for me also. But since I’m using React-Leaflet, I don’t use L.map(). Instead, the MapContainer component has a tap prop that can be used for disabling tapping.

<MapContainer tap={false}>

I ran into this problem in firefox as well (and mobile safari). I was not able to reproduce it reliably but the hint that it comes from the tap option led me to the solution which disables tap entirely as I apparently don’t need it to open the popup, even on mobile safari:

var map = L.map('map', { "tap": false });

Thank you for this solution, @eikes! I ran into this issue today and that solved it.

As appeared, the same issue affects not only desktop Safari, but also legacy Edge (and who knows what else). AFAIK atm tap handler is needed for iOS only.

So… May be we should change map.options.tap default to false.

Minimal example reproducing the issue

For the sake of clarity: that example is using

    L.DomEvent.on(container, "click", function(e) {

Note that this issue also causes bindPopup to not work with markers:

• Version 1.7.1: Nothing happens when clicking the marker https://jsfiddle.net/danmichaelo/gnds7a8o/15/
• master: Works as expected again 🎉 https://jsfiddle.net/danmichaelo/gnds7a8o/16/

@SpencerKaiser can you try leaflet@beta?

This issue prevents menus from working on Safari. For example, openstreetmap loses its map tools. As no one is assigned to this bug, it may not get attention.

The same problem happens to me and only happens in Safari. Chrome and Firefox are only firing the event once MacOS 10.15.6 and Safari 14.0.

I temporarily downgraded Leaflet to 1.6 and everything works normally.

If the JS at https://s3.amazonaws.com/leafletjs-cdn/content/leaflet/master/leaflet-src.js is the latest version, it’s still firing two click events on iOS Safari.

👮

~The off topic police are going a bit overboard here 🙄 the comment directly above this one is directly related to this issue…~

Edit: Thanks for making the one above on topic again 😉

Also do yall have an eta on the next release? I’m fine using the beta build for now, but I’m worried about future releases breaking us, so I’m nervous about checking that in as permanent fix.

ETA a few days. Very likely at the end of the week.

If 1.8.0 includes breaking changes, why isnt it a 2.0.0 release then??

@Falke-Design The 1.8 is quite big update which includes breaking changes IMHO bugfix should be released in a patch update 1.7.2

@systemed Can you please try shift-dragging using https://s3.amazonaws.com/leafletjs-cdn/content/leaflet/master/leaflet-src.js ? (e.g. https://plnkr.co/edit/v4GzrCYSxpIO1aOo ) That’s a build from master that already includes the changes from #7260.

https://s3.amazonaws.com/leafletjs-cdn/content/leaflet/master/leaflet-src.js ^ this version seems to work way better than 1.7.1 in desktop Safari 14.0. tap or click fires only once 👍

If it helps as a quick fix as a stopgap (and doesn’t break other things), commenting out that simulated event does seem to work for me in both Chrome and Safari on iOS…

https://github.com/Leaflet/Leaflet/blob/4f32a5e83525a3a42980c974e48712b058510eb5/src/map/handler/Map.Tap.js#L100

Unsure whether this is the same issue (so please forgive tagging onto end of existing ticket), but shift-drag to zoom in is also broken in 1.7.1 on desktop Safari. Happy to open a new issue if #7260 hasn’t fixed this too.