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

atentis · 2015-03-07T23:50:12Z

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/

gustavohenke · 2015-03-08T02:53:41Z

You should probably post some reproducible code.

atentis · 2015-03-08T20:33:14Z

@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 · 2015-03-09T01:57:57Z

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 · 2015-03-09T05:12:34Z

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 · 2015-03-09T23:55:40Z

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.

thaiat · 2015-03-12T09:47:04Z

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

atentis · 2015-03-12T22:50:31Z

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

bradmartin · 2015-03-13T02:47:02Z

Is this related to the issue with hammer.js being removed as speculated in this issue: #1406 ?

taos-thiagoaos · 2015-03-13T12:48:18Z

Nothing yet? Is there some palliative solution?

atentis · 2015-03-24T17:36:46Z

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

DMDc0de · 2015-03-27T15:28:39Z

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>

bradmartin · 2015-03-27T15:46:12Z

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" notifications@github.com
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
#1826 (comment).

DMDc0de · 2015-03-27T15:49:53Z

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?

bradmartin · 2015-03-27T16:07:47Z

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
#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 <
notifications@github.com> 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
#1826 (comment).

bradmartin · 2015-03-27T16:10:17Z

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

wrousseau · 2015-03-29T16:48:17Z

Is this still planned for 0.9.0 ?

drastick · 2015-03-31T13:08:41Z

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

rlucian · 2015-04-02T15:14:08Z

commit 7b78071 seems to be related to this bug and several other related bugs.
could someone check and confirm?

CR88 · 2015-04-02T20:45:12Z

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

ThomasBurleson · 2015-04-02T21:17:13Z

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

badger27 · 2015-04-10T13:17:49Z

also having this problem

badger27 · 2015-04-10T13:19:32Z

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

ThomasBurleson · 2015-04-13T17:45:35Z

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).

debarko · 2016-08-04T17:09:39Z

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.

vasuvuggu · 2017-02-10T09:58:53Z

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.

atentis changed the title ~~8.x is very with an Android device using Cordova~~ 8.x is performace poor with an Android device using Cordova Mar 7, 2015

atentis changed the title ~~8.x is performace poor with an Android device using Cordova~~ 8.x performace poor with an Android device using Cordova Mar 7, 2015

atentis changed the title ~~8.x performace poor with an Android device using Cordova~~ 8.x Performace poor with an Android device using Cordova Mar 7, 2015

atentis changed the title ~~8.x Performace poor with an Android device using Cordova~~ 7.1 - 8.3 Touch events not firing ng-click on Android device using Cordova Mar 9, 2015

atentis mentioned this issue Mar 9, 2015

toggle side nav closing is not working in ionic framework build in android #1841

Closed

atentis changed the title ~~7.1 - 8.3 Touch events not firing ng-click on Android device using Cordova~~ 7.1 - 8.3 Touch events not firing ng-click on Android/IOS hybrid apps/mobile browsers Mar 10, 2015

ThomasBurleson added the type: gestures label Mar 10, 2015

ThomasBurleson added this to the 0.9.0 milestone Mar 10, 2015

ThomasBurleson assigned rschmukler Mar 10, 2015

ackushiw mentioned this issue Mar 12, 2015

angular-material config mcfly-io/generator-mcfly#77

Closed

marcysutton mentioned this issue Mar 18, 2015

Link doesn't work on Mobile both iOs and Android #1948

Closed

rschmukler added the needs: team discussion This issue requires a decision from the team before moving forward. label Mar 25, 2015

robertmesserle assigned ajoslin and unassigned rschmukler Mar 25, 2015

robertmesserle added type: bug type: conflict and removed needs: team discussion This issue requires a decision from the team before moving forward. labels Mar 25, 2015

rlucian referenced this issue in EvolutionLabs/material Mar 27, 2015

fixed google maps landmark click to open not working

2a9c7f8

ngraef mentioned this issue Mar 30, 2015

md-checkbox breaks on mobile with Ionic #2085

Closed

ThomasBurleson closed this as completed Apr 13, 2015

ThomasBurleson mentioned this issue Jul 7, 2015

Click event trigger two times #3616

Closed

tbrennanw0rk mentioned this issue Dec 2, 2015

iOS + Safari touch events plotly/plotly.js#25

Closed

ThomasBurleson unassigned ajoslin Feb 24, 2016

WillsB3 mentioned this issue Apr 30, 2018

gesture: prevent firing double mousedown events #10898

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

atentis commented Mar 7, 2015

gustavohenke commented Mar 8, 2015

atentis commented Mar 8, 2015

atentis commented Mar 9, 2015

atentis commented Mar 9, 2015

atentis commented Mar 9, 2015

thaiat commented Mar 12, 2015

atentis commented Mar 12, 2015

bradmartin commented Mar 13, 2015

taos-thiagoaos commented Mar 13, 2015

atentis commented Mar 24, 2015

DMDc0de commented Mar 27, 2015

bradmartin commented Mar 27, 2015

DMDc0de commented Mar 27, 2015

bradmartin commented Mar 27, 2015

bradmartin commented Mar 27, 2015

wrousseau commented Mar 29, 2015

drastick commented Mar 31, 2015

rlucian commented Apr 2, 2015

CR88 commented Apr 2, 2015

ThomasBurleson commented Apr 2, 2015

badger27 commented Apr 10, 2015

badger27 commented Apr 10, 2015

ThomasBurleson commented Apr 13, 2015

debarko commented Aug 4, 2016

vasuvuggu commented Feb 10, 2017

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

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

Comments

atentis commented Mar 7, 2015

gustavohenke commented Mar 8, 2015

atentis commented Mar 8, 2015

atentis commented Mar 9, 2015

atentis commented Mar 9, 2015

atentis commented Mar 9, 2015

thaiat commented Mar 12, 2015

atentis commented Mar 12, 2015

bradmartin commented Mar 13, 2015

taos-thiagoaos commented Mar 13, 2015

atentis commented Mar 24, 2015

DMDc0de commented Mar 27, 2015

bradmartin commented Mar 27, 2015

DMDc0de commented Mar 27, 2015

bradmartin commented Mar 27, 2015

bradmartin commented Mar 27, 2015

wrousseau commented Mar 29, 2015

drastick commented Mar 31, 2015

rlucian commented Apr 2, 2015

CR88 commented Apr 2, 2015

ThomasBurleson commented Apr 2, 2015

badger27 commented Apr 10, 2015

badger27 commented Apr 10, 2015

ThomasBurleson commented Apr 13, 2015

debarko commented Aug 4, 2016

vasuvuggu commented Feb 10, 2017