List View Click

[kumaresan-cgvak]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
List view click event is not working properly

Expected behavior:
click event should be trigered properly

Related code:

 <ion-list>
      <ion-item (click)="openPage()">
        Home
      </ion-item>
      <ion-item (click)="openPage()">
        Home
      </ion-item>
      <ion-item (click)="openPage()">
        About US
      </ion-item>
     <ion-item (click)="openPage()">
        Countact US
      </ion-item>
    </ion-list>

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.0
ios-deploy version: 1.9.0 
ios-sim version: 5.0.12 
OS: macOS Sierra
Node Version: v7.2.0
Xcode version: Xcode 8.3 Build version 8E162

[jgw96]

Hello, could you post more info about this issue? What exactly is the issue that is happening? Is there anything logged to the console?

[kumaresan-cgvak]

@jgw96 Click event is not triggred properly. i mean the function openPage() is not triggered properly in the below example. Where we need to click the list item 3 to 4 times and then only it will trigger the click event. This happens only after updating to Ionic Framework Version: 3.0.1

<ion-item (click)="openPage()">
        Home
      </ion-item>

Nothing logged in the console.

[marcelgoya]

Hi I'm experiencing the same problem on Android. In v3.0.1, it's adding

touch-action: none;
user-select: none;
-webkit-user-drag: none;

to ion-item when I'm using touch event handlers like (press)="action()", which makes scrolling impossible.

[e9li]

maybe similar or same issue like #11110. I have a list of <ion-card>. first click takes to the detail page. when returning quick and one click ist not working but with two clicks it works. when waiting somewhere about 2 or 3 seconds when returning it works with one click as it should.

[chandanch]

@kumaresan-cgvak For Handling click events for list items you must use the button and add the ion-item property similar to this:

<ion-content>
    <ion-list>
        <button ion-item (click)="homePage()">Home Page</button>
        <button ion-item (click)="about()">About Page</button>
    </ion-list>
</ion-content>

Refer to the component document here: http://ionicframework.com/docs/components/#lists

If you want to avoid the click delay then use tap:

<ion-list>
    <ion-item (tap)="homePage()">Home</ion-item>
    <ion-item (tap)="aboutPage()">About Us</ion-item>
</ion-list>

[e9li]

@chandanch tap seems to work properly. In the docs is (click) used everywhere maybe it should be mentioned that tap should be used. I didn't find that and in earlier versions (click) worked without any delay. Since tap works for me this issue is solved.

[chandanch]

@e9li If you have upgraded to 3.0.1 the click delay is resolved

[e9li]

@chandanch I've already updated to 3.0.1 but the click doesn't work like before, sometimes without and sometimes with delay. With tap it works like a charm.

[chandanch]

@e9li Yes, For the components that are not clickable tap event must be used. Refer to this issue: 5838

[e9li]

@chandanch thank you for your info. maybe I missed something, but this cannot be found in the docs. all examples are with click and so the people do this with click and don't know they should use tap instead. Including that into the docs won't be that difficult.

[ghost]

@jgw96 It seems that the click event is not firing for some clicks. I would have to touch the screen 3 times before the event is registered. The click event has been altered in 3.0.1 or 3.0.0 It is not behaving the same as the 2.x.x versions.

[kumaresan-cgvak]

@chandanch If we use (tap) instead of (click) in the list view of side menu. Then using menuClose in the list view will not close the opened menu.

[kumaresan-cgvak]

@jgw96 Do we have any feedback on this issue?

[chandanch]

@kumaresan-cgvak When using list you must add the ion-item as an attribute to the button component, this will make the item(s) inside the list clickable or tappable.

Use:

<ion-list>
    <button ion-item (click)="getDetails()">Item 1</button>
    <button ion-item (click)="getDetails()">Item 2</button>
</ion-list>

Refer to this for more details: http://ionicframework.com/docs/api/components/item/Item/

[kumaresan-cgvak]

@chandanch Thank you

[ionitron-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.