Fixed #2662 - Add after-hide event to Dialog

api-generator/components/dialog.js

@@ -138,6 +138,10 @@ const DialogEvents = [
         name: "hide",
         description: "Callback to invoke when dialog is hidden."
     },
+    {
+        name: "after-hide",
+        description: "Callback to invoke after dialog is hidden."
+    },
     {
         name: "show",
         description: "Callback to invoke when dialog is showed."

src/components/dialog/Dialog.d.ts

@@ -154,11 +154,15 @@ export declare type DialogEmits = {
     /**
      * Callback to invoke when dialog is hidden.
      */
-    'show': () => void;
-    /**
-     * Callback to invoke when dialog is showed.
-     */
     'hide': () => void;
+    /**
+     * Callback to invoke after dialog is hidden.
+    */
+    'after-hide': () => void;
+    /**
+     * Callback to invoke when dialog is shown.
+     */
+    'show': () => void;
     /**
      * Fired when a dialog gets maximized.
      * @param {event} event - Browser event.

src/components/dialog/Dialog.vue

@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { computed } from 'vue';
 import { UniqueComponentId,DomHandler,ZIndexUtils } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 import Portal from 'primevue/portal';
@@ -36,7 +37,7 @@ import Portal from 'primevue/portal';
 export default {
     name: 'Dialog',
     inheritAttrs: false,
-    emits: ['update:visible','show','hide','maximize','unmaximize','dragend'],
+    emits: ['update:visible','show','hide', 'after-hide', 'maximize','unmaximize','dragend'],
     props: {
         header: null,
         footer: null,
@@ -98,6 +99,12 @@ export default {
         appendTo: {
             type: String,
             default: 'body'
+        },
+        _instance: null
+    },
+    provide() {
+        return {
+            dialogRef: computed(() => this._instance)
         }
     },
     data() {
@@ -125,12 +132,11 @@ export default {
         this.unbindGlobalListeners();
         this.destroyStyle();
 
-        this.mask = null;
+        if (this.mask && this.autoZIndex) {
-
+            ZIndexUtils.clear(this.mask);
-        if (this.container && this.autoZIndex) {
-            ZIndexUtils.clear(this.container);
         }
         this.container = null;
+        this.mask = null;
     },
     mounted() {
         if (this.breakpoints) {
@@ -142,19 +148,17 @@ export default {
             this.$emit('update:visible', false);
         },
         onBeforeEnter(el) {
-            if (this.autoZIndex) {
-                ZIndexUtils.set('modal', el, this.baseZIndex + this.$primevue.config.zIndex.modal);
-            }
-
             el.setAttribute(this.attributeSelector, '');
         },
         onEnter() {
-            this.mask.style.zIndex = String(parseInt(this.container.style.zIndex, 10) - 1);
-
             this.$emit('show');
             this.focus();
             this.enableDocumentSettings();
             this.bindGlobalListeners();
+
+            if (this.autoZIndex) {
+                ZIndexUtils.set('modal', this.mask, this.baseZIndex + this.$primevue.config.zIndex.modal);
+            }
         },
         onBeforeLeave() {
             if (this.modal) {
@@ -162,16 +166,16 @@ export default {
             }
         },
         onLeave() {
-
             this.$emit('hide');
         },
-        onAfterLeave(el) {
+        onAfterLeave() {
             if (this.autoZIndex) {
-                ZIndexUtils.clear(el);
+                ZIndexUtils.clear(this.mask);
             }
             this.containerVisible = false;
             this.unbindDocumentState();
             this.unbindGlobalListeners();
+            this.$emit('after-hide');
         },
         onMaskClick(event) {
             if (this.dismissableMask && this.closable && this.modal && this.mask === event.target) {

src/views/dialog/DialogDoc.vue

@@ -254,6 +254,11 @@ export default {
                         <td>-</td>
                         <td>Callback to invoke when dialog is hidden.</td>
                     </tr>
+                    <tr>
+                        <td>after-hide</td>
+                        <td>-</td>
+                        <td>Callback to invoke after dialog is hidden.</td>
+                    </tr>
                     <tr>
                         <td>show</td>
                         <td>-</td>