Ionic-framework: v2 - iOS - Have to click multiple times to trigger (click) with ion-tabs / nav.push

[trongrg]

Short description of the problem:

After navigating from page1 to page2 via nav.push(Page2), and click back, click event is not triggered correctly.

It only happens on iOS, on both device and emulator. On browser it works fine. I haven't tested it on android yet

I also tried the tutorial, and this issue doesn't happen. Seems like it is related to tabs

What behavior are you expecting?

Click event after coming back from page2 should work properly

Steps to reproduce:

1. ionic start myTutorial --v2
2. modify page1.html and page1.js as in this gist https://gist.github.com/trongrg/0c637b201ced41061517
3. ionic emulate ios
4. Click on "Welcome to Ionic!" and click "Back"
5. Click on "Welcome to Ionic!" again. Notice that the click event is not triggered. Clicking on the element several times and the click event is triggered

Which Ionic Version? 2.0.beta-3

Run ionic info from terminal/cmd prompt: (paste output below)
Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.22
Ionic App Lib Version: 2.0.0-beta.12
ios-deploy version: 1.8.5
ios-sim version: 5.0.7
OS: Mac OS X El Capitan
Node Version: v5.9.0
Xcode version: Xcode 7.3 Build version 7D175

[trongrg]

After digging through the code of ionic 2, I found out that this issue is caused by the click-block directive.

The expire time is hardcoded as 330 (I assume as 330ms) DEFAULT_EXPIRE = 330. During this 330ms, all clicks on page1 is blocked.

To disable click-block, we can change the config

@App({
...
    config: {
        clickBlock: false

This should be added to the docs here http://ionicframework.com/docs/v2/api/config/Config/

I would also love to have the ability to customize the expire time.

[adamdbradley]

Please use the tappable attribute if an element is clickable. We'll work on the documentation for this, thanks.

[brunosmartin]

So, one year have passed and nothing in the docs yet! This is critical. I think this issue should be open until the tappable be in the docs

[Deadsoil]

Yeah, tappable fixes the problem, but you have to search pretty hard to even find this solution. Needs to be in the docs that you need to add tappable to non-button / item elements to make the click event function correctly on IOS.

[captaincole]

Looking at the documentation, this does not seem to be included anymore either. For me, this click-block is getting added to my ion-tab elements and is stopping protractor from testing.

[cbratschi]

After upgrading to Ionic 3 I am seeing that some events are lost after navigating back. Adding tappable did not help:

<img ion-item tappable [src]="tile.img" (click)="showTile(tile)">

Is there another solution?

[captaincole]

To get this to work in protractor for e2e testing, I added a browser wait before clicking of at least 330ms.

[fdambrosio]

Hi, there's a fix?
I'm using 'tappable' on Ionic3 with ion-item and the workaround works...

[homj]

I'm also not seeing any changes when adding tappable to elements. The issue persists

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.