bug(mat-checkbox): Animation issue with Indeterminate state

[rafdewit]

Description

When a checkbox is loaded with checked=true & indeterminate=false, the first time it changes to indeterminate=true the animation does not work properly. The checkbox visually goes to "empty/false" and then to the indeterminate state. Any further checked and indeterminate change after works properly with animations.

I've reproduced this on a checkbox-overview-example fork:
https://stackblitz.com/edit/angular-qtmlqq-t7otn9?file=src/app/checkbox-overview-example.ts

Reproduction

Steps to reproduce:

1. https://stackblitz.com/edit/angular-qtmlqq-t7otn9?file=src/app/checkbox-overview-example.ts
2. uncheck a subtask
3. observe the parent task state change animation from checked=true to indeterminate=true

Expected Behavior

Animation between checked and indeterminate state on indeterminate state change true => false. (checked = true)

Actual Behavior

Animation bug: change indeterminate state does not animate properly the first time.

Environment

• Angular: 14.0.0
• CDK/Material: 14.0.5
• Browser(s): Chrome
• Operating System: Windows

[angular-automatic-lock-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.}