fix(overlay): dimension not updated after init

Author: rafaelss95

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

@@ -141,6 +141,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.width).toEqual('250px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.width = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.width).toEqual('500px');
     });
 
     it('should set the height', () => {
@@ -150,6 +159,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.height).toEqual('100vh');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.height = '50vh';
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.height).toEqual('50vh');
     });
 
     it('should set the min width', () => {
@@ -159,6 +177,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.minWidth).toEqual('250px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.minWidth = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.minWidth).toEqual('500px');
     });
 
     it('should set the min height', () => {
@@ -168,6 +195,15 @@ describe('Overlay directives', () => {
 
       const pane = overlayContainerElement.children[0] as HTMLElement;
       expect(pane.style.minHeight).toEqual('500px');
+
+      fixture.componentInstance.isOpen = false;
+      fixture.detectChanges();
+
+      fixture.componentInstance.minHeight = 500;
+      fixture.componentInstance.isOpen = true;
+      fixture.detectChanges();
+
+      expect(pane.style.minHeight).toEqual('500px');
     });
 
     it('should create the backdrop if designated', () => {

src/cdk/overlay/overlay-directives.ts

@@ -336,6 +336,14 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _attachOverlay() {
     if (!this._overlayRef) {
       this._createOverlay();
+    } else {
+      // Update the overlay size, in case the directive's inputs have changed
+      this._overlayRef.updateSize({
+        width: this.width,
+        minWidth: this.minWidth,
+        height: this.height,
+        minHeight: this.minHeight,
+      });
     }
 
     this._position.withDirection(this.dir);

src/lib/paginator/paginator.spec.ts

@@ -23,6 +23,7 @@ describe('MatPaginator', () => {
         MatPaginatorWithoutPageSizeApp,
         MatPaginatorWithoutOptionsApp,
         MatPaginatorWithoutInputsApp,
+        MatPaginatorWithStringValues
       ],
       providers: [MatPaginatorIntl]
     }).compileComponents();
@@ -251,6 +252,18 @@ describe('MatPaginator', () => {
     fixture.detectChanges();
     expect(fixture.nativeElement.querySelector('.mat-select')).toBeNull();
   });
+
+ it('should handle the number inputs being passed in as strings', () => {
+    const withStringFixture = TestBed.createComponent(MatPaginatorWithStringValues);
+    const withStringPaginator = withStringFixture.componentInstance.paginator;
+
+    withStringFixture.detectChanges();
+
+    expect(withStringPaginator.pageIndex).toEqual(0);
+    expect(withStringPaginator.length).toEqual(100);
+    expect(withStringPaginator.pageSize).toEqual(10);
+    expect(withStringPaginator.pageSizeOptions).toEqual([5, 10, 25, 100]);
+  });
 });
 
 function getPreviousButton(fixture: ComponentFixture<any>) {
@@ -264,10 +277,10 @@ function getNextButton(fixture: ComponentFixture<any>) {
 @Component({
   template: `
     <mat-paginator [pageIndex]="pageIndex"
-                  [pageSize]="pageSize"
-                  [pageSizeOptions]="pageSizeOptions"
-                  [length]="length"
-                  (page)="latestPageEvent = $event">
+                   [pageSize]="pageSize"
+                   [pageSizeOptions]="pageSizeOptions"
+                   [length]="length"
+                   (page)="latestPageEvent = $event">
     </mat-paginator>
   `,
 })
@@ -312,3 +325,16 @@ class MatPaginatorWithoutPageSizeApp {
 class MatPaginatorWithoutOptionsApp {
   @ViewChild(MatPaginator) paginator: MatPaginator;
 }
+
+@Component({
+  template: `
+    <mat-paginator pageIndex="0"
+                   pageSize="10"
+                   [pageSizeOptions]="['5', '10', '25', '100']"
+                   length="100">
+    </mat-paginator>
+  `
+  })
+class MatPaginatorWithStringValues {
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+}

src/lib/paginator/paginator.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -64,7 +65,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   @Input()
   get pageIndex(): number { return this._pageIndex; }
   set pageIndex(pageIndex: number) {
-    this._pageIndex = pageIndex;
+    this._pageIndex = coerceNumberProperty(pageIndex);
     this._changeDetectorRef.markForCheck();
   }
   _pageIndex: number = 0;
@@ -73,7 +74,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   @Input()
   get length(): number { return this._length; }
   set length(length: number) {
-    this._length = length;
+    this._length = coerceNumberProperty(length);
     this._changeDetectorRef.markForCheck();
   }
   _length: number = 0;
@@ -82,7 +83,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   @Input()
   get pageSize(): number { return this._pageSize; }
   set pageSize(pageSize: number) {
-    this._pageSize = pageSize;
+    this._pageSize = coerceNumberProperty(pageSize);
     this._updateDisplayedPageSizeOptions();
   }
   private _pageSize: number;
@@ -91,7 +92,7 @@ export class MatPaginator implements OnInit, OnDestroy {
   @Input()
   get pageSizeOptions(): number[] { return this._pageSizeOptions; }
   set pageSizeOptions(pageSizeOptions: number[]) {
-    this._pageSizeOptions = pageSizeOptions;
+    this._pageSizeOptions = (pageSizeOptions || []).map(p => coerceNumberProperty(p));
     this._updateDisplayedPageSizeOptions();
   }
   private _pageSizeOptions: number[] = [];

src/lib/select/select.spec.ts

@@ -645,6 +645,33 @@ describe('MatSelect', () => {
         expect(() => fixture.componentInstance.select.open()).not.toThrow();
       });
 
+      it('should set the width of the overlay based on the trigger and resize', fakeAsync(() => {
+        trigger.style.width = '200px';
+        fixture.detectChanges();
+        flush();
+
+        trigger.click();
+        fixture.detectChanges();
+        const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+        expect(pane.style.minWidth).toBe('200px',
+            'Expected pane minWidth to be 200px initially');
+
+        const backdrop =
+            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+        backdrop.click();
+        fixture.detectChanges();
+        flush();
+
+        trigger.style.width = '400px';
+        fixture.detectChanges();
+        flush();
+
+        trigger.click();
+        fixture.detectChanges();
+        expect(pane.style.minWidth).toBe('400px',
+          'Expected pane minWidth to be 400px after resize');
+      }));
+
       it('should open the panel when trigger is clicked', fakeAsync(() => {
         trigger.click();
         fixture.detectChanges();