Hide tooltips on the Esc key (#26305)

* Hide the tooltip when Esc key is pressed

* Simplify ActionsDropdown

* Rename to tooltipDescription

* Use OLTooltip instead of Tooltip

GitOrigin-RevId: ee27cde2735ae3a0de5e37bfb8ab1dd99069742c

services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-toggle-with-tooltip.tsx

@@ -1,52 +0,0 @@
-import { ReactNode, forwardRef } from 'react'
-import { BsPrefixRefForwardingComponent } from 'react-bootstrap/helpers'
-import type { DropdownToggleProps } from '@/features/ui/components/types/dropdown-menu-props'
-import {
-  DropdownToggle as BS5DropdownToggle,
-  OverlayTrigger,
-  OverlayTriggerProps,
-  Tooltip,
-} from 'react-bootstrap'
-import type { MergeAndOverride } from '../../../../../../types/utils'
-
-type DropdownToggleWithTooltipProps = MergeAndOverride<
-  DropdownToggleProps,
-  {
-    children: ReactNode
-    overlayTriggerProps?: Omit<OverlayTriggerProps, 'overlay' | 'children'>
-    toolTipDescription: string
-    tooltipProps?: Omit<React.ComponentProps<typeof Tooltip>, 'children'>
-    'aria-label'?: string
-  }
->
-const DropdownToggleWithTooltip = forwardRef<
-  BsPrefixRefForwardingComponent<'button', DropdownToggleProps>,
-  DropdownToggleWithTooltipProps
->(
-  (
-    {
-      children,
-      toolTipDescription,
-      overlayTriggerProps,
-      tooltipProps,
-      id: _id,
-      ...toggleProps
-    },
-    ref
-  ) => {
-    return (
-      <OverlayTrigger
-        overlay={<Tooltip {...tooltipProps}>{toolTipDescription}</Tooltip>}
-        {...overlayTriggerProps}
-      >
-        <BS5DropdownToggle {...toggleProps} ref={ref}>
-          {children}
-        </BS5DropdownToggle>
-      </OverlayTrigger>
-    )
-  }
-)
-
-DropdownToggleWithTooltip.displayName = 'DropdownToggleWithTooltip'
-
-export default DropdownToggleWithTooltip

services/web/frontend/js/features/ui/components/bootstrap-5/tooltip.tsx

@@ -1,4 +1,10 @@
-import { cloneElement, useEffect, forwardRef } from 'react'
+import {
+  cloneElement,
+  useEffect,
+  forwardRef,
+  useState,
+  useCallback,
+} from 'react'
 import {
   OverlayTrigger,
   OverlayTriggerProps,
@@ -41,6 +47,30 @@ function Tooltip({
   overlayProps,
   hidden,
 }: TooltipProps) {
+  const [show, setShow] = useState(false)
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (show && e.key === 'Escape') {
+        setShow(false)
+        e.stopPropagation()
+      }
+    },
+    [show, setShow]
+  )
+
+  useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown, true)
+    return () => document.removeEventListener('keydown', handleKeyDown, true)
+  }, [handleKeyDown])
+
+  const hideTooltip = (e: React.MouseEvent) => {
+    if (e.currentTarget instanceof HTMLElement) {
+      e.currentTarget.blur()
+    }
+    setShow(false)
+  }
+
   const delay = overlayProps?.delay
   let delayShow = 300
   let delayHide = 300
@@ -49,12 +79,6 @@ function Tooltip({
     delayHide = typeof delay === 'number' ? delay : delay.hide
   }
 
-  const hideTooltip = (e: React.MouseEvent) => {
-    if (e.currentTarget instanceof HTMLElement) {
-      e.currentTarget.blur()
-    }
-  }
-
   return (
     <OverlayTrigger
       overlay={
@@ -69,6 +93,8 @@ function Tooltip({
       {...overlayProps}
       delay={{ show: delayShow, hide: delayHide }}
       placement={overlayProps?.placement || 'top'}
+      show={show}
+      onToggle={setShow}
     >
       {cloneElement(children, {
         onClick: callFnsInSequence(children.props.onClick, hideTooltip),