From 78f55eaf6e11b2a0b8ef536c2a7c00d44ef4f729 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 22 Feb 2019 16:05:15 +0100
Subject: [PATCH] fix(select): update panel width if the viewport size changes
 (#14932)

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 3d01e8ae59e..8c39d7e03ba 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 fca5c8a4a2b..d885c277236 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() {