Fix #5767: Global Escape key allow duplicate overlays

components/lib/cascadeselect/CascadeSelect.js

@@ -56,7 +56,7 @@ export const CascadeSelect = React.memo(
             callback: () => {
                 hide();
             },
-            when: overlayVisibleState,
+            when: overlayVisibleState && cascadeSelectOverlayDisplayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.CASCADE_SELECT, cascadeSelectOverlayDisplayOrder]
         });
 

components/lib/confirmpopup/ConfirmPopup.js

@@ -65,7 +65,7 @@ export const ConfirmPopup = React.memo(
                     hide('hide');
                 }
             },
-            when: visibleState,
+            when: visibleState && displayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder]
         });
 

components/lib/dialog/Dialog.js

@@ -57,7 +57,7 @@ export const Dialog = React.forwardRef((inProps, ref) => {
                 onClose(event);
             }
         },
-        when: visibleState,
+        when: visibleState && displayOrder,
         priority: [ESC_KEY_HANDLING_PRIORITIES.DIALOG, displayOrder]
     });
 

components/lib/hooks/useDisplayOrder.js

@@ -5,16 +5,15 @@ const groupToDisplayedElements = {};
 
 export const useDisplayOrder = (group, isVisible = true) => {
     const [uid] = React.useState(() => UniqueComponentId());
-
-    const [displayOrder, setDisplayOrder] = React.useState();
+    const [displayOrder, setDisplayOrder] = React.useState(0);
 
     React.useEffect(() => {
         if (isVisible) {
             if (!(group in groupToDisplayedElements)) {
                 groupToDisplayedElements[group] = [];
             }
 
-            const newDisplayOrder = groupToDisplayedElements[group].length;
+            const newDisplayOrder = groupToDisplayedElements[group].length + 1;
 
             groupToDisplayedElements[group].push(uid);
             setDisplayOrder(newDisplayOrder);

components/lib/hooks/useGlobalOnEscapeKey.js

@@ -1,5 +1,5 @@
-import { DomHandler } from '../utils/Utils';
 import { useEffect } from 'react';
+import { DomHandler } from '../utils/Utils';
 
 /**
  * Priorities of different components (bigger number handled first)
@@ -42,13 +42,11 @@ const globalEscKeyHandlingLogic = {
      */
     onGlobalKeyDown(event) {
         // Do nothing if not an "esc" key is pressed:
-        if (event.key !== 'Esc' && event.key !== 'Escape') return;
+        if (event.code !== 'Escape') return;
 
         const escKeyListeners = globalEscKeyHandlingLogic.escKeyListeners;
         const maxPrimaryPriority = Math.max(...escKeyListeners.keys());
-
         const theMostImportantEscHandlersSet = escKeyListeners.get(maxPrimaryPriority);
-
         const maxSecondaryPriority = Math.max(...theMostImportantEscHandlersSet.keys());
         const theMostImportantEscHandler = theMostImportantEscHandlersSet.get(maxSecondaryPriority);
 
@@ -106,5 +104,5 @@ export const useGlobalOnEscapeKey = ({ callback, when, priority }) => {
         if (!when) return;
 
         return globalEscKeyHandlingLogic.addListener(callback, priority);
-    }, [when, callback, priority]);
+    }, [callback, when, priority]);
 };

components/lib/menu/Menu.js

@@ -37,7 +37,7 @@ export const Menu = React.memo(
             callback: (event) => {
                 hide(event);
             },
-            when: visibleState && props.popup && props.closeOnEscape,
+            when: visibleState && props.popup && props.closeOnEscape && popupMenuDisplayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.MENU, popupMenuDisplayOrder]
         });
 

components/lib/overlaypanel/OverlayPanel.js

@@ -60,7 +60,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         callback: () => {
             hide();
         },
-        when: visibleState && props.closeOnEscape,
+        when: visibleState && props.closeOnEscape && overlayPanelDisplayOrder,
         priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayPanelDisplayOrder]
     });
 

components/lib/password/Password.js

@@ -53,7 +53,7 @@ export const Password = React.memo(
             callback: () => {
                 hide();
             },
-            when: overlayVisibleState && props.feedback,
+            when: overlayVisibleState && props.feedback && passwordDisplayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.PASSWORD, passwordDisplayOrder]
         });
         const [bindOverlayListener, unbindOverlayListener] = useOverlayListener({

components/lib/sidebar/Sidebar.js

@@ -34,7 +34,7 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
         callback: (event) => {
             onClose(event);
         },
-        when: visibleState && props.closeOnEscape,
+        when: visibleState && props.closeOnEscape && sidebarDisplayOrder,
         priority: [ESC_KEY_HANDLING_PRIORITIES.SIDEBAR, sidebarDisplayOrder]
     });
 

components/lib/slidemenu/SlideMenu.js

@@ -40,7 +40,7 @@ export const SlideMenu = React.memo(
             callback: (event) => {
                 hide(event);
             },
-            when: visibleState && props.popup && props.closeOnEscape,
+            when: visibleState && props.popup && props.closeOnEscape && slideMenuDisplayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.SLIDE_MENU, slideMenuDisplayOrder]
         });
 

components/lib/speeddial/SpeedDial.js

@@ -37,7 +37,7 @@ export const SpeedDial = React.memo(
             callback: () => {
                 hide();
             },
-            when: visible,
+            when: visible && speedDialDisplayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.SPEED_DIAL, speedDialDisplayOrder]
         });
 

components/lib/splitbutton/SplitButton.js

@@ -39,7 +39,7 @@ export const SplitButton = React.memo(
             callback: () => {
                 hide();
             },
-            when: overlayVisibleState,
+            when: overlayVisibleState && overlayDisplayOrder,
             priority: [ESC_KEY_HANDLING_PRIORITIES.SPLIT_BUTTON, overlayDisplayOrder]
         });