fix(material/checkbox): incorrect animation state when going from pre…

…-checked to indeterminate (#25297) Fixes that we weren't setting the correct animation class when the checkbox goes from being pre-checked to indeterminate. Fixes #25289.
angular · Jul 20, 2022 · cf6b83e · cf6b83e
1 parent c440f84
commit cf6b83e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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: