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

@@ -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();

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