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

Steps to reproduce Steps to reproduce the behavior:

• set up a basic map, with a control that has a button in it, which listens for click events and posts the events to the console
• click the button in the control using Safari on a Mac
• see two click events in the console, one with isTrusted:true and another with isTrusted:false attributes

(Using ‘force touch’ to click the button on a trackpad results in only a single click event being emitted, but it also triggers the Safari preview popup.)

Expected behavior

There should only be one click event emitted, with the isTrusted:true attribute.

Would Leaflet be able to safely filter out the click events with isTrusted:false?

Current behavior

In version 1.6 the expected behaviour is observed. In version 1.7.1 Chrome exhibits the expected behaviour, but Safari doesn’t.

The differences between the two events are included below.

MouseEvent 1:

MouseEvent

_simulated: true
composed: false
isTrusted: false
layerX: 15
layerY: 28
offsetX: 15
offsetY: 28
pageX: 410
pageY: 46
screenX: 1390
screenY: 189
timeStamp: 499337
webkitForce: 0
x: 410
y: 38

MouseEvent 2:

MouseEvent

composed: true
isTrusted: true
layerX: 15
layerY: 20
offsetX: 15
offsetY: 20
pageX: 410
pageY: 38
screenX: 1390
screenY: 189
timeStamp: 538265
webkitForce: 1
x: 410
y: 38

_simulated, composed, isTrusted and perhaps webkitForce seem to be the key differences, but it also seems odd that there are different timestamps and Y dimensions between the two events.

Environment

• Leaflet version: 1.7.1
• Browser (with version): Safari 13.1.2
• OS/Platform (with version): OS X 10.13.6 and 10.15.6

Additional context

I noticed this after OpenStreetMap updated to the latest version of Leaflet, where the issue manifests itself by preventing some of the map tools to be used as the first event toggles a tool on and the second toggles it off. Related issue posted at https://github.com/openstreetmap/openstreetmap-website/issues/2811

Minimal example reproducing the issue

Please see https://codepen.io/dankarran/pen/JjXMXzd

[eikes]

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 });

[lysdexic-audio]

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