Material: 7.1 - 8.3 Touch events not firing ng-click on Android/IOS hybrid apps/mobile browsers

Created on 8 Mar 2015 · 25Comments · Source: angular/material

I have a hybrid app that is Ionic and Material. Performance was acceptable on on all versions of Material Angular below 8.0. 8.0 - 8.3 on the Ripple emulator works perfect but as soon as I deploy to a device the application is such a slug that it is completely unusable. I am not seeing any errors in visual studio.

This is my environment:
Material Angular 8.0 - 8.3
Ionic bundle: Ionic, v1.0.0-beta.14, angular 1.3.6
Visual Studio 2013 Community Edition w/ Cordova
Moto X 2013 Android 4.4.4

Any help would be greatly appreciated!

--Update 1--
I have discovered more information related to the issue. It looks like I was slightly incorrect in my op about a couple things...

The issue is not necessarily that the app becomes slow as it is more of that the touch input is not registering very well. I have to tap many many times on any buttons or links that use ng-click to get them to finally register. It literally has to be very fast and repeated taps to get the click event to fire.
It is not 8.0 and above, it is 7.1 and above. Basically the versions since hammer.js was removed.
In addition to the android 4.4.4 device I have tried on another with 5.0.1 and it has the exact same issue.

--Update 2--
It is a conflict with the Ionic framework that started at version 7.1 of Angular Material. If you remove Ionic from your project the ng-click will work again

--Update 3--
I have confirmed this same issue happens not just in android apps but on android and IOS mobile websites as well. I have hosted a test site with material 8.3 here http://www.louspubcrawl.com/

bug conflict gestures

Source

atentis

Most helpful comment

For mobile solutions that are also using jQuery, you can now use $mdGestureProvider in

   app = angular.module('MyApp', ['ngMaterial'])
      .config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
      });

This will configure $mdGesture to not intercept clicks (stop propagation and prevent defaults).

ThomasBurleson on 13 Apr 2015

👍10 ❤3

All 25 comments

You should probably post some reproducible code.

gustavohenke on 8 Mar 2015

@gustavohenke Do you have any suggestions on how I could do that? I do not have the issue in the web based ripple emulator which makes me believe if I build out my entire project into a plunker that I would have not have the issue there either. It seems as if it only happens when deployed to a device. Here is my index.html

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
    <link href="Content/ionic.css" rel="stylesheet"/>
    <link href="Content/angular-material.css" rel="stylesheet"/>
    <link href="Content/index.css" rel="stylesheet" />
</head>
<body ng-app="mgmtAppModule">
    <ion-nav-view name="loginContent"></ion-nav-view>
    <ion-nav-view></ion-nav-view>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/platformOverrides.js"></script>
    <script src="scripts/index.js"></script>
    <script src="external/ionic.bundle.js"></script>
    <script src="external/angular-aria.js"></script>
    <script src="external/angular-resource.js"></script>
    <script src="external/angular-material.js"></script>
    <script src="external/angular-cookies.js"></script>
    //angular scripts for app...
      ....

atentis on 8 Mar 2015

I have discovered more information related to the issue. It looks like I was slightly incorrect in my op about a few things...

The issue is not necessarily that the app becomes sluggish as it is more of that the touch input is not registering very well. I have to tap many many times on any buttons or links that use ng-click to get them to register. It literally has to be very fast and repeated taps to get the click event to fire.
It is not 8.0 and above, it is 7.1 and above. Basically the versions since hammer.js was removed.
In addition to the android 4.4.4 device I have tried on another with 5.0.1 and it has the exact same issue.

atentis on 9 Mar 2015

I have created a brand new Cordova Visual Studio project with only Angular Material, Ionc and their dependencies.
If you include any version of Ionc with Angular Material 7.1 and up the Angular ng-clicks will not work on an Android app.

Regular html buttons will not work with the ng-click at all and the material buttons will only work after many repeated presses. As soon as you remove Ionic OR downgrade to Material Angular 7.0 + Hammer.js the ng-clicks will work perfectly.

<button type="button" data-ng-click="btnClick()">Click Me</button>
<md-button class="md-raised gray-bg-btn" data-ng-click="btnClick()">Click Me</md-button>

var app = angular.module('app', ['ionic', 'ngMaterial']);
app.controller('ctrl', [ '$scope', function($scope) {
        $scope.btnClick = function() {
            alert("Button Clicked");
        }
    }
]);

atentis on 9 Mar 2015

Ok so I have found the issue is larger than just android hybrid apps. I have confirmed the issue happens even on a mobile website with IOS (Safari/Chrome) and Android (Chrome).
Here is a test site to pull up on a mobile device to show it not working http://www.louspubcrawl.com/

You can see the bottom material button will still respond but not consistently. The experience is even even worse on my cordova app.

atentis on 10 Mar 2015

yep i am aware of that, the trick is to only integrate the ionic css when trying to work with both framework

thaiat on 12 Mar 2015

@thaiat but then you cannot use the ion views, etc

atentis on 12 Mar 2015

Is this related to the issue with hammer.js being removed as speculated in this issue: https://github.com/angular/material/issues/1406 ?

bradmartin on 13 Mar 2015

Nothing yet? Is there some palliative solution?

thiagoaos on 13 Mar 2015

@thiagoaos Guessing not until 9.0 is ready. I am dead in the water too

atentis on 24 Mar 2015

As a palliative, for now you can use

data-tap-disabled="true"

on each angular material directive that is not playing nice with the Ionic Framework, like the selects and the tabs. Something like

<md-select placeholder="Pick" ng-model="vpos.currency" flex data-tap-disabled="true">
     <md-option value="1" data-tap-disabled="true">One</md-option>
     <md-option value="2" data-tap-disabled="true">Two</md-option>
</md-select>

DMDc0de on 27 Mar 2015

This works, but also disables scrolling. So on mobile its not a good
solution at all unfortunately.

Brad Martin
On Mar 27, 2015 10:29 AM, "Daniele De Matteo" [email protected]
wrote:

As a palliative, for now you can use

data-tap-disabled="true"

on each angular material directive that is not playing nice with the Ionic
Framework, like the selects and the tabs. Something like

One
Two

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/1826#issuecomment-86974671.

bradmartin on 27 Mar 2015

In which directive do you find scrolling is not working? For the md-select scrolling is working both on android and ios (for me at least). Do you want me to provide some code?

DMDc0de on 27 Mar 2015

Scrolling will work, but if you attempt scrolling while tapping/holding an
element with the data-tap-disabled attribute then you cannot scroll. This
was the case when the original issue
https://github.com/angular/material/issues/1406 was opened on Feb. 5th. So
maybe the data-tap-disabled has been improved to handle scrolling but from
my testing you cannot begin scrolling if you are holding an element with
data-tap-disabled="true" set.

On Fri, Mar 27, 2015 at 10:50 AM, Daniele De Matteo <
[email protected]> wrote:

In which directive do you find scrolling is not working? For the md-select
scrolling is working both on android and ios (for me at least). Do you want
me to provide some code?

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/1826#issuecomment-86982258.

bradmartin on 27 Mar 2015

I think this issue can be merged with #1406 and #1528. @marcysutton @ajoslin @ThomasBurleson

bradmartin on 27 Mar 2015

Is this still planned for 0.9.0 ?

wrousseau on 29 Mar 2015

I too would like to know if this is planned for 0.9.0

drastick on 31 Mar 2015

commit https://github.com/angular/material/commit/7b780712a5f05ded9dfe0047c0cbf0f6ddcb6405 seems to be related to this bug and several other related bugs.
could someone check and confirm?

rlucian on 2 Apr 2015

Using the rawgit references, and on Ionic, still broken.

CR88 on 2 Apr 2015

@drastick - we are working on these gesture issues; targeted for the upcoming 0.9 release.

ThomasBurleson on 2 Apr 2015

also having this problem

badger27 on 10 Apr 2015

But it only happens after I build to a device. Tried all the above with no results.

badger27 on 10 Apr 2015

For mobile solutions that are also using jQuery, you can now use $mdGestureProvider in

   app = angular.module('MyApp', ['ngMaterial'])
      .config(function( $mdGestureProvider ) {
          $mdGestureProvider.skipClickHijack();
      });

This will configure $mdGesture to not intercept clicks (stop propagation and prevent defaults).

ThomasBurleson on 13 Apr 2015

👍10 ❤3

Thanks a lot for the above fix. It solved a huge issue which was causing a major headache for me.
Angular Google Maps Directive Autosuggest stopped working since the touch wasn't reaching to the item in the list of suggested items. Finally this solved it.

debarko on 4 Aug 2016

Hi all, button events are not triggered in cordova ios mobile app,
i have tried all of the options mentioned above.
& deviceready event in cordova also not firing.
Plz let me know if any suggestions.