Unable to cancel Rectangle and Circle drawing in Chrome w/Touch

• I’m reporting a bug, not asking for help
• I’ve looked at the documentation to make sure the behaviour is documented and expected
• 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…)
• I’ve searched through the issues to make sure it’s not yet reported

---

How to reproduce

• Leaflet version I’m using: 1.4
• Leaflet Draw version I’m using: 1.0.4
• Browser (with version) I’m using: Chrome Version 73.0.3683.103
• OS/Platform (with version) I’m using: Windows 10 32-bit

Actually I suffer from this issue on android, but it’s easy to reproduce it on Chrome on desktop.

1. Open Chrome DevTools <kbd>Ctrl-Shift-I</kbd> and enter mobile mode <kbd>Ctrl-Shift-M</kbd>
2. Press Rectangle creating button.

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

It’s now impossible to exit drawing mode, because neither toolbar nor tooltip are clickable. We can exit only finishing rectangle. There are also issues with multiple taps. Circle has the same issue

I found another mobile-related issue here: #789

Minimal example reproducing the issue

Official sample is enough: https://leaflet.github.io/Leaflet.draw/docs/examples/full.html

[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.

[iisri-vu]

This problem still existed with Leaflet 1.7.1. We can not press the cancel button when drawing a circle. But we can press the cancel button when drawing a polygon when using mobile android.