From f56c5714ed7f8b667c598c25d7af3261294433e2 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Sun, 17 Jul 2022 12:16:04 +0200
Subject: [PATCH] fix(material/checkbox): incorrect animation state when going
 from pre-checked to indeterminate

Fixes that we weren't setting the correct animation class when the checkbox goes from being pre-checked to indeterminate.

Fixes #25289.
---
 scripts/check-mdc-tests-config.ts      |  1 +
 src/material/checkbox/checkbox.spec.ts | 15 +++++++++++++++
 src/material/checkbox/checkbox.ts      |  6 ++++--
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/scripts/check-mdc-tests-config.ts b/scripts/check-mdc-tests-config.ts
index e71907d34e27..f5d752c05aad 100644
--- a/scripts/check-mdc-tests-config.ts
+++ b/scripts/check-mdc-tests-config.ts
@@ -24,6 +24,7 @@ export const config = {
       'should not remove margin if initial label is set through binding',
       'should re-add margin if label is added asynchronously',
       'should properly update margin if label content is projected',
+      'should transition correctly from initially checked to indeterminate',
 
       // TODO: the focus origin behavior needs to be implemented in the MDC checkbox
       'should not change focus origin if origin not specified',
diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts
index 3933ffb0da3a..e1f71414e11e 100644
--- a/src/material/checkbox/checkbox.spec.ts
+++ b/src/material/checkbox/checkbox.spec.ts
@@ -557,6 +557,21 @@ describe('MatCheckbox', () => {
           'mat-checkbox-anim-unchecked-indeterminate',
         );
       }));
+
+      it('should transition correctly from initially checked to indeterminate', () => {
+        testComponent.isIndeterminate = false;
+        testComponent.isChecked = true;
+        fixture.detectChanges();
+
+        expect(checkboxNativeElement.className).not.toMatch(/^mat\-checkbox\-anim/g);
+
+        testComponent.isIndeterminate = testComponent.isChecked = true;
+        fixture.detectChanges();
+
+        expect(checkboxNativeElement.classList).toContain(
+          'mat-checkbox-anim-checked-indeterminate',
+        );
+      });
     });
 
     describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => {
diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts
index f0640c3a2748..c8cf4dcf7b43 100644
--- a/src/material/checkbox/checkbox.ts
+++ b/src/material/checkbox/checkbox.ts
@@ -332,7 +332,7 @@ export abstract class _MatCheckboxBase<E>
     if (oldState === newState || !element) {
       return;
     }
-    if (this._currentAnimationClass.length > 0) {
+    if (this._currentAnimationClass) {
       element.classList.remove(this._currentAnimationClass);
     }
 
@@ -438,7 +438,9 @@ export abstract class _MatCheckboxBase<E>
         if (newState === TransitionCheckState.Checked) {
           return this._animationClasses.uncheckedToChecked;
         } else if (newState == TransitionCheckState.Indeterminate) {
-          return this._animationClasses.uncheckedToIndeterminate;
+          return this._checked
+            ? this._animationClasses.checkedToIndeterminate
+            : this._animationClasses.uncheckedToIndeterminate;
         }
         break;
       case TransitionCheckState.Unchecked: