From 67117a22f3c42685c7e7f013d6087bba04938ea8 Mon Sep 17 00:00:00 2001
From: Melloware <mellowaredev@gmail.com>
Date: Wed, 14 Feb 2024 15:42:51 -0500
Subject: [PATCH] consistent p-component-overlay-leave handling (#5969)

---
 components/lib/calendar/Calendar.js    |  9 +++++++--
 components/lib/dialog/Dialog.js        |  2 +-
 components/lib/image/Image.js          |  2 +-
 components/lib/sidebar/Sidebar.js      |  2 +-
 components/lib/sidebar/Sidebar.spec.js | 17 +++++++----------
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index d332846bb4..2f6b1b5098 100644
--- 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
index 899c4042eb..f7df4d0799 100644
--- 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
index dd7c363b33..5eaf360bd3 100644
--- 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
index b6ce0cf3f1..8e43aa4a13 100644
--- 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
index 36f5978ae3..d502a431dc 100644
--- 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();
+    });
 });