consistent p-component-overlay-leave handling (#5969)

primefaces · Feb 14, 2024 · 67117a2 · 67117a2
1 parent de59954
commit 67117a2
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 15 deletions.
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -1874,9 +1874,14 @@ export const Calendar = React.memo(
                     destroyMask();
                 } else {
                     !isUnstyled() && DomHandler.addClass(touchUIMask.current, 'p-component-overlay-leave');
-                    touchUIMask.current.addEventListener('animationend', () => {
+
+                    if (DomHandler.hasCSSAnimation(touchUIMask.current) > 0) {
+                        touchUIMask.current.addEventListener('animationend', () => {
+                            destroyMask();
+                        });
+                    } else {
                         destroyMask();
-                    });
+                    }
                 }
             }
         };

diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -299,7 +299,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
 
     const onExiting = () => {
         if (props.modal) {
-            DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+            !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
         }
     };
 

diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
@@ -140,7 +140,7 @@ export const Image = React.memo(
         };
 
         const onExit = () => {
-            DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+            !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
         };
 
         const onExiting = () => {

diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
@@ -84,7 +84,7 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
 
     const onExiting = () => {
         if (props.modal) {
-            DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
+            !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
         }
     };
 

diff --git a/components/lib/sidebar/Sidebar.spec.js b/components/lib/sidebar/Sidebar.spec.js
@@ -1,18 +1,15 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import { Sidebar } from './sidebar';
+import { Sidebar } from './Sidebar';
 
 describe('Sidebar', () => {
-    test(
-        'can be made visible',
-        () => {
-            const hideOn = jest.fn();
+    test('can be made visible', () => {
+        const hideOn = jest.fn();
 
-            render(<Sidebar visible={true} onHide={hideOn} />);
+        render(<Sidebar visible={true} onHide={hideOn} />);
 
-            const sidebar = screen.queryByRole('complementary');
+        const sidebar = screen.queryByRole('complementary');
 
-            expect(sidebar).toBeVisible();
-        }
-    );
+        expect(sidebar).toBeVisible();
+    });
 });