Skip to content

Commit

Permalink
fix(checkbox): Emit event when checkbox's indeterminate value changes (
Browse files Browse the repository at this point in the history
…angular#2130)

* Emit event when checkbox indeterminate value changes

* Add test

* Use boolean and emit indeterminate only if value changed
  • Loading branch information
tinayuangao authored and kara committed Jan 20, 2017
1 parent e6845f5 commit e3632c6
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 2 deletions.
35 changes: 34 additions & 1 deletion src/lib/checkbox/checkbox.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,39 @@ describe('MdCheckbox', () => {
expect(inputElement.indeterminate).toBe(false);
});

it('should set indeterminate to false when set checked', () => {
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(false);
expect(inputElement.checked).toBe(true);
expect(testComponent.isIndeterminate).toBe(false);

testComponent.isIndeterminate = true;
fixture.detectChanges();

expect(checkboxInstance.indeterminate).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(false);
expect(inputElement.checked).toBe(false);
expect(testComponent.isIndeterminate).toBe(false);
});

it('should change native element checked when check programmatically', () => {
expect(inputElement.checked).toBe(false);

Expand Down Expand Up @@ -627,7 +660,7 @@ describe('MdCheckbox', () => {
[required]="isRequired"
[labelPosition]="labelPos"
[checked]="isChecked"
[indeterminate]="isIndeterminate"
[(indeterminate)]="isIndeterminate"
[disabled]="isDisabled"
[color]="checkboxColor"
(change)="changeCount = changeCount + 1"
Expand Down
12 changes: 11 additions & 1 deletion src/lib/checkbox/checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,9 @@ export class MdCheckbox implements ControlValueAccessor {
/** Event emitted when the checkbox's `checked` value changes. */
@Output() change: EventEmitter<MdCheckboxChange> = new EventEmitter<MdCheckboxChange>();

/** Event emitted when the checkbox's `indeterminate` value changes. */
@Output() indeterminateChange: EventEmitter<boolean> = new EventEmitter<boolean>();

/** The native `<input type="checkbox"> element */
@ViewChild('input') _inputElement: ElementRef;

Expand Down Expand Up @@ -186,7 +189,10 @@ export class MdCheckbox implements ControlValueAccessor {

set checked(checked: boolean) {
if (checked != this.checked) {
this._indeterminate = false;
if (this._indeterminate) {
this._indeterminate = false;
this.indeterminateChange.emit(this._indeterminate);
}
this._checked = checked;
this._transitionCheckState(
this._checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
Expand All @@ -208,13 +214,17 @@ export class MdCheckbox implements ControlValueAccessor {
}

set indeterminate(indeterminate: boolean) {
let changed = indeterminate != this._indeterminate;
this._indeterminate = indeterminate;
if (this._indeterminate) {
this._transitionCheckState(TransitionCheckState.Indeterminate);
} else {
this._transitionCheckState(
this.checked ? TransitionCheckState.Checked : TransitionCheckState.Unchecked);
}
if (changed) {
this.indeterminateChange.emit(this._indeterminate);
}
}

/** The color of the button. Can be `primary`, `accent`, or `warn`. */
Expand Down

0 comments on commit e3632c6

Please sign in to comment.