From 93cc6a8a6ef04ca7a959cf298ff0938426d92d89 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 25 Aug 2021 11:05:14 +0300
Subject: [PATCH] Fixed #1381 - Auto ZIndex Issue with Toast and Sidebar

---
 src/components/toast/Toast.vue | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/toast/Toast.vue b/src/components/toast/Toast.vue
index 3025e0c44..543f8d93c 100755
--- a/src/components/toast/Toast.vue
+++ b/src/components/toast/Toast.vue
@@ -1,7 +1,7 @@
 <template>
     <Teleport to="body">
         <div ref="container" :class="containerClass" v-bind="$attrs">
-            <transition-group name="p-toast-message" tag="div" @enter="onEnter">
+            <transition-group name="p-toast-message" tag="div" @enter="onEnter" @leave="onLeave">
                 <ToastMessage v-for="msg of messages" :key="msg.id" :message="msg" @close="remove($event)" :template="$slots.message"/>
             </transition-group>
         </div>
@@ -51,10 +51,6 @@ export default {
         ToastEventBus.on('remove-group', this.onRemoveGroup);
         ToastEventBus.on('remove-all-groups', this.onRemoveAllGroups);
 
-        if (this.autoZIndex) {
-            ZIndexUtils.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
-        }
-
         if (this.breakpoints) {
             this.createStyle();
         }
@@ -104,6 +100,15 @@ export default {
         },
         onEnter() {
             this.$refs.container.setAttribute(this.attributeSelector, '');
+
+            if (this.autoZIndex) {
+                ZIndexUtils.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
+            }
+        },
+        onLeave() {
+            if (this.$refs.container && this.autoZIndex) {
+                ZIndexUtils.clear(this.$refs.container);
+            }
         },
         createStyle() {
             if (!this.styleElement) {
@@ -115,7 +120,7 @@ export default {
                 for (let breakpoint in this.breakpoints) {
                     let breakpointStyle = '';
                     for (let styleProp in this.breakpoints[breakpoint]) {
-                        breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;'; 
+                        breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + '!important;';
                     }
                     innerHTML += `
                         @media screen and (max-width: ${breakpoint}) {