bug: ion-checkbox isn't updating using [checked] attribute and/or formControlName attribute

[thall1961]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior: If I have multiple ion-checkbox components and I try to control whether they are checked or not by using the [checked] and/or formControlName attributes, the 'check' does not appear as expected.

Expected behavior: I would expect the 'check' in the checkbox to appear and disappear in accordance to the checked and not checked values (be checked when true, not be checked when false)

Steps to reproduce: One parent component controlling the boolean value [checked] should be, 3 child components (2 copies of the same, and 1 other component). The child components emit their respective index numbers which the parent component uses to decide what each child component's ion-checkbox [checked] value should be (sorry, that's a bit confusing... view code for reference).

Related code: https://github.com/thall1961/ionic-checkbox-bug

<ion-item lines="none">
    <ion-checkbox (click)="toggleDefaultContact()" formControlName="newContact" id="defaultContact{{num}}" color="medium" mode="ios"></ion-checkbox>
    <ion-label color="primary" class="ion-text-wrap">Make this passenger my default contact</ion-label>
</ion-item>

Other information:

Ionic info:

insert the output from ionic info here

[liamdebeasi]

Thanks for the issue and PR. It sounds like you want to prevent the default onClick handler in ion-checkbox from firing so that you can manage the checked/unchecked state yourself. If that's the case, why not call event.stopImmediatePropagation() in toggleDefaultContact instead of adding a new prop to ion-checkbox?

stopImmediatePropagation prevents other listeners of the same event from being called: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopImmediatePropagation

[thall1961]

Thanks for the response! That might help, but I'm not sure that's the issue. I've attached a movie that should show the behavior I'm seeing which is not expected. When I try to control the checkbox's checked attribute with [checked], it doesn't seem to work like expected. The same unexpected behavior happens when using the formControlName attribute.

checkbox.mov.zip

And here's the link to my repo again

[liamdebeasi]

Thanks for the video. I added event.stopImmediatePropagation() to both toggleDefaultContact in passenger.component.ts and toggleNewContact in contact.component.ts and that seemed to resolve the issue. Can you give that a try and let me know if it resolves the issue on your end?

Note that you will need to pass in $event in the click handler binding on ion-checkbox in your templates.

[thall1961]

Ahh yep, that fixes it. Sheesh that was easy. Thanks for your help!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.