'data-tap-disabled' requires stop parameter (google maps infowindow fix)

[irfaan]

Problem: 'data-tap-disabled' prevents ng-click inside a google maps infowindow from firing, but is required to allow clicks on google maps markers (which opens the infowindow).

The problem presents on mobile only.

Details: 'data-tap-disabled' - the directive that disables ionic's custom tap system - is used with a google map to allow click events on markers to be registered (see #1137 (comment) and http://forum.ionicframework.com/t/google-maps-markers-cant-be-clicked-on-device/3835).

However, on mobile only, it appears to be preventing ng-clicks from firing inside a resulting infowindow (which appear inside the map container when opened). I tested by programmatically opening an infowindow without 'data-tap-disabled' on the map container, and ng-click inside the infowindow fired correctly (but markers cannot be clicked to open an infowindow). With "data-tap-disabled='true'", it fails.

As 'data-tap-disabled' applies to the element to which it is attached and all of its children (see http://ionicframework.com/docs/api/page/tap/), I tried using "data-tap-disabled='false'" on a child element to stop its application to any further children to no avail.

I would love to go ahead and make a proposed change to the directive myself if I have some direction.

Thanks!

Also see http://forum.ionicframework.com/t/google-maps-markers-cant-be-clicked-on-device/3835/7?u=irfaan

[perrygovier]

Thanks, can you provide an example in codepen so we have something to test against?

[irfaan]

Turns out that I was not using "scroll='false'" on the enclosing 'ion-content'. That fixed things, but meant that I could no longer scroll.

We can probably close this issue, but I would be grateful for some direction regarding how to continue to scroll the content while using the [data-tap-disabled + scroll=false] fix. See this codepen [http://codepen.io/anon/pen/Bpnsy] where I have tried to use nested ion-content tags to both have my cake and eat it too. This works on chrome but not on mobile.

Any thoughts?

[perrygovier]

I'm going to bring in the big guns on this one. Adam, what do you think?

[antonshevchenko]

I had the same problem. I have a map that takes up half the device's height and a list in the bottom half. Adding a separate ion-scroll does not get affected by the ion-content's scroll="false".

[adamdbradley]

Also, be sure to use this code so the content of the infowindow is compiled:

var contentString = "<div id='content'>infowindow - <div ng-click='clickTest()'>click me. do i fire?</div>";
var compiled = $compile(contentString)($scope);

var infowindow = new google.maps.InfoWindow({
  content: compiled[0]
});

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.