fix(material/select): switch away from animations module

src/cdk/overlay/overlay-directives.ts

@@ -106,7 +106,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _overlay = inject(Overlay);
   private _dir = inject(Directionality, {optional: true});
 
-  private _overlayRef: OverlayRef;
+  private _overlayRef: OverlayRef | undefined;
   private _templatePortal: TemplatePortal;
   private _backdropSubscription = Subscription.EMPTY;
   private _attachSubscription = Subscription.EMPTY;
@@ -251,7 +251,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
   /** The associated overlay reference. */
   get overlayRef(): OverlayRef {
-    return this._overlayRef;
+    return this._overlayRef!;
   }
 
   /** The element's layout direction. */
@@ -264,16 +264,13 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     this._detachSubscription.unsubscribe();
     this._backdropSubscription.unsubscribe();
     this._positionSubscription.unsubscribe();
-
-    if (this._overlayRef) {
-      this._overlayRef.dispose();
-    }
+    this._overlayRef?.dispose();
   }
 
   ngOnChanges(changes: SimpleChanges) {
     if (this._position) {
       this._updatePositionStrategy(this._position);
-      this._overlayRef.updateSize({
+      this._overlayRef?.updateSize({
         width: this.width,
         minWidth: this.minWidth,
         height: this.height,
@@ -286,7 +283,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     }
 
     if (changes['open']) {
-      this.open ? this._attachOverlay() : this._detachOverlay();
+      this.open ? this.attachOverlay() : this.detachOverlay();
     }
   }
 
@@ -304,7 +301,7 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
       if (event.keyCode === ESCAPE && !this.disableClose && !hasModifierKey(event)) {
         event.preventDefault();
-        this._detachOverlay();
+        this.detachOverlay();
       }
     });
 
@@ -411,21 +408,21 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     return null;
   }
 
-  /** Attaches the overlay and subscribes to backdrop clicks if backdrop exists */
-  private _attachOverlay() {
+  /** Attaches the overlay. */
+  attachOverlay() {
     if (!this._overlayRef) {
       this._createOverlay();
     } else {
       // Update the overlay size, in case the directive's inputs have changed
       this._overlayRef.getConfig().hasBackdrop = this.hasBackdrop;
     }
 
-    if (!this._overlayRef.hasAttached()) {
-      this._overlayRef.attach(this._templatePortal);
+    if (!this._overlayRef!.hasAttached()) {
+      this._overlayRef!.attach(this._templatePortal);
     }
 
     if (this.hasBackdrop) {
-      this._backdropSubscription = this._overlayRef.backdropClick().subscribe(event => {
+      this._backdropSubscription = this._overlayRef!.backdropClick().subscribe(event => {
         this.backdropClick.emit(event);
       });
     } else {
@@ -447,16 +444,16 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
           }
         });
     }
-  }
 
-  /** Detaches the overlay and unsubscribes to backdrop clicks if backdrop exists */
-  private _detachOverlay() {
-    if (this._overlayRef) {
-      this._overlayRef.detach();
-    }
+    this.open = true;
+  }
 
+  /** Detaches the overlay. */
+  detachOverlay() {
+    this._overlayRef?.detach();
     this._backdropSubscription.unsubscribe();
     this._positionSubscription.unsubscribe();
+    this.open = false;
   }
 }
 

src/material/select/select-animations.ts

@@ -23,6 +23,8 @@ import {
  *
  * The values below match the implementation of the AngularJS Material mat-select animation.
  * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
 export const matSelectAnimations: {
   /**

src/material/select/select.html

@@ -33,27 +33,25 @@
   cdkConnectedOverlayLockPosition
   cdkConnectedOverlayHasBackdrop
   cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+  [cdkConnectedOverlayDisableClose]="true"
   [cdkConnectedOverlayPanelClass]="_overlayPanelClass"
   [cdkConnectedOverlayScrollStrategy]="_scrollStrategy"
   [cdkConnectedOverlayOrigin]="_preferredOverlayOrigin || fallbackOverlayOrigin"
-  [cdkConnectedOverlayOpen]="panelOpen"
   [cdkConnectedOverlayPositions]="_positions"
   [cdkConnectedOverlayWidth]="_overlayWidth"
   (backdropClick)="close()"
-  (attach)="_onAttached()"
-  (detach)="close()">
+  (overlayKeydown)="_handleOverlayKeydown($event)">
   <div
     #panel
     role="listbox"
     tabindex="-1"
     class="mat-mdc-select-panel mdc-menu-surface mdc-menu-surface--open {{ _getPanelTheme() }}"
+    [class.mat-select-panel-animations-enabled]="!_animationsDisabled"
     [attr.id]="id + '-panel'"
     [attr.aria-multiselectable]="multiple"
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="_getPanelAriaLabelledby()"
     [ngClass]="panelClass"
-    [@transformPanel]="'showing'"
-    (@transformPanel.done)="_panelDoneAnimatingStream.next($event.toState)"
     (keydown)="_handleKeydown($event)">
     <ng-content></ng-content>
   </div>

src/material/select/select.scss

@@ -13,6 +13,27 @@ $mat-select-placeholder-arrow-space: 2 *
 $leading-width: 12px !default;
 $scale: 0.75 !default;
 
+@keyframes _mat-select-enter {
+  from {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes _mat-select-exit {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
 
 .mat-mdc-select {
   display: inline-block;
@@ -173,6 +194,14 @@ div.mat-mdc-select-panel {
   }
 }
 
+.mat-select-panel-animations-enabled {
+  animation: _mat-select-enter 120ms cubic-bezier(0, 0, 0.2, 1);
+
+  &.mat-select-panel-exit {
+    animation: _mat-select-exit 100ms linear;
+  }
+}
+
 .mat-mdc-select-placeholder {
   // 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.