Null pointer in Draggable.js

in Draggable.js

This line: var first = e.touches ? e.touches[0] : e,

will cause a null pointer here: this._startPoint = new Point(first.clientX, first.clientY);

if e.touches is [] which can happen.

It should probably be changed to: var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e),

as is the case further down in the same class.

I stumbled across this issue since leaflet breaks when dragging if it is in a popout from the flexlayout-react package.

[psimonazzi]

I’m also affected by this issue. e.touches is an empty array and the check fails because it does not take into account javascript ‘truthiness’. Admittedly I’m using Leaflet from a GWT script, inside iframes etc. so this may be a corner case, but I would consider fixing this and making the check more robust anyway. Actually the very same check in the _onMove method already checks empty arrays.

[JonatanRydh]

The event object does have .clientX and .clientY properties. The issue is that it e.touches = [] and therefor truthy, making first undefined in the line var first = e.touches ? e.touches[0] : e, instead of e.

I’ve no idea why e.touches = [] in the case where leaflet is in a secondary window, but it seems to be the case.

I’m not very familiar with the code so I’m not sure if this should be fixed to var first = (e.touches && e.touches.length === 1 ? e.touches[0] : e), or var first = (e.touches && e.touches.length > 0 ? e.touches[0] : e), or something else.

This change together with element.ownerDocument instead of document in a couple of places seems to make leaflet work correctly in the popout window.

I think there are at least two ways to solve the second problem. Either an option could be provided to override which document to use, or alternativly the ownerDocument of the map container for binding events could always be used. The first may be safer to not break backwardcompatibility but the second may fix things automatically in many cases.