Fix #6000: Improved closeOnEscape handling (#6010)

primefaces · Feb 19, 2024 · 08acd0d · 08acd0d
1 parent 5c1a5b2
commit 08acd0d
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 22 deletions.
diff --git a/components/lib/confirmpopup/ConfirmPopup.js b/components/lib/confirmpopup/ConfirmPopup.js
@@ -57,15 +57,14 @@ export const ConfirmPopup = React.memo(
 
         const acceptLabel = getPropValue('acceptLabel') || localeOption('accept');
         const rejectLabel = getPropValue('rejectLabel') || localeOption('reject');
-        const displayOrder = useDisplayOrder('dialog', visibleState);
+        const isCloseOnEscape = props.dismissable && props.closeOnEscape && visibleState;
+        const displayOrder = useDisplayOrder('dialog', isCloseOnEscape);
 
         useGlobalOnEscapeKey({
             callback: () => {
-                if (props.dismissable && props.closeOnEscape) {
-                    hide('hide');
-                }
+                hide('hide');
             },
-            when: visibleState && displayOrder,
+            when: isCloseOnEscape && displayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder]
         });
 

diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -37,7 +37,8 @@ export const Dialog = React.forwardRef((inProps, ref) => {
     const focusElementOnHide = React.useRef(null);
     const maximized = props.onMaximize ? props.maximized : maximizedState;
     const shouldBlockScroll = visibleState && (props.blockScroll || (props.maximizable && maximized));
-    const displayOrder = useDisplayOrder('dialog', visibleState);
+    const isCloseOnEscape = props.closable && props.closeOnEscape && visibleState;
+    const displayOrder = useDisplayOrder('dialog', isCloseOnEscape);
 
     const { ptm, cx, sx, isUnstyled } = DialogBase.setMetaData({
         props,
@@ -53,11 +54,9 @@ export const Dialog = React.forwardRef((inProps, ref) => {
 
     useGlobalOnEscapeKey({
         callback: (event) => {
-            if (props.closable && props.closeOnEscape) {
-                onClose(event);
-            }
+            onClose(event);
         },
-        when: visibleState && displayOrder,
+        when: isCloseOnEscape && displayOrder,
         priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder]
     });
 

diff --git a/components/lib/dialog/DialogBase.js b/components/lib/dialog/DialogBase.js
@@ -257,6 +257,7 @@ export const DialogBase = ComponentBase.extend({
         closable: true,
         closeIcon: null,
         closeOnEscape: true,
+        content: null,
         contentClassName: null,
         contentStyle: null,
         dismissableMask: false,

diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
@@ -43,11 +43,9 @@ export const Image = React.memo(
 
         useGlobalOnEscapeKey({
             callback: () => {
-                if (props.closeOnEscape) {
-                    hide();
-                }
+                hide();
             },
-            when: maskVisibleState,
+            when: props.closeOnEscape && maskVisibleState,
             priority: [
                 ESC_KEY_HANDLING_PRIORITIES.IMAGE,
                 // Assume that there could be only one image mask activated, so it's safe

diff --git a/components/lib/menu/Menu.js b/components/lib/menu/Menu.js
@@ -33,13 +33,14 @@ export const Menu = React.memo(
         const menuRef = React.useRef(null);
         const listRef = React.useRef(null);
         const targetRef = React.useRef(null);
-        const popupMenuDisplayOrder = useDisplayOrder('menu', !!(visibleState && props.popup));
+        const isCloseOnEscape = !!(visibleState && props.popup && props.closeOnEscape);
+        const popupMenuDisplayOrder = useDisplayOrder('menu', isCloseOnEscape);
 
         useGlobalOnEscapeKey({
             callback: (event) => {
                 hide(event);
             },
-            when: visibleState && props.popup && props.closeOnEscape && popupMenuDisplayOrder,
+            when: isCloseOnEscape && popupMenuDisplayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.MENU, popupMenuDisplayOrder]
         });
 

diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
@@ -54,13 +54,14 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         when: visibleState
     });
 
-    const overlayPanelDisplayOrder = useDisplayOrder('overlay-panel', visibleState);
+    const isCloseOnEscape = visibleState && props.closeOnEscape;
+    const overlayPanelDisplayOrder = useDisplayOrder('overlay-panel', isCloseOnEscape);
 
     useGlobalOnEscapeKey({
         callback: () => {
             hide();
         },
-        when: visibleState && props.closeOnEscape && overlayPanelDisplayOrder,
+        when: isCloseOnEscape && overlayPanelDisplayOrder,
         priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayPanelDisplayOrder]
     });
 

diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
@@ -28,13 +28,14 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
     const sidebarRef = React.useRef(null);
     const maskRef = React.useRef(null);
     const closeIconRef = React.useRef(null);
-    const sidebarDisplayOrder = useDisplayOrder('sidebar', visibleState);
+    const isCloseOnEscape = visibleState && props.closeOnEscape;
+    const sidebarDisplayOrder = useDisplayOrder('sidebar', isCloseOnEscape);
 
     useGlobalOnEscapeKey({
         callback: (event) => {
             onClose(event);
         },
-        when: visibleState && props.closeOnEscape && sidebarDisplayOrder,
+        when: isCloseOnEscape && sidebarDisplayOrder,
         priority: [ESC_KEY_HANDLING_PRIORITIES.SIDEBAR, sidebarDisplayOrder]
     });
 

diff --git a/components/lib/slidemenu/SlideMenu.js b/components/lib/slidemenu/SlideMenu.js
@@ -34,13 +34,14 @@ export const SlideMenu = React.memo(
         const targetRef = React.useRef(null);
         const backward = React.useRef(null);
         const slideMenuContent = React.useRef(null);
-        const slideMenuDisplayOrder = useDisplayOrder('slide-menu', visibleState);
+        const isCloseOnEscape = visibleState && props.popup && props.closeOnEscape;
+        const slideMenuDisplayOrder = useDisplayOrder('slide-menu', isCloseOnEscape);
 
         useGlobalOnEscapeKey({
             callback: (event) => {
                 hide(event);
             },
-            when: visibleState && props.popup && props.closeOnEscape && slideMenuDisplayOrder,
+            when: isCloseOnEscape && slideMenuDisplayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.SLIDE_MENU, slideMenuDisplayOrder]
         });