diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts index b6b5526d1192..a4be59a9b659 100644 --- a/src/lib/select/select.spec.ts +++ b/src/lib/select/select.spec.ts @@ -1006,6 +1006,27 @@ describe('MatSelect', () => { expect(pane.style.minWidth).toBe('200px'); })); + it('should update the width of the panel on resize', fakeAsync(() => { + trigger.style.width = '300px'; + + trigger.click(); + fixture.detectChanges(); + flush(); + + const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement; + const initialWidth = parseInt(pane.style.minWidth || '0'); + + expect(initialWidth).toBeGreaterThan(0); + + trigger.style.width = '400px'; + dispatchFakeEvent(window, 'resize'); + fixture.detectChanges(); + tick(1000); + fixture.detectChanges(); + + expect(parseInt(pane.style.minWidth || '0')).toBeGreaterThan(initialWidth); + })); + it('should not attempt to open a select that does not have any options', fakeAsync(() => { fixture.componentInstance.foods = []; fixture.detectChanges(); diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 576dead9df89..5a3a11096941 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -527,6 +527,15 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, this._changeDetectorRef.markForCheck(); } }); + + this._viewportRuler.change() + .pipe(takeUntil(this._destroy)) + .subscribe(() => { + if (this._panelOpen) { + this._triggerRect = this.trigger.nativeElement.getBoundingClientRect(); + this._changeDetectorRef.markForCheck(); + } + }); } ngAfterContentInit() {