Skip to content

Commit 007d4ac

Browse files
crisbetoannieyw
crisbeto
authored and
annieyw
committed
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. (cherry picked from commit 3335a92)
1 parent c04d8be commit 007d4ac

1 file changed

Lines changed: 11 additions & 8 deletions

File tree

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66

77
@include mdc-menu-surface-core-styles($query: structure);
88

9-
.mat-mdc-autocomplete-panel {
9+
// Note that the `.mdc-menu-surface` is here in order to bump up the specificity
10+
// and avoid interference with `mat-menu` which uses the same mixins from MDC.
11+
.mdc-menu-surface.mat-mdc-autocomplete-panel {
1012
width: 100%; // Ensures that the panel matches the overlay width.
1113
max-height: 256px; // Prevents lists with a lot of option from growing too high.
1214
position: static; // MDC uses `absolute` by default which will throw off our positioning.
@@ -28,13 +30,14 @@
2830
border-bottom-left-radius: 0;
2931
border-bottom-right-radius: 0;
3032
}
31-
}
3233

33-
// These classes are used to toggle the panel's visibility depending on whether it has any options.
34-
.mat-mdc-autocomplete-visible {
35-
visibility: visible;
36-
}
34+
// These classes are used to toggle the panel visibility depending on whether it has any options.
35+
&.mat-mdc-autocomplete-visible {
36+
visibility: visible;
37+
}
3738

38-
.mat-mdc-autocomplete-hidden {
39-
visibility: hidden;
39+
&.mat-mdc-autocomplete-hidden {
40+
visibility: hidden;
41+
}
4042
}
43+

0 commit comments

Comments
 (0)