From 030505f7e38432571fda3ee6ff55abae06491753 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 23 Jan 2019 22:10:08 +0100
Subject: [PATCH] fix(select): update panel width if the viewport size changes

Updates the width of the select panel if the width of the viewport has changed. This handles cases like the user switch their device's orientation.

Fixes #7811.
---
 src/lib/select/select.spec.ts | 21 +++++++++++++++++++++
 src/lib/select/select.ts      |  9 +++++++++
 2 files changed, 30 insertions(+)

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() {