Tap click component on #document error when tapping on Cordova Google Map

[jgw96]

From @loicfavory on December 20, 2016 14:0

Ionic version: (check one with "x")
[ ] 1.x
[ X ] 2.x

I'm submitting a ... (check one with "x")
[ X ] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Since I updated to 2.0.0-rc4 I have a bug with Cordova Google Maps.
If I tap on the map, it cause an error on tap-click component in ionic-angular :

In file node_modules/ionic-angular/components/tap-click/tap-click.js
"ele.hasAttribute is not a function", line 203:

export var isActivatable = function (ele) {
    if (ACTIVATABLE_ELEMENTS.indexOf(ele.tagName) > -1) {
        return true;
    }
    for (var i = 0, l = ACTIVATABLE_ATTRIBUTES.length; i < l; i++) {
        if (ele.hasAttribute(ACTIVATABLE_ATTRIBUTES[i])) {
            return true;
        }
    }
    return false;
};

Expected behavior:
Map should be tappable without error. Worked fine with 2.0.0-rc3

Steps to reproduce:
Install cordova-google-map plugin
tap on the map

Related code:

Seems, that when I tap on the map, in fact I tap on #document, #document has no hasAttribute function.
I can correct the bug, by testing the type of the function:

export var isActivatable = function (ele) {
    if (ACTIVATABLE_ELEMENTS.indexOf(ele.tagName) > -1) {
        return true;
    }
    for (var i = 0, l = ACTIVATABLE_ATTRIBUTES.length; i < l; i++) {
        if (typeof ele.hasAttribute == "function" && ele.hasAttribute(ACTIVATABLE_ATTRIBUTES[i])) {
            return true;
        }
    }
    return false;
};

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47-201612152207
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Linux 4.8
Node Version: v7.0.0
Xcode version: Not installed

Copied from original issue: ionic-team/ionic-framework#9726

[loicfavory]

My first patch was not working as expected. It was blocking the map draging.
It's working if tapping on #document always return true:

export var isActivatable = function (ele) {
    if (ACTIVATABLE_ELEMENTS.indexOf(ele.tagName) > -1 || ele == document) {
        return true;
    }
    for (var i = 0, l = ACTIVATABLE_ATTRIBUTES.length; i < l; i++) {
        if (ele.hasAttribute(ACTIVATABLE_ATTRIBUTES[i])) {
            return true;
        }
    }
    return false;
};

I didn't test on iOs

[amuramoto]

@loicfavory Does the stack trace from the error indicate which function in the ionic native google maps plugin is causing the error? It looks like just an issue of the wrong element reference being passed down somewhere.

[loicfavory]

@amuramoto There is the stack trace:

tap-click.js:203 Uncaught TypeError: ele.hasAttribute is not a function
isActivatable @ tap-click.js:203
getActivatableTarget @ tap-click.js:189
TapClick.click @ tap-click.js:101
BaseClass.self.trigger @ googlemaps-cdv-plugin.js:55
App._onMapEvent @ googlemaps-cdv-plugin.js:274
(anonymous function) @ VM368:1

Google Map Cordova is installed from the git repo:

    {
      "locator": "https://github.com/mapsplugin/cordova-plugin-googlemaps",
      "id": "cordova-plugin-googlemaps",
      "variables": {
        "API_KEY_FOR_ANDROID": "***",
        "API_KEY_FOR_IOS": "***"
      }
    }

[loicfavory]

It seems that the issue only occur when I'm using livereload

[ihadeed]

Doesn't seem like an Ionic Native issue.

[heddanas]

Hello everyone,

As I mention here (ionic-team/ionic-framework#9942 (comment)), the reason behind this issue :

If you want to show your HTML above the map, such as a sidebar, you need to use map.setClickable( false ) before showing it. (otherwise the click will be passed to the map). You don't need to use this, when your content is inside of the map_canvas div, only when outside of it)

Because the plugin watches ONLY elements inside of the map_canvas div, not others. That's why you need to call map.setClickable( false ) to be clickable (eg. sidebar), then call map.setClickable( true ) after closing.

from https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Map#mapsetclickable

Can anyone confirm please :) ?

Anas HEDDOUN
Web Developer, UI/UX Designer & SEO Consultant

[heddanas]

@camaam thanks for your reply