diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/demo-app/autocomplete/autocomplete-demo.html index e31478d10b2..3a844aa81a8 100644 --- a/src/demo-app/autocomplete/autocomplete-demo.html +++ b/src/demo-app/autocomplete/autocomplete-demo.html @@ -66,19 +66,6 @@ Space above cards: - - - {{ state.name }} - ({{state.code}}) - - - - - - {{ state.name }} - - - diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index c353518e57f..15cfe649a84 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -169,7 +169,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { this._resetPlaceholder(); if (this._panelOpen) { - this._panelOpen = false; + this.autocomplete._isOpen = this._panelOpen = false; // We need to trigger change detection manually, because // `fromEvent` doesn't seem to do it at the proper time. @@ -454,7 +454,7 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy { } this.autocomplete._setVisibility(); - this._panelOpen = true; + this.autocomplete._isOpen = this._panelOpen = true; } private _getOverlayConfig(): OverlayConfig { diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 638745d29ef..3096f21e8fc 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -409,6 +409,17 @@ describe('MatAutocomplete', () => { expect(inputContainer._animateAndLockPlaceholder).toHaveBeenCalled(); }); + it('should provide the open state of the panel', async(() => { + expect(fixture.componentInstance.panel.isOpen).toBeFalsy( + `Expected the panel to be unopened initially.`); + + dispatchFakeEvent(input, 'focusin'); + fixture.detectChanges(); + fixture.whenStable().then(() => { + expect(fixture.componentInstance.panel.isOpen).toBeTruthy( + `Expected the panel to be opened on focus.`); + }); + })); }); it('should have the correct text direction in RTL', () => { diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts index 8113bacb19c..f1df4292371 100644 --- a/src/lib/autocomplete/autocomplete.ts +++ b/src/lib/autocomplete/autocomplete.ts @@ -58,6 +58,12 @@ export class MatAutocomplete implements AfterContentInit { /** Whether the autocomplete panel should be visible, depending on option length. */ showPanel = false; + /** Whether the autocomplete panel is open. */ + get isOpen(): boolean { + return this._isOpen && this.showPanel; + } + _isOpen: boolean = false; + /** @docs-private */ @ViewChild(TemplateRef) template: TemplateRef; @@ -97,6 +103,8 @@ export class MatAutocomplete implements AfterContentInit { ngAfterContentInit() { this._keyManager = new ActiveDescendantKeyManager(this.options).withWrap(); + // Set the initial visibiity state. + this._setVisibility(); } /**