diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index ceb58b2de00..cac35e08f50 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1071,6 +1071,26 @@ describe('MatSelect', () => { expect(document.querySelectorAll('.cdk-overlay-container mat-option').length) .toBeGreaterThan(0, 'Expected at least one option to be rendered.'); })); + + it('should not consider itself as blurred if the trigger loses focus while the ' + + 'panel is still open', fakeAsync(() => { + const selectElement = fixture.nativeElement.querySelector('.mat-select'); + const selectInstance = fixture.componentInstance.select; + + dispatchFakeEvent(selectElement, 'focus'); + fixture.detectChanges(); + + expect(selectInstance.focused).toBe(true, 'Expected select to be focused.'); + + selectInstance.open(); + fixture.detectChanges(); + flush(); + dispatchFakeEvent(selectElement, 'blur'); + fixture.detectChanges(); + + expect(selectInstance.focused).toBe(true, 'Expected select element to remain focused.'); + })); + }); describe('selection logic', () => { diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 513477de2ce..9172df03dd1 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -310,7 +310,17 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, private _disableOptionCentering: boolean = false; /** Whether the select is focused. */ - focused: boolean = false; + get focused(): boolean { + return this._focused || this._panelOpen; + } + /** + * @deprecated Setter to be removed as this property is intended to be readonly. + * @deletion-target 8.0.0 + */ + set focused(value: boolean) { + this._focused = value; + } + private _focused = false; /** A name for this control that can be used by `mat-form-field`. */ controlType = 'mat-select'; @@ -718,7 +728,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, _onFocus() { if (!this.disabled) { - this.focused = true; + this._focused = true; this.stateChanges.next(); } } @@ -728,7 +738,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, * "blur" to the panel when it opens, causing a false positive. */ _onBlur() { - this.focused = false; + this._focused = false; if (!this.disabled && !this.panelOpen) { this._onTouched();