Solved: Click Handler Reaction Delay in Ionic 2

I am happy to announce the solution for the click handler reaction delay in Ionic 2. As an Ionic developer, you would be familiar with the infamous 300 ms delay that occurs, when a user attempts to tap and register a click on the hybrid mobile app you painstakingly built with Ionic 2.

Cue in some dramatic visualization…

Moving on…

The delay in registering the tap is the time lag taken by the click handler in reacting. And this delay is specific to ion-col and ion-items.

In their blog and the official documentation, the Ionic team has discussed about the issue in detail. The reason for this delay is said to be the Ionic click blocker, that blocks any interaction until a transition is completely done. This is to recognize if the user wants a click event or double click event on touch devices.

How does this affect the user?

This makes the application slow, thus affecting user experience. The issue is more prominent on iOS devices.

Solved: Click Handler Reaction Delay in Ionic 2

The solution to this issue is quite simple. All you need to do is this:

Add the ‘tappable‘ directive to your element.

For example:

<ion-item tappable (click)=“myClickHandler()”>
    // Your code goes here
</ion-item>

Hope this post helped you overcome this rather frustrating issue in Ionic 2.

Happy Coding!!

AgilizTech is working on some pretty cool Hybrid Apps powered by Ionic 2.

Would you like to know more?

Contact Us