fix(autocomplete): not resetting completely when overlay is detached …

…externally (#8515)

Fixes the autocomplete not closing correctly when its `OverlayRef` is detached externally (e.g. by a scroll strategy).

src/lib/autocomplete/autocomplete-trigger.ts

@@ -13,7 +13,6 @@ import {
   OverlayRef,
   OverlayConfig,
   PositionStrategy,
-  RepositionScrollStrategy,
   ScrollStrategy,
 } from '@angular/cdk/overlay';
 import {TemplatePortal} from '@angular/cdk/portal';
@@ -67,7 +66,7 @@ export const MAT_AUTOCOMPLETE_SCROLL_STRATEGY =
 
 /** @docs-private */
 export function MAT_AUTOCOMPLETE_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
-    () => RepositionScrollStrategy {
+    () => ScrollStrategy {
   return () => overlay.scrollStrategies.reposition();
 }
 
@@ -195,7 +194,8 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       this.optionSelections,
       this.autocomplete._keyManager.tabOut.pipe(filter(() => this._panelOpen)),
       this._escapeEventStream,
-      this._outsideClickStream
+      this._outsideClickStream,
+      this._overlayRef ? this._overlayRef.detachments() : observableOf()
     );
   }
 

src/lib/autocomplete/autocomplete.spec.ts

@@ -1,6 +1,6 @@
 import {Direction, Directionality} from '@angular/cdk/bidi';
 import {DOWN_ARROW, ENTER, ESCAPE, SPACE, UP_ARROW, TAB} from '@angular/cdk/keycodes';
-import {OverlayContainer} from '@angular/cdk/overlay';
+import {OverlayContainer, Overlay} from '@angular/cdk/overlay';
 import {map} from 'rxjs/operators/map';
 import {startWith} from 'rxjs/operators/startWith';
 import {ScrollDispatcher} from '@angular/cdk/scrolling';
@@ -45,6 +45,7 @@ import {
   MatAutocompleteModule,
   MatAutocompleteSelectedEvent,
   MatAutocompleteTrigger,
+  MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
 } from './index';
 
 
@@ -1519,6 +1520,29 @@ describe('MatAutocomplete', () => {
     }));
 
 
+    it('should reset correctly when closed programmatically', async(() => {
+      TestBed.overrideProvider(MAT_AUTOCOMPLETE_SCROLL_STRATEGY, {
+        useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(),
+        deps: [Overlay]
+      });
+
+      const fixture = TestBed.createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+      const trigger = fixture.componentInstance.trigger;
+
+      trigger.openPanel();
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+
+        scrolledSubject.next();
+        fixture.detectChanges();
+
+        expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+      });
+    }));
+
   });
 
   it('should have correct width when opened', () => {