Skip to content

bug(mat-checkbox): Setting value programmatically from changed listener detaches state from template #22149

Closed
@creativeux

Description

@creativeux

Reproduction

Use StackBlitz to reproduce your issue:
https://stackblitz.com/edit/angular-ivy-zppefd?file=src%2Fapp%2Fapp.component.ts

Steps to reproduce:

  1. Click "Sausage"
  2. Click "Cheese"
  3. Works correctly for plain HTML inputs, and incorrectly for mat-checkbox.

Expected Behavior

What behavior were you expecting to see?

  • Underlying input element should appropriately represent the checked 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 the checked property is not set accurately.
  • Removing the setValue() command from the tick stack with setTimeout() allows a subsequent digest to capture the change and keep things in sync. (see app.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 underlying input.

Environment

  • Angular: 10+ (at least)
  • CDK/Material: 10+ (at least)
  • Browser(s): Yes
  • Operating System (e.g. Windows, macOS, Ubuntu): OSX

Metadata

Metadata

Assignees

Labels

AccessibilityThis issue is related to accessibility (a11y)P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/checkbox

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions