Skip to content

Commit aaea0e2

Browse files
authored
fix(material/bottom-sheet): changed after checked error with zoneless (angular#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 angular#29258.
1 parent 6318f24 commit aaea0e2

File tree

1 file changed

+6
-7
lines changed

1 file changed

+6
-7
lines changed

src/material/bottom-sheet/bottom-sheet-container.ts

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,17 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
9292
this._breakpointSubscription = breakpointObserver
9393
.observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
9494
.subscribe(() => {
95-
this._toggleClass(
95+
const classList = (this._elementRef.nativeElement as HTMLElement).classList;
96+
97+
classList.toggle(
9698
'mat-bottom-sheet-container-medium',
9799
breakpointObserver.isMatched(Breakpoints.Medium),
98100
);
99-
this._toggleClass(
101+
classList.toggle(
100102
'mat-bottom-sheet-container-large',
101103
breakpointObserver.isMatched(Breakpoints.Large),
102104
);
103-
this._toggleClass(
105+
classList.toggle(
104106
'mat-bottom-sheet-container-xlarge',
105107
breakpointObserver.isMatched(Breakpoints.XLarge),
106108
);
@@ -111,6 +113,7 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
111113
enter(): void {
112114
if (!this._destroyed) {
113115
this._animationState = 'visible';
116+
this._changeDetectorRef.markForCheck();
114117
this._changeDetectorRef.detectChanges();
115118
}
116119
}
@@ -142,8 +145,4 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
142145
}
143146

144147
protected override _captureInitialFocus(): void {}
145-
146-
private _toggleClass(cssClass: string, add: boolean) {
147-
this._elementRef.nativeElement.classList.toggle(cssClass, add);
148-
}
149148
}

0 commit comments

Comments
 (0)