[SOLVED] Is there a way of not trigger checkbox when clicking in a ion-item Ionic 4?

Is there a way of not trigger checkbox when clicking in a ion-item Ionic 4?

When I click on the label of an ion-item the checkbox is triggered. I want to find a way of preventing this from happening as I want to trigger another function when clicking the label.

I found this answer for Ionic 3: https://forum.ionicframework.com/t/solved-can-i-disable-a-checkbox-from-activating-when-clicking-on-a-label/95120 However, it is not working for Ionic 4.

<ion-item>
    <ion-icon [name]="setIconDoc(item.document.documentType)" color="primary" (click)="editDocument(item.document)"></ion-icon>
        <ion-label padding-start color="none" (click)="editDocument(item.document)"> {{ item.document.customer.name }}
        </ion-label>
        <ion-checkbox slot="end" color="success" [(ngModel)]="item.isChecked"> 
   </ion-checkbox>
</ion-item>

I'd like to have two behaviors: - When clicking in the Checkbox trigger just the checkbox. - When clicking on the label or the icon open a modal to edit my document.

Solution

I just had a similar problem and found a nice solution for it in ionic 4 by using the slots of ion-item.

<ion-item lines="full">
  <ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>

  <ion-label slot="start" (click)="labelClicked()">
    This is a separately clickable label
  </ion-label>
  <ion-checkbox slot="end"></ion-checkbox>
</ion-item>

Explanation

The elements in the start slot of the ion-item are not triggered when clicking the checkbox.
The start slot has no bottom border by default so it must be set by adding lines="full" to the ion-item;

Be aware, that the main slot still is rendered with a large width. That may lead to some hidden content. In this case this can be fixed with a css tweak like this.

ion-item ion-label {
  overflow: visible;
}