shouldHijackClicks does not work (when associated with ionic?)

[shprink]

the function:

if (shouldHijackClicks) {
  document.addEventListener('click', function(ev) {
    // Space/enter on a button, and submit events, can send clicks
    var isKeyClick = ev.clientX === 0 && ev.clientY === 0;
    if (isKeyClick || ev.$material) return;

    // Prevent clicks unless they're sent by material
    ev.preventDefault();
    ev.stopPropagation();
  }, true);
}

material/src/core/services/gesture/gesture.js

Line 23 in 6ffc533

if (shouldHijackClicks) {

does not work when using Android or IOS. It easily reproductible using Chrome dev tools. Try Nexus 5 or Iphone 6 and you will see that none of the button, link etc work..

When I comment the above code it works as expected.

Using Angular 1.3.13, Ionic beta14 and Material 8.0.1-rc1

Hope it helps :)

[bradmartin]

#1406 - I opened this issue which someone pointed out the removal of hammerJS and it is most likely causing conflicts with ng-material's implementation and other frameworks/libraries. I don't know much about 'shouldHijackClicks'. @shprink

[jmarsault]

I modified shouldHijackClicks to not stop events from ionic :
if (isKeyClick || ev.$material || ev.isIonicTap) return;

But 8364fb5 seems to cause an other problem with the navigation history of ionic. I'm unable to go back with the back button of the mobile after closing a popover.

[mvidailhet]

Same behavior here. I actually had to do this to make it work :

if (isKeyClick || ev.isIonicTap) return;

Otherwise the click event was fired twice on buttons.

[mattkendall]

This may be an unsupported combination, but I'm using Google Maps inside of an angular material app and I also had to make modifications to the aforementioned if statement in order to get map clicks recognized.

I am not using Ionic on this project.

[rpignolet]

For me 81bcf7f solve the double call issue on Ionic. The ng-click handler is called only once.

Try putting this in your bower.json:

"angular-material": "0.8.3-master-81bcf7f"

I'm using Ionic beta 14.

[bonatoc]

I had to comment the entire if statement as well.

• Ionic 1.0.0-beta.14 (magnesium-mongoose)
• Angular v1.3.15 (locality-filtration)
• angular-material v0.8.3-master-a15347c

81bcf7f is present but does not fix the issue.

@jmarsault - In trying your suggestion, the large md-buttons get clicked only when clicking on the button's text.

Anyone knows what are the implications of removing the statement entirely?

[HriBB]

I have the same problem. None of the suggestions above work. Cannot tap on google map marker on android at all ...

[mattkendall]

@HriBB, you can modify the if statement to look for the property ev.j on the event. I don't know what this property represents (it's coming from minified maps code), but it appears to be unique to map events. That's obviously brittle and sub-optimal, but it does work.

[rlucian]

It appears that with the above suggestions by @mattkendall and the fix proposed initially by @jmarsault the clicks are properly registered.

When the bugs have been moved to the 0.10.0 milestone I've created a fork with the fixes and compiled the angular-material.js and angular-material.css and included them in the /dist/ folder so people that would like to test don't have to go through 'gulp compile'. You can find the fork and the compiled files ready for use here: https://github.com/EvolutionLabs/material/tree/ionic-fix/dist .

I haven't placed a pull request since the fix has not been thoroughly verified, but they are useful to get a good feeling of how Ionic works/looks with angular material until the upstream fixes the issues.

There seem to be some other issues with scrolling certain elements (experienced by me) or back button issues (reported by @jmarsault) so please use with caution. I'd be happy to accept pull requests for other fixes and I plan to keep the repo synced with upstream.

I'm not a very experienced github user yet, so I hope this is a proper approach and it helps...