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.
This commit is contained in:
Paul Gschwendtner
2017-03-28 01:39:11 +02:00
committed by tinayuangao
parent 2ccf0ae170
commit 7a60489204
2 changed files with 19 additions and 2 deletions
+17
View File
@@ -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', () => {
+2 -2
View File
@@ -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) {