Ionic 4 checkbox issue <ion-checkbox > block other click event in <ion-item> tag

Question

We are trying to put checkbox and a button in the same row for our android application. We are using Ionic 4 and Cordova 9 to build the Andriod Application.

so we have used the following code snippet:

<ion-content>
<ion-item-sliding *ngFor="let test of testList">
<ion-item>

 <!-- check box to select user-->

<ion-checkbox color="secondary" [(ngModel)]="test.testId" 
(click)="selectUser(test .testId )" ng-true-value="right" ng-false- value="wrong" >    </ion-checkbox>

<!-- button  to view user-->

<ion-label text-wrap>
<h3>Test</h3>
<p>Test</p>
<button ion-button color="danger" block  (click)="viewUser(test .testId )">View User</button>
</ion-label>
</ion-item>
</ion-item-sliding>
</ion-content>

When we click on button then Checkbox click event is being triggered. Even if we click anywhere in the row in that case Checkbox click event is being called.

Any help would be much appreciated.

Thanks in advance.

Answer 1

I inspected the ion-checkbox element and result that is a bug, or precisely an error of implementation by ionic, ionic bug report.

In short, inside ion-checkbox there is a button that trigger the event click, but the button have css properties to take all width and height of ion-item, and this button is inside of "shadow DOM", so is difficult override its properties.

But if you need a fix temporally.

I saw that this button inside ion-checkbox have a z-index: 2 property, so give a z-index: 3 to ion-label, and with this the space of button not will trigger, but the space of checkbox still work.

add on your .scss of your page

ion-label{
   z-index: 3;
}

Also, a recommendation is to disable to effect when click the space of ion-item, that will improve the UX, because show that effect when click on white space and don't trigger an action is bad.

EDIT

My versions of the framework.

I hope I've helped :)