Ionic 5 - Ion-button click doesn't always trigger on Android tablet

Hello,

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!

@tonyawad88

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.

Cheers

1 Like

Incoming answer you don’t want to hear:

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.

1 Like

@tonyawad88 Finally, what did you find with the Debug in the Chrome DevTools?

@tonyawad88 add mod=“md” in your button for example:

<ion-button color="primary" mode="md">Primary</ion-button>

:slightly_smiling_face:

What exactly would this achieve with regards to the actual question asked?

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.

Cheers