modal ng-click fire twice on touchscreen

[gaudiauj]

Example of problem below :

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

I am using ng-touch and material in my AngularJS app, but on mobile device the event ng-click fire twice. seems to happen only in $mdmodal

[jpike88]

This issue also occurs when clicking a button in md-menu, it triggers the input under the menu

#5696

[EladBezalel]

Actually this issue is also happening on any touchscreen not only mobile or specific browser.

this happens because we're listening to both touchstart and mousedown.

[jpike88]

As I mentioned in the link issue, a good test case is placing an input field under an md-menu dropdown. Tapping the dropdown triggers the button properly, but as the dropdown fades the input is then focused.

This is a pain in the ass for touch as the keyboard pops up out of nowhere

[tonyawad88]

+1

For my case I have a side-nav, when the side-nav is opened, I click on the link to load a template. The click closes the side-nav and load the template. The template has an input control in it which gets focused as soon as the template is loaded.

[jpike88]

This is becoming incredibly frustrating, and needs a fix before this framework can be considered of a decent standard. This should be given a high priority tag I think.

I can think of a couple of workaround ideas:

• Have a momentarily delay where one event listener temporarily locks the other listener
• Enable the turning off of one over another, segregating the app into a desktop/laptop vs mobile build.

[jpike88]

Just put out a testing version, this is making apps sloppy as hell to users to the point where they are complaining about it as a major usability problem.

This should be made a super high priority, I am really confused as to why this keeps getting pushed back.

[jpike88]

I'm going to try a really crappy workaround, and that is selectively switch off listeners depending on user agent. But seriously, why this is getting such little attention is beyond me

[jpike88]

And still nothing. Great stuff guys.

I found this on angular/angular.js#6251

Copy pasting some code, which sets a timeout ignoring identical x/y coordinate combinations. This may be of help.

     var y = touches[0].clientY;
     touchCoordinates.push(x, y);

+    // Test if these coordinates are already allowed. Don't stack!
+    for (var i = 0; i < touchCoordinates.length; i += 2) {
+      if (touchCoordinates[i] == x && touchCoordinates[i + 1] == y) {
+        return;
+      }
+    }
+
     $timeout(function() {
       // Remove the allowable region.
       for (var i = 0; i < touchCoordinates.length; i += 2) {

[ThomasBurleson]

@jpike88 - Your issue has never been "pushed back". The Angular Material dev team is very busy with efforts for 1.0.0-rc<xxx> releases. Delays in responding or resolution do not justify rudeness or violations of our Code of Conduct.

In fact, this issue of ng-touch and ngMaterial Gestures was discussed at our last team meeting. Let me follow up with the team to identify interim solutions and summaries.

[ThomasBurleson]

@jpike88 - Both ngTouch and ngMaterial have swipe gestures and attempt to address the 300ms tap delays in mobile. Similar to Ionic/ngMaterial hybrids, ngTouch is not a supported module with Angular Material v1.0.

See gestures: Detect ngTouch usages for change to warn developers if ngTouch is detected.

[jpike88]

No wait don't close it, if you just ran the test cases everyone's mentioning, you'd find this issue was occurring with the angular material library all on its own!

I momentarily confused ngtouch with angular's internal library, I don't import anything other than angular and angular material.

[jpike88]

Actually it makes sense to close this issue as it initially refers specifically to ng-touch.

Please direct your attention to #5696, I think that one deserves the high priority/bug status instead.