bug(checkbox 15 (not legacy)): Checkbox "checked" not working properly after update to 15th version

[tigranPetrosianEnvision]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14 (for 15 it's also working for legacy-checkbox)

Description

Checkbox changes own css-classes even if I have event.preventDefault() in (click) handler. The issue is only for the checkbox (15), not for legacy-checkbox.

It sounds like not a critical issue, but it causes big problems in complex cases (e.g., when I change checkbox state through a ConfirmationDialog). It looks like: [checked] attr is changing, but checkbox is not rerendering (and ChangeDetectorRef cannot help too)

Reproduction

Steps to reproduce:

1. Create default app (Angular version - 15, AngularMaterial version - 15)
2. Import "new" Checkbox import { MatCheckboxModule } from '@angular/material/checkbox';
3. Set (click) handler with one line inside: event.preventDefault()
4. Click on the checkbox

Expected Behavior

Checkbox doesn't change self state (attr and styles/css-classes), if I have event.preventDefault()

Actual Behavior

Checkbox CHANGES css-classes (it's not okay), but doesn't change state (it's okay)

I created two sandboxes: First one - legacy-checkbox https://stackblitz.com/edit/components-issue-3657ht?file=src%2Fapp%2Fexample-component.html,src%2Fapp%2Fexample-component.ts,src%2Fapp%2Fmaterial-module.ts Second - checkbox 15 https://stackblitz.com/edit/components-issue-wrcpmh?file=src%2Fapp%2Fexample-component.html,src%2Fapp%2Fmaterial-module.ts

Also, I made videos Legacy https://user-images.githubusercontent.com/117910324/204268636-e51ac1c0-f971-4bf0-9759-9497c1c95543.mp4 15 https://user-images.githubusercontent.com/117910324/204268673-79fb902f-a36f-438e-bdd4-1d91a57ccdd5.mp4

Environment

• Angular: 15.0.1
• CDK/Material: 15.0.0
• Browser(s): Google Chrome all versions
• Operating System macOS Ventura 13.0.1

[Tilesto]

Recreated. Sorry for it( I forgot to switch account https://github.com/angular/components/issues/26101

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}