From be9b23a84bd054a002b82b4222d960258a8180c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yi=C4=9Fit=20FINDIKLI?= <yigitfindikli@gmail.com>
Date: Tue, 9 Nov 2021 11:59:14 +0300
Subject: [PATCH] Fixed #10801 - Wrong zIndex for p-toast

---
 src/app/components/toast/toast.ts | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
index 31e7e2e6e16..baf144d1bbb 100755
--- 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);
+            }
         }
     }