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

Question

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.

Move the click event to the ion-checbox from the ion-icon tag. — Diodeus - James MacFarlane, May 17 '19 at 15:40
i don’t recall how exactly i fixed that but it was through z-index of item-cover class. — Sergey Rudenko, May 18 '19 at 04:32
Thanks Sergey, I solved with your hint using the CSS: ion-label, ion-icon { z-index: 5; } — Luiz Imposimato, May 20 '19 at 15:51

score 3 · Accepted Answer · answered May 22 '19 at 14:54

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;
}

score 2 · Answer 2 · answered Jul 28 '20 at 11:46

2

I found another solution. I added another hidden checkbox in the item.

<ion-item *ngFor="let task of tasks;let i of index;"  padding margin>
  <ion-checkbox slot="start" color="success" (click)="DeleteTask($event, task)"></ion-checkbox>
  
  <!-- another checkbox otherwise item clicks triggers checkbox click -->
  <ion-checkbox hidden=true ></ion-checkbox>

<ion-label >
     {{task.Name}}
  </ion-label>
  <ion-reorder slot="end"></ion-reorder>

answered Jul 28 '20 at 11:46

Gaddy Heineken

21
2

I like this option because it allows you to still have a click handler for the whole ion-item, as opposed to having it on the label. That way a click anywhere else on the ion-item besides the checkbox still activates the click event, rather than having to click specifically in the label text. – fenix.shadow Jun 09 '22 at 20:57

score 0 · Answer 3 · answered Jun 09 '22 at 22:23

You can also wrap the checkbox in a slotted div, which appears to break the link between the item and the checkbox.

<ion-item (click)="itemHandler()">
  <ion-icon />
  <ion-label>Label</ion-label>
  <ion-checkbox (click)="checkboxHandler()" />
</ion-item>

If you put the click handler on the ion-item then it will handle clicks from anywhere on the ion-item. However, that includes clicks from the checkbox, so you have to make sure to also call event.stopPropagation() in the checkbox click handler.

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

3 Answers3

Explanation

Linked