@@ -61,7 +61,6 @@ import {
61
61
HostAttributeToken ,
62
62
ANIMATION_MODULE_TYPE ,
63
63
Renderer2 ,
64
- NgZone ,
65
64
} from '@angular/core' ;
66
65
import {
67
66
AbstractControl ,
@@ -216,7 +215,6 @@ export class MatSelect
216
215
private _dir = inject ( Directionality , { optional : true } ) ;
217
216
private _idGenerator = inject ( _IdGenerator ) ;
218
217
private _renderer = inject ( Renderer2 ) ;
219
- private _ngZone = inject ( NgZone ) ;
220
218
protected _parentFormField = inject < MatFormField > ( MAT_FORM_FIELD , { optional : true } ) ;
221
219
ngControl = inject ( NgControl , { self : true , optional : true } ) ! ;
222
220
private _liveAnnouncer = inject ( LiveAnnouncer ) ;
@@ -845,35 +843,41 @@ export class MatSelect
845
843
/** Triggers the exit animation and detaches the overlay at the end. */
846
844
private _exitAndDetach ( ) {
847
845
if ( this . _animationsDisabled || ! this . panel ) {
848
- this . _overlayDir . detachOverlay ( ) ;
846
+ this . _detachOverlay ( ) ;
849
847
return ;
850
848
}
851
849
852
- this . _ngZone . runOutsideAngular ( ( ) => {
853
- this . _cleanupDetach ?.( ) ;
854
- this . _cleanupDetach = ( ) => {
855
- cleanupEvent ( ) ;
856
- clearTimeout ( exitFallbackTimer ) ;
857
- this . _cleanupDetach = undefined ;
858
- } ;
850
+ this . _cleanupDetach ?.( ) ;
851
+ this . _cleanupDetach = ( ) => {
852
+ cleanupEvent ( ) ;
853
+ clearTimeout ( exitFallbackTimer ) ;
854
+ this . _cleanupDetach = undefined ;
855
+ } ;
856
+
857
+ const panel : HTMLElement = this . panel . nativeElement ;
858
+ const cleanupEvent = this . _renderer . listen ( panel , 'animationend' , ( event : AnimationEvent ) => {
859
+ if ( event . animationName === '_mat-select-exit' ) {
860
+ this . _cleanupDetach ?.( ) ;
861
+ this . _detachOverlay ( ) ;
862
+ }
863
+ } ) ;
859
864
860
- const panel : HTMLElement = this . panel . nativeElement ;
861
- const cleanupEvent = this . _renderer . listen ( panel , 'animationend' , ( event : AnimationEvent ) => {
862
- if ( event . animationName === '_mat-select-exit' ) {
863
- this . _cleanupDetach ?.( ) ;
864
- this . _overlayDir . detachOverlay ( ) ;
865
- }
866
- } ) ;
865
+ // Since closing the overlay depends on the animation, we have a fallback in case the panel
866
+ // doesn't animate. This can happen in some internal tests that do `* {animation: none}`.
867
+ const exitFallbackTimer = setTimeout ( ( ) => {
868
+ this . _cleanupDetach ?.( ) ;
869
+ this . _detachOverlay ( ) ;
870
+ } , 200 ) ;
867
871
868
- // Since closing the overlay depends on the animation, we have a fallback in case the panel
869
- // doesn't animate. This can happen in some internal tests that do `* {animation: none}`.
870
- const exitFallbackTimer = setTimeout ( ( ) => {
871
- this . _cleanupDetach ?.( ) ;
872
- this . _overlayDir . detachOverlay ( ) ;
873
- } , 200 ) ;
872
+ panel . classList . add ( 'mat-select-panel-exit' ) ;
873
+ }
874
874
875
- panel . classList . add ( 'mat-select-panel-exit' ) ;
876
- } ) ;
875
+ /** Detaches the current overlay directive. */
876
+ private _detachOverlay ( ) {
877
+ this . _overlayDir . detachOverlay ( ) ;
878
+ // Some of the overlay detachment logic depends on change detection.
879
+ // Mark for check to ensure that things get picked up in a timely manner.
880
+ this . _changeDetectorRef . markForCheck ( ) ;
877
881
}
878
882
879
883
/**
0 commit comments