From 567c06387f535754901dd2be2f85b782b23fa396 Mon Sep 17 00:00:00 2001
From: Esteban Marin <estebanmarin@gmx.ch>
Date: Fri, 15 Jun 2018 17:20:26 +0200
Subject: [PATCH 1/3] 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
---
 src/demo-app/select/select-demo.html | 10 ++++++++-
 src/demo-app/select/select-demo.scss |  4 ++++
 src/demo-app/select/select-demo.ts   |  1 +
 src/lib/select/select.html           | 33 ++++++++++++++--------------
 src/lib/select/select.scss           |  6 +++++
 src/lib/select/select.spec.ts        | 22 +++++++++++++++++++
 6 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/demo-app/select/select-demo.html b/src/demo-app/select/select-demo.html
index f70788bb70b9..69accef7ff1f 100644
--- a/src/demo-app/select/select-demo.html
+++ b/src/demo-app/select/select-demo.html
@@ -6,7 +6,8 @@
   <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">
@@ -31,6 +32,13 @@
         <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/demo-app/select/select-demo.scss b/src/demo-app/select/select-demo.scss
index f87b50cbe96b..f7d5e1c9316c 100644
--- a/src/demo-app/select/select-demo.scss
+++ b/src/demo-app/select/select-demo.scss
@@ -11,4 +11,8 @@
     vertical-align: bottom;
     padding-right: 0.25em;
   }
+
+  .demo-drinks-width-large {
+    width: 400px;
+  }
 }
diff --git a/src/demo-app/select/select-demo.ts b/src/demo-app/select/select-demo.ts
index b399954f9b39..a41a9b48ea31 100644
--- a/src/demo-app/select/select-demo.ts
+++ b/src/demo-app/select/select-demo.ts
@@ -31,6 +31,7 @@ export class SelectDemo {
   currentDigimon: string;
   latestChangeEvent: MatSelectChange;
   floatLabel = 'auto';
+  drinksWidth = 'default';
   foodControl = new FormControl('pizza-1');
   topHeightCtrl = new FormControl(0);
   drinksTheme = 'primary';
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index f22f93087785..f1212286efc3 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -29,23 +29,24 @@
   (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"
-    [class.mat-select-panel-done-animating]="_panelDoneAnimating"
-    [style.font-size.px]="_triggerFontSize"
-    (keydown)="_handleKeydown($event)">
-
+  <div class="mat-select-panel-wrap">
     <div
-      class="mat-select-content"
-      [@fadeInContent]="'showing'"
-      (@fadeInContent.done)="_onFadeInDone()">
-      <ng-content></ng-content>
+      #panel
+      class="mat-select-panel {{ _getPanelTheme() }}"
+      [ngClass]="panelClass"
+      [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
+      (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
+      [style.transformOrigin]="_transformOrigin"
+      [class.mat-select-panel-done-animating]="_panelDoneAnimating"
+      [style.font-size.px]="_triggerFontSize"
+      (keydown)="_handleKeydown($event)">
+
+      <div
+        class="mat-select-content"
+        [@fadeInContent]="'showing'"
+        (@fadeInContent.done)="_onFadeInDone()">
+        <ng-content></ng-content>
+      </div>
     </div>
   </div>
 </ng-template>
diff --git a/src/lib/select/select.scss b/src/lib/select/select.scss
index 10bc4734cd19..5ec405e32410 100644
--- a/src/lib/select/select.scss
+++ b/src/lib/select/select.scss
@@ -67,6 +67,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(8);
   padding-top: 0;
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index ceb58b2de00c..a3c46f5e5f0d 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -910,6 +910,27 @@ 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 the trigger width exceeding the panel minimum width', fakeAsync(() => {
+          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 not attempt to open a select that does not have any options', fakeAsync(() => {
@@ -3002,6 +3023,7 @@ describe('MatSelect', () => {
 
         checkTriggerAlignedWithOption(7, groupFixture.componentInstance.select);
       }));
+
     });
 
     describe('limited space to open vertically', () => {

From 021bdba29ba3e49bdd435bac3a5428a77f96905d Mon Sep 17 00:00:00 2001
From: Esteban Marin <esteban.marin@bithost.ch>
Date: Sat, 16 Jun 2018 13:28:13 +0200
Subject: [PATCH 2/3] code cleanup

---
 src/lib/select/select.spec.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index a3c46f5e5f0d..42cdb52169ac 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -917,7 +917,9 @@ describe('MatSelect', () => {
             'Expected select panel width to be 100% + 32px of the select field trigger');
       }));
 
-      it('should set the width of the overlay based on the trigger width exceeding the panel minimum width', fakeAsync(() => {
+      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();

From a6409a3f6c39b3f66ca810394a19ab399bac7777 Mon Sep 17 00:00:00 2001
From: Esteban Marin <esteban.marin@bithost.ch>
Date: Thu, 27 Sep 2018 13:26:13 +0200
Subject: [PATCH 3/3] fix leave-animation of select panel not working due to
 https://github.com/angular/angular/issues/23302

---
 src/lib/select/select-animations.ts | 13 +++++++++++++
 src/lib/select/select.html          |  2 +-
 src/lib/select/select.ts            |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/lib/select/select-animations.ts b/src/lib/select/select-animations.ts
index 46f2ea8b4ed5..a3c572af7fc5 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,
@@ -22,9 +24,20 @@ import {
  * The values below match the implementation of the AngularJS Material mat-select animation.
  */
 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 631d6f76af6d..bd0a4522c612 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -29,7 +29,7 @@
   (backdropClick)="close()"
   (attach)="_onAttached()"
   (detach)="close()">
-  <div class="mat-select-panel-wrap">
+  <div class="mat-select-panel-wrap" [@transformPanelWrap]>
     <div
       #panel
       class="mat-select-panel {{ _getPanelTheme() }}"
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 1d37781bd82b..838d0bd41d5a 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -220,6 +220,7 @@ export class MatSelectTrigger {}
     '(blur)': '_onBlur()',
   },
   animations: [
+    matSelectAnimations.transformPanelWrap,
     matSelectAnimations.transformPanel
   ],
   providers: [