fix(material/select): mat-select-arrow not rotating when dropdown is open

fixes mat-select not rotating when dropdown menu is visible. fixes case #29985

Author: dedanade

src/material/select/select.html

@@ -1,9 +1,10 @@
-<div cdk-overlay-origin
-     class="mat-mdc-select-trigger"
-     (click)="open()"
-     #fallbackOverlayOrigin="cdkOverlayOrigin"
-     #trigger>
-
+<div
+  cdk-overlay-origin
+  class="mat-mdc-select-trigger"
+  (click)="open()"
+  #fallbackOverlayOrigin="cdkOverlayOrigin"
+  #trigger
+>
   <div class="mat-mdc-select-value" [attr.id]="_valueId">
     @if (empty) {
       <span class="mat-mdc-select-placeholder mat-mdc-select-min-line">{{placeholder}}</span>
@@ -21,8 +22,15 @@
   <div class="mat-mdc-select-arrow-wrapper">
     <div class="mat-mdc-select-arrow">
       <!-- Use an inline SVG, because it works better than a CSS triangle in high contrast mode. -->
-      <svg viewBox="0 0 24 24" width="24px" height="24px" focusable="false" aria-hidden="true">
-        <path d="M7 10l5 5 5-5z"/>
+      <svg
+        viewBox="0 0 24 24"
+        width="24px"
+        height="24px"
+        focusable="false"
+        aria-hidden="true"
+        [ngClass]="{'mat-mdc-select-svg-opened': panelOpen}"
+      >
+        <path d="M7 10l5 5 5-5z" />
       </svg>
     </div>
   </div>
@@ -41,7 +49,8 @@
   [cdkConnectedOverlayWidth]="_overlayWidth"
   (backdropClick)="close()"
   (attach)="_onAttached()"
-  (detach)="close()">
+  (detach)="close()"
+>
   <div
     #panel
     role="listbox"
@@ -54,7 +63,8 @@
     [ngClass]="panelClass"
     [@transformPanel]="'showing'"
     (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
-    (keydown)="_handleKeydown($event)">
+    (keydown)="_handleKeydown($event)"
+  >
     <ng-content></ng-content>
   </div>
 </ng-template>

src/material/select/select.scss

@@ -8,19 +8,16 @@
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
 $mat-select-panel-max-height: 275px !default;
-$mat-select-placeholder-arrow-space: 2 *
-  ($mat-select-arrow-size + $mat-select-arrow-margin);
+$mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-arrow-margin);
 $leading-width: 12px !default;
 $scale: 0.75 !default;
 
-
 .mat-mdc-select {
   display: inline-block;
   width: 100%;
   outline: none;
 
-  @include token-utils.use-tokens(
-    tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
+  @include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
     @include vendor-prefixes.smooth-font();
     @include token-utils.create-token-slot(color, enabled-trigger-text-color);
     @include token-utils.create-token-slot(font-family, trigger-text-font);
@@ -37,8 +34,7 @@ $scale: 0.75 !default;
 }
 
 .mat-mdc-select-disabled {
-  @include token-utils.use-tokens(
-    tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
+  @include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
     @include token-utils.create-token-slot(color, disabled-trigger-text-color);
   }
 }
@@ -93,8 +89,7 @@ $scale: 0.75 !default;
   height: $mat-select-arrow-size;
   position: relative;
 
-  @include token-utils.use-tokens(
-    tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
+  @include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
     @include token-utils.create-token-slot(color, enabled-arrow-color);
 
     .mat-mdc-form-field.mat-focused & {
@@ -122,6 +117,9 @@ $scale: 0.75 !default;
         fill: GrayText;
       }
     }
+    &.mat-mdc-select-svg-opened {
+      transform: translate(-50%, -50%) rotate(180deg);
+    }
   }
 }
 
@@ -140,8 +138,7 @@ div.mat-mdc-select-panel {
   // Workaround in case other MDC menu surface styles bleed in.
   position: static;
 
-  @include token-utils.use-tokens(
-    tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
+  @include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
     @include token-utils.create-token-slot(background-color, panel-background-color);
   }
 
@@ -170,11 +167,9 @@ div.mat-mdc-select-panel {
   // Delay the transition until the label has animated about a third of the way through, in
   // order to prevent the placeholder from overlapping for a split second.
   transition: color variables.$swift-ease-out-duration
-      math.div(variables.$swift-ease-out-duration, 3)
-      variables.$swift-ease-out-timing-function;
+    math.div(variables.$swift-ease-out-duration, 3) variables.$swift-ease-out-timing-function;
 
-  @include token-utils.use-tokens(
-    tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
+  @include token-utils.use-tokens(tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
     @include token-utils.create-token-slot(color, placeholder-text-color);
   }