From bc6b5fb3c43064ed9795d76ea1ffd31622841129 Mon Sep 17 00:00:00 2001
From: Esteban Marin <estebanmarin@gmx.ch>
Date: Tue, 5 Mar 2019 16:48:51 +0100
Subject: [PATCH] fix(select): Fixes width-issue of select option panel in IE
 (#11801)

* fix(select): Fixes width-issue of select option panel in IE11

Fixes the select options panel width not matching the select width in IE11

Fixes #11609

* code cleanup

* fix leave-animation of select panel not working due to https://github.com/angular/angular/issues/23302
---
 src/dev-app/select/select-demo.html | 10 +++++++++-
 src/dev-app/select/select-demo.scss |  4 ++++
 src/dev-app/select/select-demo.ts   |  1 +
 src/lib/select/select-animations.ts | 13 +++++++++++++
 src/lib/select/select.html          | 23 ++++++++++++-----------
 src/lib/select/select.scss          |  6 ++++++
 src/lib/select/select.spec.ts       | 24 ++++++++++++++++++++++++
 src/lib/select/select.ts            |  1 +
 8 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/src/dev-app/select/select-demo.html b/src/dev-app/select/select-demo.html
index 9b7061c9d63..abc808b618c 100644
--- a/src/dev-app/select/select-demo.html
+++ b/src/dev-app/select/select-demo.html
@@ -168,7 +168,8 @@ Space above cards: <input type="number" [formControl]="topHeightCtrl">
   <mat-card>
     <mat-card-subtitle>ngModel</mat-card-subtitle>
 
-    <mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme">
+    <mat-form-field [floatLabel]="floatLabel" [color]="drinksTheme"
+                    [class.demo-drinks-width-large]="drinksWidth === '400px'">
       <mat-label>Drink</mat-label>
       <mat-select [(ngModel)]="currentDrink" [required]="drinksRequired"
         [disabled]="drinksDisabled" #drinkControl="ngModel">
@@ -193,6 +194,13 @@ Space above cards: <input type="number" [formControl]="topHeightCtrl">
         <option value="never">Never</option>
       </select>
     </p>
+    <p>
+      <label for="drinks-width">Width:</label>
+      <select [(ngModel)]="drinksWidth" id="drinks-width">
+        <option value="default">Default</option>
+        <option value="400px">400px</option>
+      </select>
+    </p>
     <p>
       <label for="drinks-theme">Theme:</label>
       <select [(ngModel)]="drinksTheme" id="drinks-theme">
diff --git a/src/dev-app/select/select-demo.scss b/src/dev-app/select/select-demo.scss
index 996f1e1411f..bdd01862529 100644
--- a/src/dev-app/select/select-demo.scss
+++ b/src/dev-app/select/select-demo.scss
@@ -11,6 +11,10 @@
     vertical-align: bottom;
     padding-right: 0.25em;
   }
+
+  .demo-drinks-width-large {
+    width: 400px;
+  }
 }
 
 .demo-card {
diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts
index dabde38fca5..de7d21a1eff 100644
--- a/src/dev-app/select/select-demo.ts
+++ b/src/dev-app/select/select-demo.ts
@@ -41,6 +41,7 @@ export class SelectDemo {
   currentAppearanceValue: string | null;
   latestChangeEvent: MatSelectChange;
   floatLabel = 'auto';
+  drinksWidth = 'default';
   foodControl = new FormControl('pizza-1');
   topHeightCtrl = new FormControl(0);
   drinksTheme = 'primary';
diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts
index 4327e62e05a..a7c3337a2eb 100644
--- a/src/lib/select/select-animations.ts
+++ b/src/lib/select/select-animations.ts
@@ -8,7 +8,9 @@
 
 import {
   animate,
+  animateChild,
   AnimationTriggerMetadata,
+  query,
   state,
   style,
   transition,
@@ -23,9 +25,20 @@ import {
  * @docs-private
  */
 export const matSelectAnimations: {
+  readonly transformPanelWrap: AnimationTriggerMetadata;
   readonly transformPanel: AnimationTriggerMetadata;
   readonly fadeInContent: AnimationTriggerMetadata;
 } = {
+  /**
+   * This animation ensures the select's overlay panel animation (transformPanel) is called when
+   * closing the select.
+   * This is needed due to https://github.com/angular/angular/issues/23302
+   */
+  transformPanelWrap: trigger('transformPanelWrap', [
+      transition('* => void', query('@transformPanel', [animateChild()],
+          {optional: true}))
+  ]),
+
   /**
    * This animation transforms the select's overlay panel on and off the page.
    *
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index b0d9f65e361..bd0a4522c61 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -29,16 +29,17 @@
   (backdropClick)="close()"
   (attach)="_onAttached()"
   (detach)="close()">
-
-  <div
-    #panel
-    class="mat-select-panel {{ _getPanelTheme() }}"
-    [ngClass]="panelClass"
-    [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
-    (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
-    [style.transformOrigin]="_transformOrigin"
-    [style.font-size.px]="_triggerFontSize"
-    (keydown)="_handleKeydown($event)">
-    <ng-content></ng-content>
+  <div class="mat-select-panel-wrap" [@transformPanelWrap]>
+    <div
+      #panel
+      class="mat-select-panel {{ _getPanelTheme() }}"
+      [ngClass]="panelClass"
+      [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
+      (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
+      [style.transformOrigin]="_transformOrigin"
+      [style.font-size.px]="_triggerFontSize"
+      (keydown)="_handleKeydown($event)">
+      <ng-content></ng-content>
+    </div>
   </div>
 </ng-template>
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index fcf98c9261d..ef021f3cac7 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -83,6 +83,12 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   margin: 0 $mat-select-arrow-margin;
 }
 
+.mat-select-panel-wrap {
+  // Prevents width-issues of mat-select-panel with width: calc(100% + 32px)
+  // in IE11 due to the parents display: flex;
+  flex-basis: 100%;
+}
+
 .mat-select-panel {
   @include mat-menu-base();
   padding-top: 0;
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 9406b158055..ef529fdc232 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -1019,6 +1019,29 @@ describe('MatSelect', () => {
 
         const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
         expect(pane.style.minWidth).toBe('200px');
+
+        const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel');
+        const scrollContainerWidth = scrollContainer!.getBoundingClientRect().width;
+        expect(scrollContainerWidth).toBeCloseTo(200 + 32, 0,
+            'Expected select panel width to be 100% + 32px of the select field trigger');
+      }));
+
+      it('should set the width of the overlay based on a larger trigger width',
+        fakeAsync(() => {
+            // the trigger width exceeds the minimum width of the mat-select-panel
+          trigger.style.width = '400px';
+
+          trigger.click();
+          fixture.detectChanges();
+          flush();
+
+          const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+          expect(pane.style.minWidth).toBe('400px');
+
+          const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-select-panel');
+          const scrollContainerWidth = scrollContainer!.getBoundingClientRect().width;
+          expect(scrollContainerWidth).toBeCloseTo(400 + 32, 0,
+              'Expected select panel width to be 100% + 32px of the select field trigger');
       }));
 
       it('should update the width of the panel on resize', fakeAsync(() => {
@@ -3146,6 +3169,7 @@ describe('MatSelect', () => {
 
         checkTriggerAlignedWithOption(7, groupFixture.componentInstance.select);
       }));
+
     });
 
     describe('limited space to open vertically', () => {
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 1a772f5e266..0c5b31e8ea1 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -216,6 +216,7 @@ export class MatSelectTrigger {}
     '(blur)': '_onBlur()',
   },
   animations: [
+    matSelectAnimations.transformPanelWrap,
     matSelectAnimations.transformPanel
   ],
   providers: [