From 69ae4040e558d9f10004cff81bdd453ed260abd9 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 18 Jun 2024 21:33:28 +0200 Subject: [PATCH] fix(material/bottom-sheet): changed after checked error with zoneless (#29277) Fixes that when closing and immediately reopening bottom sheet in a zoneless app, we were causing a "changed after checked" error to be thrown. It seems to be because we were calling `detectChanges` without marking for check first. Fixes #29258. (cherry picked from commit aaea0e272635c973f6466b3db990a459a844f1d3) --- src/material/bottom-sheet/bottom-sheet-container.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/material/bottom-sheet/bottom-sheet-container.ts b/src/material/bottom-sheet/bottom-sheet-container.ts index 431499937cc5..791cbe3974ed 100644 --- a/src/material/bottom-sheet/bottom-sheet-container.ts +++ b/src/material/bottom-sheet/bottom-sheet-container.ts @@ -92,15 +92,17 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes this._breakpointSubscription = breakpointObserver .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge]) .subscribe(() => { - this._toggleClass( + const classList = (this._elementRef.nativeElement as HTMLElement).classList; + + classList.toggle( 'mat-bottom-sheet-container-medium', breakpointObserver.isMatched(Breakpoints.Medium), ); - this._toggleClass( + classList.toggle( 'mat-bottom-sheet-container-large', breakpointObserver.isMatched(Breakpoints.Large), ); - this._toggleClass( + classList.toggle( 'mat-bottom-sheet-container-xlarge', breakpointObserver.isMatched(Breakpoints.XLarge), ); @@ -111,6 +113,7 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes enter(): void { if (!this._destroyed) { this._animationState = 'visible'; + this._changeDetectorRef.markForCheck(); this._changeDetectorRef.detectChanges(); } } @@ -142,8 +145,4 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes } protected override _captureInitialFocus(): void {} - - private _toggleClass(cssClass: string, add: boolean) { - this._elementRef.nativeElement.classList.toggle(cssClass, add); - } }