Skip to content

Commit ab21f78

Browse files
authored
fix(material/select): wrong transform origin when opening upwards inside another overlay (#33032)
`mat-select` had an overly-broad `:not` selector for the base case where the dropdown opens downwards that was being overwritten when opening upwards if the select is placed inside another overlay. Fixes #33028.
1 parent 8d5a896 commit ab21f78

File tree

1 file changed

+8
-14
lines changed

1 file changed

+8
-14
lines changed

src/material/select/select.scss

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -151,35 +151,29 @@ div.mat-mdc-select-panel {
151151
// DOM for the Gmat versions to work. We need to bump up the specificity here
152152
// so that it's higher than MDC's styles.
153153
div.mat-mdc-select-panel {
154+
$border-radius: 4px;
154155
width: 100%; // Ensures that the panel matches the overlay width.
155156
max-height: $mat-select-panel-max-height;
156157
outline: 0;
157158
overflow: auto;
158159
padding: 8px 0;
159-
border-radius: 4px;
160160
box-sizing: border-box;
161+
transform-origin: top center;
162+
border-radius: 0 0 $border-radius $border-radius;
161163

162164
// Necessary so the `offsetParent` of the nested `mat-option` is the
163165
// panel which is required for scroll calculations (see #30974).
164166
position: relative;
165-
166167
background-color: token-utils.slot(select-panel-background-color, $fallbacks);
167168

168-
@include cdk.high-contrast {
169-
outline: solid 1px;
170-
}
171-
172-
.cdk-overlay-pane:not(.mat-mdc-select-panel-above) & {
173-
border-top-left-radius: 0;
174-
border-top-right-radius: 0;
175-
transform-origin: top center;
176-
}
177-
178169
.mat-mdc-select-panel-above & {
179-
border-bottom-left-radius: 0;
180-
border-bottom-right-radius: 0;
170+
border-radius: $border-radius $border-radius 0 0;
181171
transform-origin: bottom center;
182172
}
173+
174+
@include cdk.high-contrast {
175+
outline: solid 1px;
176+
}
183177
}
184178

185179
.mat-select-panel-animations-enabled {

0 commit comments

Comments
 (0)