Skip to content

Commit

Permalink
fix(checkbox): focus origin for focus method (#3763)
Browse files Browse the repository at this point in the history
* 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.
  • Loading branch information
devversion authored and tinayuangao committed Mar 27, 2017
1 parent 2ccf0ae commit 7a60489
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 2 deletions.
17 changes: 17 additions & 0 deletions src/lib/checkbox/checkbox.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
4 changes: 2 additions & 2 deletions src/lib/checkbox/checkbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}
});
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit 7a60489

Please sign in to comment.