From abfdf4c51e4c5ca8dbd7e9cc24de6374a7329394 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 24 Aug 2018 20:29:24 +0200
Subject: [PATCH] refactor(autocomplete): use overlay api to set conditional
 panel class

Takes advantage of the API introduced in #12631 to add a class to the panel automatically, based on its position.
---
 src/lib/autocomplete/autocomplete-trigger.ts | 29 ++++++++++++--------
 src/lib/autocomplete/autocomplete.scss       | 11 ++++----
 src/lib/autocomplete/autocomplete.spec.ts    |  3 +-
 3 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 7f075637cfe6..e71c463994e0 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/src/lib/autocomplete/autocomplete-trigger.ts
@@ -618,20 +618,25 @@ export class MatAutocompleteTrigger implements ControlValueAccessor, OnDestroy {
       .withFlexibleDimensions(false)
       .withPush(false)
       .withPositions([
-        {originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top'},
-        {originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom'}
+        {
+          originX: 'start',
+          originY: 'bottom',
+          overlayX: 'start',
+          overlayY: 'top'
+        },
+        {
+          originX: 'start',
+          originY: 'top',
+          overlayX: 'start',
+          overlayY: 'bottom',
+
+          // The overlay edge connected to the trigger should have squared corners, while
+          // the opposite end has rounded corners. We apply a CSS class to swap the
+          // border-radius based on the overlay position.
+          panelClass: 'mat-autocomplete-panel-above'
+        }
       ]);
 
-    // The overlay edge connected to the trigger should have squared corners, while
-    // the opposite end has rounded corners. We apply a CSS class to swap the
-    // border-radius based on the overlay position.
-    this._positionStrategy.positionChanges.subscribe(({connectionPair}) => {
-      if (this.autocomplete) {
-        this.autocomplete._classList['mat-autocomplete-panel-above'] =
-            connectionPair.originY === 'top';
-      }
-    });
-
     return this._positionStrategy;
   }
 
diff --git a/src/lib/autocomplete/autocomplete.scss b/src/lib/autocomplete/autocomplete.scss
index e032d4d1865d..d9ca2f69bd20 100644
--- a/src/lib/autocomplete/autocomplete.scss
+++ b/src/lib/autocomplete/autocomplete.scss
@@ -26,13 +26,14 @@ $mat-autocomplete-panel-border-radius: 4px !default;
     visibility: hidden;
   }
 
+  .mat-autocomplete-panel-above & {
+    border-radius: 0;
+    border-top-left-radius: $mat-autocomplete-panel-border-radius;
+    border-top-right-radius: $mat-autocomplete-panel-border-radius;
+  }
+
   @include cdk-high-contrast {
     outline: solid 1px;
   }
 }
 
-.mat-autocomplete-panel-above {
-  border-radius: 0;
-  border-top-left-radius: $mat-autocomplete-panel-border-radius;
-  border-top-right-radius: $mat-autocomplete-panel-border-radius;
-}
diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts
index 8dfe106521f9..12a3f16c613a 100644
--- a/src/lib/autocomplete/autocomplete.spec.ts
+++ b/src/lib/autocomplete/autocomplete.spec.ts
@@ -1441,8 +1441,7 @@ describe('MatAutocomplete', () => {
       expect(Math.floor(inputTop))
           .toEqual(Math.floor(panelBottom), `Expected panel to fall back to above position.`);
 
-      expect(panel.querySelector('.mat-autocomplete-panel')!.classList)
-          .toContain('mat-autocomplete-panel-above');
+      expect(panel.classList).toContain('mat-autocomplete-panel-above');
     }));
 
     it('should allow the panel to expand when the number of results increases', fakeAsync(() => {