Open bsbechtel opened 4 years ago
@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>
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:
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.
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.
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:
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: