From 777297d97d4ff1851a67229302ef6d3beb5285d2 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 6 Jan 2021 19:11:52 +0200 Subject: [PATCH] fix(material-experimental/mdc-autocomplete): panel losing max-height if menu is opened after autocomplete (#21394) Along the same lines as #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. --- .../mdc-autocomplete/autocomplete.scss | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss index 52069092f44f..5b49a81e4aac 100644 --- a/src/material-experimental/mdc-autocomplete/autocomplete.scss +++ b/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; + } } +