Fix primefaces#7436: Button tooltip prevent display order collision

melloware · Dec 30, 2024 · e9d7806 · e9d7806
1 parent 5ae4498
commit e9d7806
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PrimeReact, { PrimeReactContext } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
-import { useMergeProps, useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES } from '../hooks/Hooks';
+import { ESC_KEY_HANDLING_PRIORITIES, useDisplayOrder, useGlobalOnEscapeKey, useMergeProps, useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
 import { DomHandler, ObjectUtils, ZIndexUtils, classNames } from '../utils/Utils';
 import { TooltipBase } from './TooltipBase';
@@ -15,6 +15,8 @@ export const Tooltip = React.memo(
         const [positionState, setPositionState] = React.useState(props.position || 'right');
         const [classNameState, setClassNameState] = React.useState('');
         const [multipleFocusEvents, setMultipleFocusEvents] = React.useState(false);
+        const isCloseOnEscape = visibleState && props.closeOnEscape;
+        const overlayDisplayOrder = useDisplayOrder('tooltip', isCloseOnEscape);
         const metaData = {
             props,
             state: {
@@ -37,8 +39,8 @@ export const Tooltip = React.memo(
             callback: () => {
                 hide();
             },
-            when: props.closeOnEscape,
-            priority: [ESC_KEY_HANDLING_PRIORITIES.TOOLTIP, 0]
+            when: isCloseOnEscape,
+            priority: [ESC_KEY_HANDLING_PRIORITIES.TOOLTIP, overlayDisplayOrder]
         });
         const elementRef = React.useRef(null);
         const textRef = React.useRef(null);