From 7a60489204458813a5cab5994e8e6e417b64828c Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 28 Mar 2017 01:39:11 +0200 Subject: [PATCH] fix(checkbox): focus origin for focus method (#3763) * Currently when developers call the `focus` method on the checkbox, the checkbox focuses via keyboard. This makes the focus-classes of the `FocusOriginMonitor` invalid. * To be consistent with native input controls, the focus indicator should also show for programmatic focus. --- src/lib/checkbox/checkbox.spec.ts | 17 +++++++++++++++++ src/lib/checkbox/checkbox.ts | 4 ++-- 2 files changed, 19 insertions(+), 2 deletions(-) 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) {