Leaflet Draw preventing click on elements while is active - leaflet

Question

I have several days fighting this with no luck. I'm using leaflet 1.4.0 along with leaflet.draw 1.0.4. Instead of using the L.control.draw UI, I'm using my own buttons to create polygons and rectangles. It works perfectly on desktop browsers (except IE, of course), but fails on iPads, Android tablets (I've not checked on phones), even if you switch the latest Chrome to emulate a mobile device (using the 'toogle device toolbar' on the dev tools) it fails.
I have created this jsfiddle to illustrate the problem: https://jsfiddle.net/fsv8jegd/2/
Using Chrome with the 'toggle device' off, 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.
Any ideas?
Thanks!
html:
<div id="map"> </div>
<button class='buttons' type="button" style="top:0" onclick="startpoly()">START POLY</button>
<button class='buttons' type="button" style="top:20px" onclick="cancelpoly()">CANCEL</button>
css:
#map { height: 200px !important; width: 80%; }
.buttons {position: absolute; left: 0; z-index: 999999}
JS:
polygon_query_options = { shapeOptions: { stroke: true, color: '#6e83f0', weight: 4, opacity: 0.9, fill: true, fillColor: null, fillOpacity: 0.2, clickable: false, dashArray: '10,10' } };
$(document).ready(function() {
map = L.map('map', { preferCanvas: true, zoomControl: true, zoom: 10, maxZoom: 20, center: [29.8, -95.5]});
var drawnItems = new L.FeatureGroup();
drawnItems.addTo(map);
drawnItems.bringToFront();
L.Browser.touch = true;
var baseMapGroup = new L.featureGroup();
basemapLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20 });
basemapLabelLayer = L.tileLayer('https://cartodb-basemaps-d.global.ssl.fastly.net/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', { attribution: 'CartoDB', maxZoom: 20, maxNativeZoom: 20 });
basemapLabelLayer.addTo(map);
basemapLabelLayer.bringToBack();
basemapLayer.addTo(map);
basemapLayer.bringToBack();
map.on('draw:created', function (e) {
var layer = e.layer;
drawnItems.addLayer(layer);
});
});
function startpoly() {
polygonDrawer = new L.Draw.Rectangle(map, polygon_query_options);
polygonDrawer.enable();
};
function cancelpoly() {
if (polygonDrawer != undefined) { polygonDrawer.disable(); }
};

Answer 1

I found this is a bug on the leaflet.draw library. So I followed the trail, and in the line 1260 of the leaflet.draw 1.0.4 the following code causes the problem:
document.addEventListener('touchstart', L.DomEvent.preventDefault, { passive: false });
I replaced that line with this code:
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.
Hope this helps anyone out there.