fix(checkbox): do not set indeterminate when set checked programmatically (#4024)

Only set indeterminate when user clicked on checkbox

Author: tinayuangao

src/lib/checkbox/checkbox.spec.ts

@@ -101,15 +101,15 @@ describe('MdCheckbox', () => {
       expect(inputElement.indeterminate).toBe(false);
     });
 
-    it('should set indeterminate to false when set checked', async(() => {
+    it('should set indeterminate to false when input clicked', async(() => {
       testComponent.isIndeterminate = true;
       fixture.detectChanges();
 
       expect(checkboxInstance.indeterminate).toBe(true);
       expect(inputElement.indeterminate).toBe(true);
       expect(testComponent.isIndeterminate).toBe(true);
 
-      testComponent.isChecked = true;
+      inputElement.click();
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
@@ -127,7 +127,7 @@ describe('MdCheckbox', () => {
         expect(inputElement.checked).toBe(true);
         expect(testComponent.isIndeterminate).toBe(true);
 
-        testComponent.isChecked = false;
+        inputElement.click();
         fixture.detectChanges();
 
         fixture.whenStable().then(() => {
@@ -141,6 +141,31 @@ describe('MdCheckbox', () => {
 
     }));
 
+    it('should not set indeterminate to false when checked is set programmatically', async(() => {
+      testComponent.isIndeterminate = true;
+      fixture.detectChanges();
+
+      expect(checkboxInstance.indeterminate).toBe(true);
+      expect(inputElement.indeterminate).toBe(true);
+      expect(testComponent.isIndeterminate).toBe(true);
+
+      testComponent.isChecked = true;
+      fixture.detectChanges();
+
+      expect(checkboxInstance.checked).toBe(true);
+      expect(inputElement.indeterminate).toBe(true);
+      expect(inputElement.checked).toBe(true);
+      expect(testComponent.isIndeterminate).toBe(true);
+
+      testComponent.isChecked = false;
+      fixture.detectChanges();
+
+      expect(checkboxInstance.checked).toBe(false);
+      expect(inputElement.indeterminate).toBe(true);
+      expect(inputElement.checked).toBe(false);
+      expect(testComponent.isIndeterminate).toBe(true);
+    }));
+
     it('should change native element checked when check programmatically', () => {
       expect(inputElement.checked).toBe(false);
 
@@ -216,11 +241,11 @@ describe('MdCheckbox', () => {
       expect(checkboxInstance.checked).toBe(false);
     });
 
-    it('should overwrite indeterminate state when checked is re-set', async(() => {
+    it('should overwrite indeterminate state when clicked', async(() => {
       testComponent.isIndeterminate = true;
       fixture.detectChanges();
 
-      testComponent.isChecked = true;
+      inputElement.click();
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {

src/lib/checkbox/checkbox.ts

@@ -203,21 +203,14 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
   }
 
   /**
-   * Whether the checkbox is checked. Note that setting `checked` will immediately set
-   * `indeterminate` to false.
+   * Whether the checkbox is checked.
    */
   @Input() get checked() {
     return this._checked;
   }
 
   set checked(checked: boolean) {
     if (checked != this.checked) {
-      if (this._indeterminate) {
-        Promise.resolve().then(() => {
-          this._indeterminate = false;
-          this.indeterminateChange.emit(this._indeterminate);
-        });
-      }
       this._checked = checked;
       this._changeDetectorRef.markForCheck();
     }
@@ -226,11 +219,8 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
   /**
    * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
    * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
-   * checkable items. Note that whenever `checked` is set, indeterminate is immediately set to
-   * false. This differs from the web platform in that indeterminate state on native
-   * checkboxes is only remove when the user manually checks the checkbox (rather than setting the
-   * `checked` property programmatically). However, we feel that this behavior is more accommodating
-   * to the way consumers would envision using this component.
+   * checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
+   * set to false.
    */
   @Input() get indeterminate() {
     return this._indeterminate;
@@ -372,6 +362,14 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
     this._removeFocusRipple();
 
     if (!this.disabled) {
+      // When user manually click on the checkbox, `indeterminate` is set to false.
+      if (this._indeterminate) {
+        Promise.resolve().then(() => {
+          this._indeterminate = false;
+          this.indeterminateChange.emit(this._indeterminate);
+        });
+      }
+
       this.toggle();
       this._transitionCheckState(
         this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);