Separate ion-item click from ion-checkbox click. Is it possible?

Ionic Framework ionic-v3
1

Hello,

I have the following markup, an ion-item with a checkbox on the right.

<ion-item *ngFor="let item of standType.items">
                    <ion-icon name="leaf" darkgreen item-left></ion-icon>
                    <ion-label (tap)="test();">{{item.name}}</ion-label>
                    <ion-checkbox red item-right [(ngModel)]="item.checked"
                          (ionChange)="AddRemoveRecipeToFavorite(item,menuType.name);"></ion-checkbox>
</ion-item>

I am trying to achieve 2 different functionality, when a user taps the label, I want them to go to the details page, and when the users taps on the checkbox, I want the checkbox to be checked/unchecked. Any idea how to achieve this with the ion-item ?

Thanks

1 Like
2

Personally i think this is bad UX. I wouldn’t expect this to happen. But can’t you add a tap handler to the checkbox?

I’d suggest you create a link/icon to the details.

3

Thanks for the reply. I am with you on that, it is bad UX, my hands are tied in terms of what design some clients choose. I recommended against that.

What I ended up doing, the transparent button that covers / overlays the ion-item, has a position absolute with left:0,right:0,top:0 etc so I changed the left to be say 80% and then added a tap on the ion-label… Adding tap on ion-checkbox still had the button overlay the ion-label and preventing it from being tapped.

4

You might be better off using a avatar which toggles the checkbox and changes state depending on the value and hiding the checkbox.