possible stacking context problem with Angular Material(Dialog component) in version 21.0.0 #291
Description
Current behavior
the execute npm install sweetalert2 with angular material 21.0.0 and Angular 21.0.0 , if you fire sweetalert2 the alert, The alert should overlay the Angular Material Dialog component, but it doesn't. I tried using a high Z-index in the .swal2-container and including !important in style.css global, but it didn't work. It works correctly with version 20.2.0 Angular Material. I think many of us use Angular Material to build Angular apps, and what I'm see is a possible stacking issue .
Template
<mat-dialog-content>
<p>What's your favorite animal?</p>
<mat-form-field>
<mat-label>Favorite Animal</mat-label>
<input matInput [(ngModel)]="animal" />
</mat-form-field>
</mat-dialog-content>
<mat-dialog-actions>
<button matButton (click)="onNoClick()">No Thanks</button>
<button matButton [mat-dialog-close]="animal()" cdkFocusInitial>Ok</button>
</mat-dialog-actions>
Ts
export class DialogOverviewExampleDialog {
readonly dialogRef = inject(MatDialogRef<DialogOverviewExampleDialog>);
readonly data = inject<DialogData>(MAT_DIALOG_DATA);
readonly animal = model(this.data.animal);
onNoClick(): void {
Swal.fire({
text: 'test',
icon: 'success',
confirmButtonText: 'OK',
timerProgressBar: true,
theme: 'material-ui',
});
}
}
Expected behavior
I would like a technical answer as to whether the problem is part of the library or something external to it.
Live demo !!! THIS FIELD IS REQUIRED !!!
demo version Angular material 20.2.0 working Well : https://stackblitz.com/edit/q3rx6nx8
demo version Angular material 21.0.0 working bad : https://stackblitz.com/edit/eyxvzkvq
Nota : For both examples, simply click on "pick one", followed by a click on the "No thanks" button, to see the error.