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();
}
/**