diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index b5a1b5a4f053..29ddc7e85e65 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -369,6 +369,23 @@ describe('MdCheckbox', () => { .toBe(0, 'Expected no ripple after element is blurred.'); })); + it('should show a ripple when focused programmatically', fakeAsync(() => { + expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length) + .toBe(0, 'Expected no ripples to be present.'); + + fakeFocusOriginMonitorSubject.next('program'); + tick(RIPPLE_FADE_IN_DURATION); + + expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length) + .toBe(1, 'Expected focus ripple to be present.'); + + dispatchFakeEvent(checkboxInstance._inputElement.nativeElement, 'blur'); + tick(RIPPLE_FADE_OUT_DURATION); + + expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length) + .toBe(0, 'Expected focus ripple to be removed.'); + })); + describe('ripple elements', () => { it('should show ripples on label mousedown', () => { diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 5b36e586c99c..e7ebf7c3942a 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -199,7 +199,7 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro this._focusedSubscription = this._focusOriginMonitor .monitor(this._inputElement.nativeElement, this._renderer, false) .subscribe(focusOrigin => { - if (!this._focusedRipple && focusOrigin === 'keyboard') { + if (!this._focusedRipple && (focusOrigin === 'keyboard' || focusOrigin === 'program')) { this._focusedRipple = this._ripple.launch(0, 0, { persistent: true, centered: true }); } }); @@ -392,7 +392,7 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro /** Focuses the checkbox. */ focus(): void { - this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, this._renderer, 'keyboard'); + this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, this._renderer, 'program'); } _onInteractionEvent(event: Event) {