Fix #5889: BlockUI in unstyled mode

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

Hide file tree

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

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;
+    }
 }