mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
tinayuangao
parent
2ccf0ae170
commit
7a60489204
@@ -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', () => {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user