fix(material-experimental/mdc-autocomplete): panel losing max-height …

…if menu is opened after autocomplete (angular#21394)

Along the same lines as angular#21341. If an MDC-based mat-menu is opened after a
mat-autocomplete, the autocomplete will lose its max-height, because its
selector specificity is too low and it gets overwritten by the menu which uses
the same set of mixins.

These changes resolve the issue by increasing the specificity.

src/material-experimental/mdc-autocomplete/autocomplete.scss

@@ -6,7 +6,9 @@
 
 @include mdc-menu-surface-core-styles($query: structure);
 
-.mat-mdc-autocomplete-panel {
+// Note that the `.mdc-menu-surface` is here in order to bump up the specificity
+// and avoid interference with `mat-menu` which uses the same mixins from MDC.
+.mdc-menu-surface.mat-mdc-autocomplete-panel {
   width: 100%; // Ensures that the panel matches the overlay width.
   max-height: 256px; // Prevents lists with a lot of option from growing too high.
   position: static; // MDC uses `absolute` by default which will throw off our positioning.
@@ -28,13 +30,14 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-}
 
-// These classes are used to toggle the panel's visibility depending on whether it has any options.
-.mat-mdc-autocomplete-visible {
-  visibility: visible;
-}
+  // These classes are used to toggle the panel visibility depending on whether it has any options.
+  &.mat-mdc-autocomplete-visible {
+    visibility: visible;
+  }
 
-.mat-mdc-autocomplete-hidden {
-  visibility: hidden;
+  &.mat-mdc-autocomplete-hidden {
+    visibility: hidden;
+  }
 }
+