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?
Thank you!
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.
Thanks
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!
Really surprised here. I mean, it’s always been like this since Ionic 2 (when I started using it) and trivial to reproduce.
As explained, animations trigger, but actions don’t always occur on Android.
In order to make sure events are triggered on Android, you have to press an element, e.g a button and release your finger within a reasonable amount of time.
This doesn’t happen on iOS. You can hold down a button or whatever clickable element indefinitely and whenever you release, you will get the event firing.
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.
@Daveshirman a github repo is required. There are a bunch of apps build with Ionic, if there was an issue with click events, we would have gotten more reports than just this.
I simply ask for a github repo to reduce any possibility for errors when trying to reproduce the issue.
At this time, I would like to remind you that we do have a code of conduct, and that we except community members to be respectful to one another.
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.
Ultimately, if you hold your finger on a button, as a user, regardless if I see an animation or not, I expect the button function to run when I lift my finger off.
This is the issue.
We can technically say that a press / hold event is not the same as a click, sure. But the behaviour on iOS and Android is 100% not the same.
Go to the Gmail app for example on Android. Tap+hold the “Compose” elongated FAB button at the bottom, whenever you lift, you will get the event firing + new modal up.
This is the same throughout the system. I am curious which apps you found the same behaviour in native apps because I’ve definitely not seen it.
It’s as if Android will cancel the click event after X time, but iOS will NEVER cancel a click/touch event once you’ve initiated pressing on the screen.
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 …>) ?
