.

Author: tinayuangao

src/cdk/overlay/overlay-directives.ts

@@ -362,12 +362,10 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       this._overlayRef.attach(this._templatePortal);
       this.attach.emit();
     }
-
-    if (this.hasBackdrop) {
-      this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {
-        this.backdropClick.emit(event);
-      });
-    }
+    
+    this._backdropSubscription = this._overlayRef.backdropClicks().subscribe(event => {
+      this.backdropClick.emit(event);
+    });
   }
 
   /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */

src/cdk/overlay/overlay-ref.ts

@@ -111,7 +111,7 @@ export class OverlayRef implements PortalOutlet {
     this._togglePointerEvents(true);
 
     if (this._config.hasBackdrop) {
-      this._attachBackdrop();
+      this.attachBackdrop();
     }
 
     if (this._config.panelClass) {
@@ -200,6 +200,10 @@ export class OverlayRef implements PortalOutlet {
     return this._portalOutlet.hasAttached();
   }
 
+  backdropClicks() {
+    return this._backdropClick;
+  }
+
   /** Gets an observable that emits when the backdrop has been clicked. */
   backdropClick(): Observable<MouseEvent> {
     return this._backdropClick.asObservable();
@@ -280,7 +284,7 @@ export class OverlayRef implements PortalOutlet {
   }
 
   /** Attaches a backdrop for this overlay. */
-  private _attachBackdrop() {
+  attachBackdrop() {
     const showingClass = 'cdk-overlay-backdrop-showing';
 
     this._backdropElement = this._document.createElement('div');

src/lib/select/select.html

@@ -18,7 +18,6 @@
 <ng-template
   cdk-connected-overlay
   cdkConnectedOverlayLockPosition
-  cdkConnectedOverlayHasBackdrop
   cdkConnectedOverlayOpen
   cdkConnectedOverlayDisableClose
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"

src/lib/select/select.spec.ts

@@ -395,7 +395,6 @@ describe('MatSelect', () => {
         it('should open the panel when pressing a vertical arrow key on a closed multiple select',
           fakeAsync(() => {
             fixture.destroy();
-            flush();
 
             const multiFixture = TestBed.createComponent(MultiSelect);
             const instance = multiFixture.componentInstance;
@@ -421,7 +420,6 @@ describe('MatSelect', () => {
         it('should open the panel when pressing a horizontal arrow key on closed multiple select',
           fakeAsync(() => {
             fixture.destroy();
-            flush();
 
             const multiFixture = TestBed.createComponent(MultiSelect);
             const instance = multiFixture.componentInstance;
@@ -442,7 +440,6 @@ describe('MatSelect', () => {
 
         it('should do nothing when typing on a closed multi-select', fakeAsync(() => {
           fixture.destroy();
-          flush();
 
           const multiFixture = TestBed.createComponent(MultiSelect);
           const instance = multiFixture.componentInstance;
@@ -488,7 +485,6 @@ describe('MatSelect', () => {
         it('should not shift focus when the selected options are updated programmatically ' +
             'in a multi select', fakeAsync(() => {
           fixture.destroy();
-          flush();
 
           const multiFixture = TestBed.createComponent(MultiSelect);
 
@@ -537,7 +533,6 @@ describe('MatSelect', () => {
 
         it('should not open a multiple select when tabbing through', fakeAsync(() => {
           fixture.destroy();
-          flush();
 
           const multiFixture = TestBed.createComponent(MultiSelect);
 
@@ -556,7 +551,6 @@ describe('MatSelect', () => {
         it('should toggle the next option when pressing shift + DOWN_ARROW on a multi-select',
           fakeAsync(() => {
             fixture.destroy();
-            flush();
 
             const multiFixture = TestBed.createComponent(MultiSelect);
             const event = createKeyboardEvent('keydown', DOWN_ARROW);
@@ -585,7 +579,6 @@ describe('MatSelect', () => {
         it('should toggle the previous option when pressing shift + UP_ARROW on a multi-select',
           fakeAsync(() => {
             fixture.destroy();
-            flush()
 
             const multiFixture = TestBed.createComponent(MultiSelect);
             const event = createKeyboardEvent('keydown', UP_ARROW);
@@ -653,7 +646,6 @@ describe('MatSelect', () => {
 
         it('should set `aria-multiselectable` to true on multi-select instances', fakeAsync(() => {
           fixture.destroy();
-          flush();
 
           const multiFixture = TestBed.createComponent(MultiSelect);
 
@@ -740,7 +732,6 @@ describe('MatSelect', () => {
         it('should restore focus to the trigger after selecting an option in multi-select mode',
           fakeAsync(() => {
             fixture.destroy();
-            flush();
 
             const multiFixture = TestBed.createComponent(MultiSelect);
             const instance = multiFixture.componentInstance;

src/lib/select/select.ts

@@ -762,7 +762,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       this._changeDetectorRef.detectChanges();
       this._calculateOverlayOffsetX();
       this.panel.nativeElement.scrollTop = this._scrollTop;
-      this._hideBackdrop();
     });
   }
 
@@ -780,6 +779,8 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   private _showBackdrop() {
     if (this.overlayDir.overlayRef.backdropElement) {
       this.overlayDir.overlayRef.backdropElement.style.display = 'block';
+    } else {
+      this.overlayDir.overlayRef.attachBackdrop();
     }
   }