Closed
Description
Reproduction
Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/angular-ivy-zppefd?file=src%2Fapp%2Fapp.component.ts
Steps to reproduce:
- Click "Sausage"
- Click "Cheese"
- Works correctly for plain HTML
input
s, and incorrectly format-checkbox
.
Expected Behavior
What behavior were you expecting to see?
- Underlying
input
element should appropriately represent thechecked
property.
Actual Behavior
What behavior did you actually see?
- When invoking
controls['control'].setValue(value)
within the(changed)
listener, the JavaScript state becomes out of sync with the DOM and thechecked
property is not set accurately. - Removing the
setValue()
command from the tick stack withsetTimeout()
allows a subsequent digest to capture the change and keep things in sync. (seeapp.component.ts
). - When styles are applied, the state mismatch is masked by the presence of the
.mat-checkbox-checked
class as opposed to relying on the:checked
pseudo-class. Commenting / uncommenting the style@import
reveals the state mismatch by showing the underlyinginput
.
Environment
- Angular: 10+ (at least)
- CDK/Material: 10+ (at least)
- Browser(s): Yes
- Operating System (e.g. Windows, macOS, Ubuntu): OSX