Skip to content

Commit 7a60489

Browse files
devversiontinayuangao
authored andcommitted
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.
1 parent 2ccf0ae commit 7a60489

File tree

2 files changed

+19
-2
lines changed

2 files changed

+19
-2
lines changed

src/lib/checkbox/checkbox.spec.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,23 @@ describe('MdCheckbox', () => {
369369
.toBe(0, 'Expected no ripple after element is blurred.');
370370
}));
371371

372+
it('should show a ripple when focused programmatically', fakeAsync(() => {
373+
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
374+
.toBe(0, 'Expected no ripples to be present.');
375+
376+
fakeFocusOriginMonitorSubject.next('program');
377+
tick(RIPPLE_FADE_IN_DURATION);
378+
379+
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
380+
.toBe(1, 'Expected focus ripple to be present.');
381+
382+
dispatchFakeEvent(checkboxInstance._inputElement.nativeElement, 'blur');
383+
tick(RIPPLE_FADE_OUT_DURATION);
384+
385+
expect(fixture.nativeElement.querySelectorAll('.mat-ripple-element').length)
386+
.toBe(0, 'Expected focus ripple to be removed.');
387+
}));
388+
372389
describe('ripple elements', () => {
373390

374391
it('should show ripples on label mousedown', () => {

src/lib/checkbox/checkbox.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
199199
this._focusedSubscription = this._focusOriginMonitor
200200
.monitor(this._inputElement.nativeElement, this._renderer, false)
201201
.subscribe(focusOrigin => {
202-
if (!this._focusedRipple && focusOrigin === 'keyboard') {
202+
if (!this._focusedRipple && (focusOrigin === 'keyboard' || focusOrigin === 'program')) {
203203
this._focusedRipple = this._ripple.launch(0, 0, { persistent: true, centered: true });
204204
}
205205
});
@@ -392,7 +392,7 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro
392392

393393
/** Focuses the checkbox. */
394394
focus(): void {
395-
this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, this._renderer, 'keyboard');
395+
this._focusOriginMonitor.focusVia(this._inputElement.nativeElement, this._renderer, 'program');
396396
}
397397

398398
_onInteractionEvent(event: Event) {

0 commit comments

Comments
 (0)