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.
angular · Aug 25, 2018 · 0d4f80d · 0d4f80d
1 parent 3723191
commit 0d4f80d
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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(() => {