Ion-item click event inconsistency

Ionic Framework ionic-v3
1

I have a click event on a ion-item. It seems like on the device there’s a lot of inconsistency with the tap. A lot of the times I have to tap it twice for it to transition fire the click and go to the next page. Here’s my code:

       <ion-item *ngFor="let saleEvent of salesEvents" (click)="goToSaleEvent(saleEvent)">
            <ion-thumbnail item-left>
                <img [src]="saleEvent.image_url">
            </ion-thumbnail>
            <h2>{{ saleEvent.name ? saleEvent.name : saleEvent.tenant.name }}</h2>
            <p>{{ saleEvent.when ? saleEvent.when : saleEvent.tenant.location }}</p>
        </ion-item>

Is there a better or correct way to do this? I also wanted to add a hover/focus background color to the ion-item so the background changes once it’s tapped, which seems to be pretty standard in iOS. What is the best way to accomplish that or is it just :focus/:hover ?

2

You should only use ion-item as an element “when it is not clickable” according to the docs.

If it needs to be clickable then you need ion-item as an attribute.

1 Like