Closed thall1961 closed 3 years ago
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
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.
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.
Ahh yep, that fixes it. Sheesh that was easy. Thanks for your help!
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.
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
Other information:
Ionic info: