You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
shouldHijackClicks does not work (when associated with ionic?) #1528
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);
}
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
#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
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.
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.
@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.
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...
Activity
bradmartin commentedon Feb 16, 2015
#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 commentedon Feb 17, 2015
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 commentedon Feb 18, 2015
Same behavior here. I actually had to do this to make it work :
Otherwise the click event was fired twice on buttons.
mattkendall commentedon Feb 25, 2015
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 commentedon Mar 18, 2015
For me 81bcf7f solve the double call issue on Ionic. The
ng-clickhandler is called only once.Try putting this in your
bower.json:I'm using Ionic beta 14.
bonatoc commentedon Mar 18, 2015
I had to comment the entire if statement as well.
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 commentedon Mar 19, 2015
I have the same problem. None of the suggestions above work. Cannot tap on google map marker on android at all ...
mattkendall commentedon Mar 19, 2015
@HriBB, you can modify the if statement to look for the property
ev.jon 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.attempt to fix angular#1528
rlucian commentedon Mar 27, 2015
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...
fixed google maps landmark click to open not working
ThomasBurleson commentedon Apr 11, 2015
@kennethcachia - interesting idea for quick bandaid on Ionic conflicts:
ev.isIonicTapmwilc0x commentedon Apr 28, 2015
Just ran into this issue on iOS with an
md-selectusing ionic.👍 for the
ev.isIonicTapfix(gesture): fix conflicts with Ionic