.

Author: tinayuangao

src/cdk/overlay/overlay-directives.spec.ts

@@ -120,9 +120,9 @@ describe('Overlay directives', () => {
         'Expected overlay to have been detached.');
   });
 
-  it('should not close when pressing escape when changed the setting of "detachOnEscape"', () => {
+  it('should not close when pressing escape when changed the setting of "disableClose"', () => {
     fixture.componentInstance.isOpen = true;
-    fixture.componentInstance.detachOnEscape = false;
+    fixture.componentInstance.disableClose = true;
     fixture.detectChanges();
 
     dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
@@ -479,7 +479,7 @@ describe('Overlay directives', () => {
             [cdkConnectedOverlayFlexibleDimensions]="flexibleDimensions"
             [cdkConnectedOverlayGrowAfterOpen]="growAfterOpen"
             [cdkConnectedOverlayPush]="push"
-            [cdkConnectedOverlayDetachOnEscape]="detachOnEscape"
+            [cdkConnectedOverlayDisableClose]="disableClose"
             cdkConnectedOverlayBackdropClass="mat-test-class"
             (backdropClick)="backdropClickHandler($event)"
             [cdkConnectedOverlayOffsetX]="offsetX"
@@ -511,7 +511,7 @@ class ConnectedOverlayDirectiveTest {
   flexibleDimensions: boolean;
   growAfterOpen: boolean;
   push: boolean;
-  detachOnEscape: boolean = true;
+  disableClose: boolean = false;
   backdropClickHandler = jasmine.createSpy('backdropClick handler');
   positionChangeHandler = jasmine.createSpy('positionChangeHandler');
   positionOverrides: ConnectionPositionPair[];

src/cdk/overlay/overlay-directives.ts

@@ -114,6 +114,8 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _offsetX: number;
   private _offsetY: number;
   private _position: FlexibleConnectedPositionStrategy;
+  private _disableClose = false;
+  private _open = false;
 
   /** Origin for the connected overlay. */
   @Input('cdkConnectedOverlayOrigin') origin: CdkOverlayOrigin;
@@ -165,11 +167,15 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   @Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy =
       this._scrollStrategy();
 
-  /** Strategy to detach the overlay panel on ESCAPE keydown */
-  @Input('cdkConnectedOverlayDetachOnEscape') detachOnEscape: boolean = true;
+  /** Whether the overlay closes when the user pressed the Escape key. */
+  @Input('cdkConnectedOverlayDisableClose')
+  get disableClose() { return this._disableClose; }
+  set disableClose(value: any) { this._disableClose = coerceBooleanProperty(value); }
 
   /** Whether the overlay is open. */
-  @Input('cdkConnectedOverlayOpen') open: boolean = false;
+  @Input('cdkConnectedOverlayOpen')
+  get open() { return this._open; }
+  set open(value: any) { this._open = coerceBooleanProperty(value); }
 
   /** Whether or not the overlay should attach a backdrop. */
   @Input('cdkConnectedOverlayHasBackdrop')
@@ -338,7 +344,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
       this._createOverlay();
 
       this._overlayRef!.keydownEvents().subscribe((event: KeyboardEvent) => {
-        if (this.detachOnEscape && event.keyCode === ESCAPE) {
+        if (!this.disableClose && event.keyCode === ESCAPE) {
           this._detachOverlay();
         }
       });

src/lib/select/select.html

@@ -19,14 +19,14 @@
   cdk-connected-overlay
   cdkConnectedOverlayLockPosition
   cdkConnectedOverlayHasBackdrop
-  [cdkConnectedOverlayOpen]="true"
+  cdkConnectedOverlayOpen
+  cdkConnectedOverlayDisableClose
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
   [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
   [cdkConnectedOverlayOrigin]="origin"
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayMinWidth]="_triggerRect?.width"
   [cdkConnectedOverlayOffsetY]="_offsetY"
-  [cdkConnectedOverlayDetachOnEscape]="false"
   (backdropClick)="close()"
   (attach)="_onAttached()"
   (detach)="close()">
@@ -35,7 +35,7 @@
     class="mat-select-panel {{ _getPanelTheme() }}"
     [class.cdk-visually-hidden]="!panelOpen"
     [ngClass]="panelClass"
-    [@transformPanel]="panelOpen ? (multiple ? 'showing-multiple' : 'showing') : 'void'"
+    [@transformPanel]="_transformPanel"
     (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
     [style.transformOrigin]="_transformOrigin"
     [class.mat-select-panel-done-animating]="_panelDoneAnimating"

src/lib/select/select.spec.ts

@@ -412,6 +412,10 @@ describe('MatSelect', () => {
             expect(instance.select.panelOpen).toBe(true, 'Expected panel to be open.');
             expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
             expect(event.defaultPrevented).toBe(true, 'Expected default to be prevented.');
+
+            const options =
+                overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+            expect(options.length).toEqual(8, 'Expect select has 8 options');
           }));
 
         it('should open the panel when pressing a horizontal arrow key on closed multiple select',
@@ -775,6 +779,10 @@ describe('MatSelect', () => {
               overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
         }));
 
+        it('should have correct number of options', fakeAsync(() => {
+          expect(options.length).toEqual(8, 'Expect select has 8 options');
+        }));
+
         it('should set the role of mat-option to option', fakeAsync(() => {
           expect(options[0].getAttribute('role')).toEqual('option');
           expect(options[1].getAttribute('role')).toEqual('option');

src/lib/select/select.ts

@@ -513,14 +513,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       this._resetOptions();
       this._initializeSelection();
     });
-
-    this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();
-
-    // Defer setting the value in order to void the "Expression has changed after it was checked"
-    // errors from Angular
-    Promise.resolve().then(() => {
-      this._initializePanel();
-    });
   }
 
   ngDoCheck() {
@@ -558,31 +550,26 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     // Note: The computed font-size will be a string pixel value (e.g. "16px").
     // `parseInt` ignores the trailing 'px' and converts this to a number.
     this._triggerFontSize = parseInt(getComputedStyle(this.trigger.nativeElement)['font-size']);
+    if (this._triggerFontSize && this.overlayDir.overlayRef &&
+      this.overlayDir.overlayRef.overlayElement) {
+      this.overlayDir.overlayRef.overlayElement.style.fontSize = `${this._triggerFontSize}px`;
+    }
 
     this._panelOpen = true;
     this._keyManager.withHorizontalOrientation(null);
     this._calculateOverlayPosition();
     this._highlightCorrectOption();
-    this._showBackdrop();
-    this.overlayDir.overlayRef.overlayElement.style.minWidth = `${this._triggerRect.width}px`;
+
+    this.overlayDir.overlayRef.updateSize({minWidth: `${this._triggerRect.width}px`});
     if (this._dir) {
       this.overlayDir.overlayRef.setDirection(this._dir);
     }
-    this._changeDetectorRef.markForCheck();
-
-    // Set the font size on the panel element once it exists.
-    this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
-      if (this._triggerFontSize && this.overlayDir.overlayRef &&
-        this.overlayDir.overlayRef.overlayElement) {
-        this.overlayDir.overlayRef.overlayElement.style.fontSize = `${this._triggerFontSize}px`;
-      }
-
-      this.overlayDir.overlayRef.updatePosition();
+    this.overlayDir.overlayRef.updatePosition();
 
-      this._changeDetectorRef.detectChanges();
-      this._calculateOverlayOffsetX();
-      this.panel.nativeElement.scrollTop = this._scrollTop;
-    });
+    this._changeDetectorRef.detectChanges();
+    this._calculateOverlayOffsetX();
+    this.panel.nativeElement.scrollTop = this._scrollTop;
+    this._showBackdrop();
   }
 
   /** Closes the overlay panel and focuses the host element. */
@@ -672,6 +659,12 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     return this._selectionModel.selected[0].viewValue;
   }
 
+  /** The animation transform for overlay panel. */
+  get _transformPanel() {
+    return this.panelOpen ? (this.multiple ? 'showing-multiple' : 'showing') : 'void'
+  }
+
+
   /** Whether the element is in RTL mode. */
   _isRtl(): boolean {
     return this._dir ? this._dir.value === 'rtl' : false;
@@ -769,6 +762,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       this._changeDetectorRef.detectChanges();
       this._calculateOverlayOffsetX();
       this.panel.nativeElement.scrollTop = this._scrollTop;
+      this._hideBackdrop();
     });
   }
 
@@ -796,31 +790,6 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
     }
   }
 
-  /** Initialize the overlay panel, and make it invisible. */
-  private _initializePanel() {
-    if (this.disabled || !this.options || !this.options.length) {
-      return;
-    }
-
-    this._triggerRect = this.trigger.nativeElement.getBoundingClientRect();
-    // Note: The computed font-size will be a string pixel value (e.g. "16px").
-    // `parseInt` ignores the trailing 'px' and converts this to a number.
-    this._triggerFontSize = parseInt(getComputedStyle(this.trigger.nativeElement)['font-size']);
-
-    this._calculateOverlayPosition();
-    this._changeDetectorRef.markForCheck();
-
-    // Set the font size on the panel element once it exists.
-    this._ngZone.onStable.asObservable().pipe(take(1)).subscribe(() => {
-      if (this._triggerFontSize && this.overlayDir.overlayRef &&
-        this.overlayDir.overlayRef.overlayElement) {
-        this.overlayDir.overlayRef.overlayElement.style.fontSize = `${this._triggerFontSize}px`;
-      }
-
-      this._hideBackdrop();
-    });
-  }
-
   private _initializeSelection(): void {
     // Defer setting the value in order to avoid the "Expression
     // has changed after it was checked" errors from Angular.