We have a weird issue where sometimes when we tap a button on an Android tablet, the animation / ripple is activated but the button (click) function doesn’t get triggered in an Ionic 5 / Angular 9 application.
Is there a way to tweak the touchstart / touchend? Any suggestions on how to troubleshoot? It’s not a specific ion-button that does this behaviour but rather any ion-button could have that behaviour in the app.
Anyone else running into this issue? Any workarounds tweaks? hammerjs?
What Tablet is it?
In which code extract are you using the handler (click)?
Have you debugged directly connected the Tablet to the computer and tested with the Chrome DevTools to see if the event occurs?
The tablet is a Samsung Tab Active 2. The (click) handler is simply attached to an ion-button. Another one is an ion-back-button with a defaulthref. It works 80-90% of the time. But about 10% of the time, the ripple effect / animation is triggered but the function doesn’t gets triggered. Attempting the same action again, triggers the action.
I will try to see if I can debug with the chrome devtools but almost certain that the function is not being triggered.
I’ve noticed this in every app I’ve made. On iOS, the touch event fires perfectly. If you press a button and don’t let go, whenever you decide to lift your finger, the event will trigger. iOS performance is actually pretty great.
Sadly on Android, this has never been the case. The animations will run and then the event will just not fire. Couple this with varying levels of Android hardware, touch screen sensitivity etc and you’ve got the result you’re seeing.
If someone knows something I don’t, I’d love to hear it.
The function doesn’t trigger. I might try using hammerjs to maybe try binding to touchstart to see if it triggers better, since the animation triggers there must be other events that are triggering but not the (click) event…
Will keep you updated. Feel free if you have any other suggestions.
Any news please? I’m facing this problem since ionic 3 on samsung tablet A2.
I thinked that’s maybe related to ionic 3, but i have just created a new ionic 5 project and still facing this issue. I see the animation triggered but not the event.
I wish one of the Ionic team members would help shed some light on this. I wonder if using @HostListner with touchend is a better approach to tracking a tap. I want to try this at some point to see if it makes any difference.
Let me know if you end up trying it and I will keep you updated on my end as well.
On Android, the ion-buttons sometimes do not trigger the (click) event however the ripple animation does run. So it gives the user the sense that they tapped and that their tap was recorded but the function bound to that button doesn’t get triggered.
Any insight on this? Have you run into this or heard about it? Any workarounds? It seems Android-specific. Thank you!
Come on, you don’t need a github repo! - literally start ANY Ionic 3/4/5 project template from your own boilerplate ones with an ion-button/ion-tab-button, ANYTHING that invokes a function, on ANY android device.
Totally get you Mike, I am just frustrated as an avid user of the framework that issues like this just go unanswered with little to no word from the team for so long. No offense meant.
It’s not true that you would’ve received more reports if this was a thing though, as it’s entirely possible that people just don’t notice it, unlike myself and the original poster here. Or that they just don’t care.
Anyway, I’ve made a zip from the starter blank app. I just added a button to the home page.
The same behaviour happens even without Ionic involved (a native button), but everything here seems to be working as expected.
Tap/click a button => click event fires.
Press+hold then release => click event does not fire.
@tonyawad88 not sure if this is the situation that you are testing in, but to provide more context, the ripple animation will trigger on touch start events, clicks. So the animation playing and not firing the click event sometimes make sense.
As for iOS, I tested on iOS 14/13, and the behaviour is the same with android. Press+hold+release will trigger the animation (since it’s a touchStart) but but not a click since it’s not technically a click event (according to the browser that is).
iOS 12 is the only place that seems to not have the same behaviour.
Again, this happens still without ionic involved.
Not sure why that change, but it seems like the browser is behaving normally.
I’d like to chime in here. I don’t believe you are correct with your observations.
Another concrete example here:
I just tested on of my production apps on iOS 13.7 - feel free to download it and see for yourself - touch+hold ANY button on the loading swiper or login screen, and it will fire the event when you lift your finger.
Try the same app on Android - you won’t see the same result.
Sorry for the delay, for some reason these notifications always go to my junk folder.
@mhartington that’s correct, part of the problem is that when a user “taps”, their finger stays on for a little bit longer than the default threshold (any idea what that is or if that is configurable?) the ripple animation starts but the action does not trigger. This one we can reproduce on Android quite frequently.
Another part, sometimes what seems like a real tap also triggers the animation but doesn’t trigger the action. For this one, my guess is that the touch screen might be registering some other type of event like a short pan/drag/swipe instead of a true 100% tap, which could be due to screen sensitivity etc.
Regardless, I believe these should still trigger the action bound since the touchstart was triggered.
Any idea if there’s a way to configure all of these events to still trigger the action bound to the button or tweak the thresholds?
Do you think there is a way to use @HostListener(‘touchend’) with an ion-button as a workaround for sensitive buttons in the meantime (i.e. for those buttons that are critical and have to be triggered in all of the above touch-types)?
@Daveshirman, I agree regarding user expectations. As for the testing on iOS tablets, I take your word for it. The apps my team worked on are mainly enterprise custom apps deployed on Android. Have you been able to experiment with touchend at all or have you seen this issue with using simple html buttons (i.e. do you see the same behaviour with using <button …>) ?