Mapbox-gl-js: Tap on mobile in Framework7 throws "Cannot read property 'x' of null" because startPos only defined in onMouseDown

[neekfenwick]

Reproducible case: https://codepen.io/neekfenwick/pen/dVaZEd
__MapBoxGL version v0.41.0 from CDN__

Steps:
1/ open above URL __on mobile device or similar with touch support__ e.g. Chrome on Android
2/ connect dev tools
3/ tap on the map

Expected result: Nothing much.
Actual result: Uncaught TypeError: Cannot read property 'x' of null

See attached screenshot.

It looks like the tap fires through onClick, which is bound to the 'click' event (bind_handlers.js line 40) but onClick tries to use startPos local variable:

`function onClick(e            ) {
    const pos = DOM.mousePos(el, e);

    if (pos.equals((startPos     ))) {
        fireMouseEvent('click', e);
    }
}`

Unfortunately, startPos is only defined in onMouseDown:

startPos = DOM.mousePos(el, e);

Is this a bug or am I missing something?

[neekfenwick]

I think wrapping my example in a Framework7 app caused the problems.

I had the idea that Framework7 might be doing something nasty with the event handlers, so I edited my Codepen to remove framework7.

I've ended up with two codepens, only the framework7 one triggers the error:

Framework7 based example with the error: https://codepen.io/neekfenwick/pen/dVaZEd

Plain non-framework7 example: https://codepen.io/neekfenwick/pen/VMRLqv

The original line of code triggering the exception was in mapbox/point-geometry/index.js:

equals: function(other) {
        return this.x === other.x &&
               this.y === other.y;
    },

called from onClick in my original screenshot in onClick.

Since this seems to be specific to framework7, I will post in their forum, but leave this here as a record of mapboxgl experience, even if it turns out to be fixed by something to do with framework7. See http://forum.framework7.io/#!/bugs-and-issues:mapboxgl-in-framework7-caus

FYI I will be on a trip from Sat 21 until Thurs 26 and unlikely to reply.

[jfirebaugh]

Hi @neekfenwick -- unfortunately, we're unable to debug interactions with 3rd party frameworks. If you can provide a minimal self-contained example that points to this being a bug with Mapbox GL JS, we can take a look.

[neekfenwick]

Understood @jfirebaugh thank you. The framework7 forum turned up a solution, to add no-fastclick class to the map (or an element that contains it). re: https://framework7.io/docs/fast-clicks.html

[mgd722]

Thanks for leaving this up, @neekfenwick! You've just ended a very frustrating hours-long search.

[bdirito]

A similar thing happens in angular.js / ionic[1]. To fix add the data-tap-disabled="true" attribute to your element