From 3d612c8622a8e37f8f08e479bfeaafc7f27ae9e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 4 Aug 2023 13:40:59 +0300
Subject: [PATCH] Refactor #4235 - For BlockUI

---
 components/lib/blockui/BlockUI.vue | 53 ++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/components/lib/blockui/BlockUI.vue b/components/lib/blockui/BlockUI.vue
index ada2f307c..d66837be6 100755
--- a/components/lib/blockui/BlockUI.vue
+++ b/components/lib/blockui/BlockUI.vue
@@ -33,24 +33,38 @@ export default {
         block() {
             let styleClass = 'p-blockui p-component-overlay p-component-overlay-enter';
 
-            this.mask = document.createElement('div');
-            this.mask.setAttribute('data-pc-section', 'mask');
-            DomHandler.addStyles(this.mask, {
-                position: 'absolute',
-                top: '0',
-                left: '0',
-                width: '100%',
-                height: '100%'
-            });
-
             if (this.fullScreen) {
                 styleClass += ' p-blockui-document';
-                !this.isUnstyled && this.mask.setAttribute('class', styleClass);
+
+                this.mask = DomHandler.createElement('div', {
+                    'data-pc-section': 'mask',
+                    style: {
+                        position: 'fixed',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%'
+                    },
+                    class: !this.isUnstyled && styleClass,
+                    'p-bind': this.ptm('mask')
+                });
+
                 document.body.appendChild(this.mask);
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
                 document.activeElement.blur();
             } else {
-                !this.isUnstyled && this.mask.setAttribute('class', styleClass);
+                this.mask = DomHandler.createElement('div', {
+                    'data-pc-section': 'mask',
+                    style: {
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%'
+                    },
+                    class: !this.isUnstyled && styleClass,
+                    'p-bind': this.ptm('mask')
+                });
                 this.$refs.container.appendChild(this.mask);
             }
 
@@ -63,18 +77,21 @@ export default {
         },
         unblock() {
             !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
-            this.mask.addEventListener('animationend', () => {
+
+            if (DomHandler.hasCSSAnimation(this.mask) > 0) {
+                this.mask.addEventListener('animationend', () => {
+                    this.removeMask();
+                });
+            } else {
                 this.removeMask();
-            });
+            }
         },
         removeMask() {
             ZIndexUtils.clear(this.mask);
 
             if (this.fullScreen) {
-                if (!this.isUnstyled) {
-                    document.body.removeChild(this.mask);
-                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                }
+                document.body.removeChild(this.mask);
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
             } else {
                 this.$refs.container.removeChild(this.mask);
             }