Click not triggering on DOM elements when in draw mode on mobile browsers

[berniesf]

• [X ] I'm reporting a bug, not asking for help
• [ X] I've looked at the documentation to make sure the behaviour is documented and expected
• [ X] I'm sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• [ X] I've searched through the issues to make sure it's not yet reported

How to reproduce

• Leaflet version I'm using: 1.4.0
• Leaflet Draw version I'm using: 1.0.4
• Browser (with version) I'm using: Chrome 73.0.3683 64bit / iPad Safari OS 12
• OS/Platform (with version) I'm using: Win10
• (using the provided jsfiddle) Chrome with the 'toggle device' off (on dev tools), click on the 'start poly' button. Cursor changes to a cross and a label 'click and drag to draw rectangle'. Click on the 'cancel' button, the cursor goes back to the regular arrow. Now turn on 'toggle device' on Chrome dev tools and choose 'responsive' or any of the 'iPhone' or 'iPads'. Click on the 'start poly' button. Cursor changes to the cross. Try to click on the 'cancel' button. Nothing happens. It doesn't receive the click event. The only way to cancel this is actually drawing the rectangle. This works perfectly on desktop Chrome when is not in mobile device emulation mode, also on Edge, Firefox. Fails on iPads (iPad Air 2) and Android tablets (Samsung SM-T580).

What behaviour I'm expecting and which behaviour I'm seeing

Minimal example reproducing the issue

• [X] this example is as simple as possible
• [X] this example does not rely on any third party code

I created a jsfiddle and a StackOverflow question:

https://jsfiddle.net/fsv8jegd/2/

https://stackoverflow.com/questions/56030563/leaflet-draw-preventing-click-on-elements-while-is-active

[berniesf]

I found a solution. The line 1260 of the leaflet.draw 1.0.4 contains the following code:

document.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });

I replaced that line with

var tempMap = document.getElementById("map"); tempMap.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });

Basically instead of preventing the touchstart event on the document, now is applied only to the map object.

[johnd0e]

Duplicate #922 Another fix: #930

[johnd0e]

Original issue is not reproduced anymore with new Leaflet 1.6. (Perhaps fixed by https://github.com/Leaflet/Leaflet/pull/6694)