Fix #5889: BlockUI in unstyled mode (#5967)

primefaces · Feb 14, 2024 · 036b70d · 036b70d
1 parent 335c4f7
commit 036b70d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 29 deletions.
diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
@@ -28,28 +28,29 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
     };
 
     const unblock = () => {
-        const callback = () => {
-            setVisibleState(false);
+        !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
 
-            if (props.fullScreen) {
-                DomHandler.unblockBodyScroll();
-                activeElementRef.current && activeElementRef.current.focus();
-            }
-
-            props.onUnblocked && props.onUnblocked();
-        };
-
-        if (maskRef.current) {
-            DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+        if (DomHandler.hasCSSAnimation(maskRef.current) > 0) {
             maskRef.current.addEventListener('animationend', () => {
-                ZIndexUtils.clear(maskRef.current);
-                callback();
+                removeMask();
             });
         } else {
-            callback();
+            removeMask();
         }
     };
 
+    const removeMask = () => {
+        ZIndexUtils.clear(maskRef.current);
+        setVisibleState(false);
+
+        if (props.fullScreen) {
+            DomHandler.unblockBodyScroll();
+            activeElementRef.current && activeElementRef.current.focus();
+        }
+
+        props.onUnblocked && props.onUnblocked();
+    };
+
     const onPortalMounted = () => {
         if (props.fullScreen) {
             DomHandler.blockBodyScroll();

diff --git a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap
@@ -16,15 +16,15 @@ exports[`BlockUI block and unblock fullscreen events: blocked-event-fullscreen 1
   <div
     class="p-blockui p-component-overlay p-component-overlay-enter p-blockui-document"
     data-pc-section="mask"
-    style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3204;"
+    style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3203;"
   />
 </body>
 `;
 
 exports[`BlockUI block and unblock fullscreen events: unblocked-event-fullscreen 1`] = `
 <body
-  class="p-overflow-hidden"
-  style="--scrollbar-width: 1024px;"
+  class=""
+  style=""
 >
   <div>
     <div
@@ -34,11 +34,6 @@ exports[`BlockUI block and unblock fullscreen events: unblocked-event-fullscreen
       data-pc-section="root"
     />
   </div>
-  <div
-    class="p-blockui p-component-overlay p-component-overlay-enter p-blockui-document p-component-overlay-leave"
-    data-pc-section="mask"
-    style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3204;"
-  />
 </body>
 `;
 
@@ -111,11 +106,6 @@ exports[`BlockUI block and unblock panel events: unblocked-event 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="p-blockui p-component-overlay p-component-overlay-enter p-component-overlay-leave"
-      data-pc-section="mask"
-      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2103;"
-    />
   </div>
 </div>
 `;
@@ -223,7 +213,7 @@ exports[`BlockUI container style and className 1`] = `
       <div
         class="block-jest p-blockui p-component-overlay p-component-overlay-enter"
         data-pc-section="mask"
-        style="cursor: move; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 4205;"
+        style="cursor: move; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2103;"
       />
     </div>
   </div>

diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
@@ -1214,4 +1214,26 @@ export default class DomHandler {
         // Seem the same
         return true;
     }
+
+    static hasCSSAnimation(element) {
+        if (element) {
+            const style = getComputedStyle(element);
+            const animationDuration = parseFloat(style.getPropertyValue('animation-duration') || '0');
+
+            return animationDuration > 0;
+        }
+
+        return false;
+    }
+
+    static hasCSSTransition(element) {
+        if (element) {
+            const style = getComputedStyle(element);
+            const transitionDuration = parseFloat(style.getPropertyValue('transition-duration') || '0');
+
+            return transitionDuration > 0;
+        }
+
+        return false;
+    }
 }