diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts index 6ce9c1040cc8..38349d1dc92a 100644 --- a/src/lib/autocomplete/autocomplete-trigger.ts +++ b/src/lib/autocomplete/autocomplete-trigger.ts @@ -198,23 +198,22 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy { /** Closes the autocomplete suggestion panel. */ closePanel(): void { - if (!this.panelOpen) { - return; - } - if (this._overlayRef && this._overlayRef.hasAttached()) { this._overlayRef.detach(); this._closingActionsSubscription.unsubscribe(); } - this._panelOpen = false; this._resetPlaceholder(); - // We need to trigger change detection manually, because - // `fromEvent` doesn't seem to do it at the proper time. - // This ensures that the placeholder is reset when the - // user clicks outside. - this._changeDetectorRef.detectChanges(); + if (this._panelOpen) { + this._panelOpen = false; + + // We need to trigger change detection manually, because + // `fromEvent` doesn't seem to do it at the proper time. + // This ensures that the placeholder is reset when the + // user clicks outside. + this._changeDetectorRef.detectChanges(); + } } /** diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index de12a3fb799a..425aa491e003 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -344,6 +344,37 @@ describe('MdAutocomplete', () => { }); })); + it('should toggle the visibility when typing and closing the panel', fakeAsync(() => { + fixture.componentInstance.trigger.openPanel(); + tick(); + fixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList) + .toContain('mat-autocomplete-visible', 'Expected panel to be visible.'); + + typeInElement('x', input); + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList) + .toContain('mat-autocomplete-hidden', 'Expected panel to be hidden.'); + + fixture.componentInstance.trigger.closePanel(); + fixture.detectChanges(); + + fixture.componentInstance.trigger.openPanel(); + fixture.detectChanges(); + + typeInElement('al', input); + fixture.detectChanges(); + tick(); + fixture.detectChanges(); + + expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList) + .toContain('mat-autocomplete-visible', 'Expected panel to be visible.'); + })); + }); it('should have the correct text direction in RTL', () => {