Skip to content

Commit 4979869

Browse files
committed
fix(autocomplete): panel not resetting properly in certain scenarios
This fixes a regression caused by the changes from 880e6d5 which prevented the panel from closing and reopening in certain cases. Fixes #5910.
1 parent 23ec30f commit 4979869

File tree

2 files changed

+40
-10
lines changed

2 files changed

+40
-10
lines changed

src/lib/autocomplete/autocomplete-trigger.ts

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -198,23 +198,22 @@ export class MdAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
198198

199199
/** Closes the autocomplete suggestion panel. */
200200
closePanel(): void {
201-
if (!this.panelOpen) {
202-
return;
203-
}
204-
205201
if (this._overlayRef && this._overlayRef.hasAttached()) {
206202
this._overlayRef.detach();
207203
this._closingActionsSubscription.unsubscribe();
208204
}
209205

210-
this._panelOpen = false;
211206
this._resetPlaceholder();
212207

213-
// We need to trigger change detection manually, because
214-
// `fromEvent` doesn't seem to do it at the proper time.
215-
// This ensures that the placeholder is reset when the
216-
// user clicks outside.
217-
this._changeDetectorRef.detectChanges();
208+
if (this._panelOpen) {
209+
this._panelOpen = false;
210+
211+
// We need to trigger change detection manually, because
212+
// `fromEvent` doesn't seem to do it at the proper time.
213+
// This ensures that the placeholder is reset when the
214+
// user clicks outside.
215+
this._changeDetectorRef.detectChanges();
216+
}
218217
}
219218

220219
/**

src/lib/autocomplete/autocomplete.spec.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,6 +344,37 @@ describe('MdAutocomplete', () => {
344344
});
345345
}));
346346

347+
it('should toggle the visibility when typing and closing the panel', fakeAsync(() => {
348+
fixture.componentInstance.trigger.openPanel();
349+
tick();
350+
fixture.detectChanges();
351+
352+
expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList)
353+
.toContain('mat-autocomplete-visible', 'Expected panel to be visible.');
354+
355+
typeInElement('x', input);
356+
fixture.detectChanges();
357+
tick();
358+
fixture.detectChanges();
359+
360+
expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList)
361+
.toContain('mat-autocomplete-hidden', 'Expected panel to be hidden.');
362+
363+
fixture.componentInstance.trigger.closePanel();
364+
fixture.detectChanges();
365+
366+
fixture.componentInstance.trigger.openPanel();
367+
fixture.detectChanges();
368+
369+
typeInElement('al', input);
370+
fixture.detectChanges();
371+
tick();
372+
fixture.detectChanges();
373+
374+
expect(overlayContainerElement.querySelector('.mat-autocomplete-panel')!.classList)
375+
.toContain('mat-autocomplete-visible', 'Expected panel to be visible.');
376+
}));
377+
347378
});
348379

349380
it('should have the correct text direction in RTL', () => {

0 commit comments

Comments
 (0)