Material: <md-button> ng-click fires inconsistently with Ionic Framework/ng-Material latest versions

[bradmartin]

http://codepen.io/anon/pen/MYOeap

The plunker above works fine, I found this on the Ionic Framework forums and it's functional and the click is fired as expected.

However the same code with the latest ionic css/js files along with latest Angular Material via bower install, the click doesn't work as intended. Any reason? I've also installed the #master but the clicks on md-button still don't work very well. It may fire once every 10-20 clicks, and sometimes it fires once every 5 clicks. This is a hangup for me right now on moving forward with a project.

[mikkokam]

Note: ng-click is broken on touch devices and Chrome emulation of such. Chrome desktop is unaffected. The Codepen above: works fine using 0.6.1 or 0.7.0 -- broken on 0.7.1.
I suspect it might be because of the hammer.js change on 0.7.1 - Ionic has a similar built-in version of hammer as well...

[drastick]

I'm having issues with this as well.

[marcysutton]

Can you verify whether this issue still exists in 0.8.0-rc1? Hammer.js was removed in 0.7.1 in favor of $mdGestures, so it's very likely because of that.

[bradmartin]

@marcysutton Yes it still exists.

[stellasoft-will]

this is an issue for me as well @marcysutton

[mikkokam]

http://forum.ionicframework.com/t/is-there-a-tutorial-for-using-ionic-and-angular-material/14662/14

[isaiahaguilera]

I am at a loss with this bug as well. Is there a version that has the autocomplete before hammer was removed?

[bradmartin]

No, autocomplete wasnt implemented until after hammer was removed.
On Feb 24, 2015 7:41 PM, "iaaguilera" [email protected] wrote:

I am at a loss with this bug as well. Is there a version that has the
autocomplete before hammer was removed?

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

[jeffthompson1971]

Is there an ETA for a fix or do I just rip it revert to an older version for the near future?

[bradmartin]

@jeffthompson1971 - @ThomasBurleson added it to the 0.9.0 milestone over a week ago, so just keep checking for updates.

[jeffthompson1971]

Anyone? is this going to be fixed? I need to know what the plan is? do i need to drop angular-material and move to something where clicks work on mobile devices?

[bradmartin]

Its on the 0.9.0 milestone so they're planning on it but no official word
yet.
On Feb 28, 2015 1:53 PM, "Jeff Thompson" [email protected] wrote:

Anyone? is this going to be fixed? I need to know what the plan is? do i
need to drop angular-material and move to something where clicks work on
mobile devices?

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

[ThomasBurleson]

@ajoslin - Can you help us investigate and resolve this issue ?

[hiennguyenle]

tested in 0.8.3 and it s working now ! Thanks !

[drastick]

This is still happening for me in 0.8.3

[bradmartin]

@nglehien it's not working with v0.8.3-master-c9aae9b . What is your configuration? Did you test it on the mobile emulator or a device? From my testing it will work fine in a standard web browser but on mobile emulators and devices it does not function normally.

[jedihacks]

Any updates? The latest here was 10 days ago. This seems like a critical bug to me :)

[bradmartin]

I haven't tested it but someone on the Ionic forums said using the rawgit refs it's working. Can anyone confirm this? http://forum.ionicframework.com/t/is-there-a-tutorial-for-using-ionic-and-angular-material/14662/20?u=bradmartin

I'll try to test it later today.

[rlucian]

@bradmartin it was me. and it used to work, but not anymore. that's a risk when using rawgit I guess, code keeps changing (or I jumped too fast to the conclusion).

However, as @mikkokam noted up in the thread, we now have it working and quite stable on 0.7.0. It has some minor drawbacks, but we will stay on it until it (hopefully) gets fixed in 0.9.0

We had some issues at first with the app showing only a blank screen after the splashscreen when running it on an Android device, but it seems my team figured it out last night, so if you go this way and run into the same issue let me know and I'll post more details.

[bradmartin]

Yea im stuck on 0.7.0 also. I have a slight issue after the splash screen
but its not a blank screen, the actual app page flashes, then the login
page appears. I have the ionic.platformready() configured correctly as it
worked prior to using ng-material so if you want to share what youve done
it might be similar. Thanks.
On Mar 18, 2015 3:26 AM, "radu" [email protected] wrote:

@bradmartin https://github.com/bradmartin it was me. and it used to
work, but not anymore. that's a risk when using rawgit I guess, code keeps
changing (or I jumped too fast to the conclusion).
However, as @mikkokam https://github.com/mikkokam noted up in the
thread, we now have it working and quite stable on 0.7.0. It has some minor
drawbacks, but we will stay on it until it (hopefully) gets fixed in 0.9.0
We had some issues at first with the app showing only a blank screen after
the splashscreen when running it on an Android device, but it seems my team
figured it out last night, so if you go this way and run into the same
issue let me know and I'll post more details.

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

[rlucian]

@bradmartin for us it was a trivial issue, we were including the libraries by using //cdn/ url refferals, once we used web normalized 'http://cdn" addressing it was all ok.
Are you using a call to a modal for the login, or a controller? It may not be directly related to material, or just expected behavior.

[bradmartin]

The current master has improved the use of ng-click events within the Chrome mobile emulator (don't have a charged device right now to test).

   <section layout="row" layout-align="center center">
                    <md-button nav-clear flex ng-click="Login()" class="md-raised md-primary">Login</md-button>
                </section>
                <br />
                <br />
                <br />
                <p flex layout="row" layout-align="center center">
                    Don't have an account?
                </p>
                <section layout="row" layout-align="center center">
                    <md-button class="primary" flex md-no-ink href="#/register">Sign Up</md-button>
                </section>
                <br />
                <br />
                <br />
                <div layout="row" layout-align="center center">
                    <md-button flex md-no-ink href="#/forgotpassword">Forgot password?</md-button>
                </div>

In the markup above, the LOGIN button is working fine, just not the with as anchors.

[stellasoft-will]

any more information on this?

[bradmartin]

If you search through the issues you will see a few other related issues to gestures and events. I think they are all planned for the 0.9.0 release.

[bradmartin]

Just tried out the master version : v0.8.3-master-1cd1d69

fires click events properly, however not when used with href property.

In the snippet below the Login works, the SIGN UP and Forgot Password do not. Was the href property dropped from support on ? I think in the demos in previous versions this was acceptable but I could be mistaken.

    <ion-view title="" hide-nav-bar="true">
        <ion-content>
                <form name="loginform" layout="row" layout-sm="column" novalidate>
                    <md-input-container flex>
                        <label>Username or Email</label>
                        <input ng-model="user.username" type="text">
                    </md-input-container>
                    <md-input-container flex>
                        <label>Password</label>
                        <input ng-model="user.password" type="password">
                    </md-input-container>
                </form>
                <section layout="row" layout-align="center center">
                    <md-button nav-clear flex ng-click="Login()" class="md-raised md-primary">Login</md-button>
                </section>
                <p flex layout="row" layout-align="center center">
                    Don't have an account?
                </p>
                <section layout="row" layout-align="center center">
                    <md-button class="primary" flex md-no-ink href="#/register">Sign Up</md-button>
                </section>
                <div layout="row" layout-align="center center">
                    <md-button flex md-no-ink href="#/forgotpassword">Forgot password?</md-button>
                </div>
            </md-content>
        </ion-content>
    </ion-view>

[ThomasBurleson]

For Ionic-Angular Material mobile solutions that using jQuery, you can now disable Material click hijacking by using $mdGestureProvider in

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

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

[bradmartin]

Works perfectly for my case. Thanks!

[sebmaniac]

I tried using this and my Ionic Cordova App fails because Angular is throwing me an error:

Uncaught ReferenceError: jQuery is not defined 

I had to do some code changes to make it work without an error.

Before:

    var self = {
      handler: addHandler,
      register: register,
      // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?
      isHijackingClicks: (isIos || isAndroid) && !JQuery && !forceSkipClickHijack
    };

After:

var hasJQuery =  typeof jQuery !== 'undefined' && angular.element === jQuery;

    var self = {
      handler: addHandler,
      register: register,
      // On mobile w/out jQuery, we normally intercept clicks. Should we skip that?
      isHijackingClicks: (isIos || isAndroid) && !hasJQuery && !forceSkipClickHijack
    };

[ThomasBurleson]

@sebmaniac - great catch. This should be improved with the commit SHA https://github.com/angular/material/commit/a22f6817fb6e89f7004d91bc8ba895b860ea8578

[ashishtilara]

thank you @ThomasBurleson,

$mdGestureProvider.skipClickHijack(); trick works perfectly for me

[yxh10]

@ThomasBurleson FYI, this is happening again to Material v1.0.0 onwards.
However, the solution
$mdGestureProvider.skipClickHijack();

works nicely.

[ikhsanputra07]

@ThomasBurleson thanks for your solution. it Works perfectly. Great

[ilkayhan]

" $mdGestureProvider.skipClickHijack(); " Where to write it? @ThomasBurleson ,

[thomcom]

@ilkayhan first import angular-material to get $mdGestureProvider, then do it in app.config.

[daweedm]

Could there be a similar issue with the blur event firing when it is not necessary ? (Using along ionic-v1)

[ThomasBurleson]

@ilkayhan - try

myAppModule.config(function($mdGestureProvider) {
    $mdGestureProvider.skipClickHijack();
});

[atoami]

@ThomasBurleson How can I use this code in Ionic 2?

[Splaktar]

@jonathan68 you are using AngularJS Material with Ionic 2 or Angular Material with Ionic 2? For Angular Material, you can ask questions in their forums.

[sas1018]

@ThomasBurleson can you say more about where

myAppModule.config(function($mdGestureProvider) { $mdGestureProvider.skipClickHijack(); });

goes? I tried it in my main.js file but that didn't seem to work, do I need to import angular-material like @thomcom said?

[Splaktar]

@sas1018 what exactly happened when you say "didn't seem to work"? The relevant docs can be found here: https://material.angularjs.org/latest/api/service/$mdGestureProvider