bug: ion-checkbox is toggled by ion-item click

[bsbechtel]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

If you have the following markup, any click or tap on the ion-item will toggle the ion-checkbox:

    <ion-item>
      <ion-checkbox slot="start"></ion-checkbox>
      <div>Testing!</div>
    </ion-item>

Expected behavior:

The ion-checkbox should only toggle when it is clicked, or the click event from the ion-item should be cancellable.

Steps to reproduce:

Related code:

Codepen

Other information:

This issue has been brought up multiple times and not fixed: 19590 15850 17832

Ionic info:

insert the output from ionic info here

[MarkChrisLevy]

@bsbechtel Imho it is very ok, that checkbox is toggled when item clicked - think about mobile apps, it is proper behavior, that is from the very beginning of ionic. But you can achieve what you need wrapping ion-checkbox in slotted div:

<div slot="start" style="position: relative"><ion-checkbox></ion-checkbox></div>

[brandyscarney]

Thanks for the issue! This is the intended behavior for mobile devices to match the native behavior. However, as a workaround you could use the following: https://codepen.io/brandyscarney/pen/vYNeLzZ?editors=1100

ion-item {
  --background-hover: none;
  --background-activated: none;
  --ripple-color: transparent;
}

ion-checkbox {
  position: relative;
}

What this does:

• Removes the hover / activated states & ripple effect from item so it doesn't appear clickable
• Sets checkbox position to relative which will move the checkbox click to only appear over the checkbox itself (this is essentially what happens when a user adds multiple checkboxes in an item)

I'm going to mark this as a needs: design decision as we will need to discuss the API for disabling this behavior in the framework.

[gkTim]

In my case the checkbox is only toggled on the first item on the ios style. The second item it is only toggled when I tap on the checkbox (thats what i want).

I think both cases are valid but it should be consistent.