'ng-click-active' remains stuck

[meeroslav]

This is hard to track and thus hard to fix as it doesn't happen every time, but can be definitely reproduced on desktop Chrome and mobile browsers (Chrome, Safari, Android browser).

• When element with ng-click defined and '.ng-click-active' style defined in CSS is clicked on, it gets class 'ng-click-active' as long as element is in pressed/touched state
• Once click/touch has finished, 'ng-click-active' class should be removed from the element.

However, this is sometimes not the case and element remains in 'clicked' state with class still on long after click had finished.
Unfortunately it's not easy to reproduce this as it doesn't happen every time, but it's pretty annoying.

[Narretz]

Can you please post a plnkr.co etc? Even if it doesn't happen all the time, there must be some circumstances that make it more probable to happen.

[meeroslav]

http://plnkr.co/edit/B6ciPQuyO4yYTCAVKOXv

Here it is, but I can't reproduce it on such a small scale. It could be related maybe to sliding 3D animations on switching between menu pages. I will try to enrich it with animations to get closer to what we have in our app. Otherwise I can only send you link where to see it live (thou obfuscated, so no debugging would be possible).

[tsimeunovic]

Definitely reproducible when there is an element replacing/overlaying touched element. Except touch events there are mouse events triggered as well. Observer order of events is deterministic and always in this order: touchstart, touchend, (mousemove), mousedown, mouseup. So in normal scenario ng-click-active class is added/removed/(removed)/added/removed. Source element for those events is for all touchstart, touchend, (mousemove), mousedown always touched element. For mouseup however sometimes happens that event source element is not touched element, but some element from overlaying layer. Hence the ng-click-active class is not properly removed.