diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 504924a23..b17699e09 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -343,8 +343,7 @@ export default {
         }
 
         if (this.mask) {
-            this.disableModality();
-            this.mask = null;
+            this.destroyMask();
         }
 
         this.restoreAppend();
@@ -554,6 +553,11 @@ export default {
             this.unbindScrollListener();
             this.unbindResizeListener();
             this.$emit('hide');
+            
+            if (this.mask) {
+                this.disableModality();
+            }
+
             this.overlay = null;
         },
         onPrevButtonClick(event) {
@@ -771,10 +775,6 @@ export default {
             if (this.isSingleSelection() && (!this.showTime || this.hideOnDateTimeSelect)) {
                 setTimeout(() => {
                     this.overlayVisible = false;
-
-                    if (this.mask) {
-                        this.disableModality();
-                    }
                 }, 150);
             }
         },
@@ -1309,7 +1309,7 @@ export default {
                 DomHandler.addMultipleClasses(this.mask, 'p-datepicker-mask p-datepicker-mask-scrollblocker');
 
                 this.maskClickListener = () => {
-                    this.disableModality();
+                    this.overlayVisible = false;
                 };
                 this.mask.addEventListener('click', this.maskClickListener);
 
@@ -1323,31 +1323,32 @@ export default {
         },
         disableModality() {
             if (this.mask) {
-                this.overlayVisible = false;
-
                 DomHandler.addClass(this.mask, 'p-datepicker-mask-leave');
                 this.mask.addEventListener('transitionend', () => {
-                    this.mask.removeEventListener('click', this.maskClickListener);
-                    this.maskClickListener = null;
-                    document.body.removeChild(this.mask);
-                    this.mask = null;
-
-                    let bodyChildren = document.body.children;
-                    let hasBlockerMasks;
-                    for (let i = 0; i < bodyChildren.length; i++) {
-                        let bodyChild = bodyChildren[i];
-                        if(DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
-                            hasBlockerMasks = true;
-                            break;
-                        }
-                    }
-
-                    if (!hasBlockerMasks) {
-                        DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                    }
+                    this.destroyMask();
                 });
             }
         },
+        destroyMask() {
+            this.mask.removeEventListener('click', this.maskClickListener);
+            this.maskClickListener = null;
+            document.body.removeChild(this.mask);
+            this.mask = null;
+
+            let bodyChildren = document.body.children;
+            let hasBlockerMasks;
+            for (let i = 0; i < bodyChildren.length; i++) {
+                let bodyChild = bodyChildren[i];
+                if(DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
+                    hasBlockerMasks = true;
+                    break;
+                }
+            }
+
+            if (!hasBlockerMasks) {
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            }
+        },
         updateCurrentMetaData() {
             const viewDate = this.viewDate;
             this.currentMonth = viewDate.getMonth();