Fixed #10801 - Wrong zIndex for p-toast

primefaces · Nov 9, 2021 · be9b23a · be9b23a
1 parent b36441f
commit be9b23a
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
@@ -133,7 +133,7 @@ export class ToastItem implements AfterViewInit, OnDestroy {
     template: `
         <div #container [ngClass]="'p-toast p-component p-toast-' + position" [ngStyle]="style" [class]="styleClass">
             <p-toastItem *ngFor="let msg of messages; let i=index" [message]="msg" [index]="i" (onClose)="onMessageClose($event)"
-                    [template]="template" @toastAnimation (@toastAnimation.start)="onAnimationStart($event)"
+                    [template]="template" @toastAnimation (@toastAnimation.start)="onAnimationStart($event)" (@toastAnimation.done)="onAnimationEnd($event)"
                     [showTransformOptions]="showTransformOptions" [hideTransformOptions]="hideTransformOptions"
                     [showTransitionOptions]="showTransitionOptions" [hideTransitionOptions]="hideTransitionOptions"></p-toastItem>
         </div>
@@ -230,9 +230,6 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
     }
 
     ngAfterViewInit() {
-        if (this.autoZIndex) {
-            ZIndexUtils.set('modal', this.containerViewChild.nativeElement, this.baseZIndex || this.config.zIndex.modal);
-        }
         if (this.breakpoints) {
             this.createStyle();
         }
@@ -297,10 +294,20 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
     }
 
     onAnimationStart(event: AnimationEvent) {
-        if (event.fromState === 'void' && this.autoZIndex) {
-            this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+        if (event.fromState === 'void') {
             this.containerViewChild.nativeElement.setAttribute(this.id, '');
 
+            if (this.autoZIndex) {
+                ZIndexUtils.set('modal', this.containerViewChild.nativeElement, this.baseZIndex || this.config.zIndex.modal);
+            }
+        }
+    }
+
+    onAnimationEnd(event: AnimationEvent) {
+        if (event.toState === 'void') {
+            if (this.autoZIndex) {
+                ZIndexUtils.clear(this.containerViewChild.nativeElement);
+            }
         }
     }