Tooltip2: Prevent closing other overlays when tooltip has the focus a…

…nd ESC is hit (#4471) * prevent closing other overlays when tooltip has the focus * Create stale-ties-cover.md * wrap user interaction into act fn
primer · Apr 11, 2024 · aa8b6d8 · aa8b6d8
1 parent ae14db7
commit aa8b6d8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 11 deletions.
diff --git a/.changeset/stale-ties-cover.md b/.changeset/stale-ties-cover.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Tooltipv2: Prevent closing other overlays when tooltip has the focus when ESC is hit
diff --git a/packages/react/src/Overlay/Overlay.features.stories.tsx b/packages/react/src/Overlay/Overlay.features.stories.tsx
@@ -18,6 +18,7 @@ import {
   ActionMenu,
 } from '..'
 import type {AnchorSide} from '@primer/behaviors'
+import {Tooltip} from '../TooltipV2'
 
 export default {
   title: 'Private/Components/Overlay',
@@ -302,15 +303,17 @@ export const NestedOverlays = () => {
               </CheckboxGroup>
             </Box>
             <ActionList.Divider />
-            <Button
-              variant="invisible"
-              ref={secondaryButtonRef}
-              sx={{px: 2, mx: 2, display: 'flex'}}
-              leadingVisual={PlusIcon}
-              onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}
-            >
-              Create list
-            </Button>
+            <Tooltip text="Allows you to add more lists">
+              <Button
+                variant="invisible"
+                ref={secondaryButtonRef}
+                sx={{px: 2, mx: 2, display: 'flex'}}
+                leadingVisual={PlusIcon}
+                onClick={() => setCreateListOverlayOpen(!createListOverlayOpen)}
+              >
+                Create list
+              </Button>
+            </Tooltip>
           </Box>
           {createListOverlayOpen && (
             <Overlay

diff --git a/packages/react/src/TooltipV2/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx
@@ -1,7 +1,7 @@
 import React, {Children, useEffect, useRef, useState} from 'react'
 import type {SxProp} from '../sx'
 import sx from '../sx'
-import {useId, useProvidedRefOrCreate} from '../hooks'
+import {useId, useProvidedRefOrCreate, useOnEscapePress} from '../hooks'
 import {invariant} from '../utils/invariant'
 import {warning} from '../utils/warning'
 import styled from 'styled-components'
@@ -195,6 +195,8 @@ export const Tooltip = React.forwardRef(
 
     const [calculatedDirection, setCalculatedDirection] = useState<TooltipDirection>(direction)
 
+    const [isPopoverOpen, setIsPopoverOpen] = useState(false)
+
     const openTooltip = () => {
       if (
         tooltipElRef.current &&
@@ -205,6 +207,7 @@ export const Tooltip = React.forwardRef(
         const tooltip = tooltipElRef.current
         const trigger = triggerRef.current
         tooltip.showPopover()
+        setIsPopoverOpen(true)
         /*
          * TOOLTIP POSITIONING
          */
@@ -228,6 +231,7 @@ export const Tooltip = React.forwardRef(
         tooltipElRef.current.matches(':popover-open')
       ) {
         tooltipElRef.current.hidePopover()
+        setIsPopoverOpen(false)
       }
     }
 
@@ -269,6 +273,17 @@ export const Tooltip = React.forwardRef(
       tooltip.setAttribute('popover', 'auto')
     }, [tooltipElRef, triggerRef, direction, type])
 
+    useOnEscapePress(
+      (event: KeyboardEvent) => {
+        if (isPopoverOpen) {
+          event.stopImmediatePropagation()
+          event.preventDefault()
+          closeTooltip()
+        }
+      },
+      [isPopoverOpen],
+    )
+
     return (
       <TooltipContext.Provider value={{tooltipId}}>
         <>

diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx
@@ -328,7 +328,10 @@ describe('ActionMenu', () => {
       ),
     )
     const button = component.getByRole('button')
-    button.focus()
+    act(() => {
+      button.focus()
+    })
+
     expect(component.getByRole('tooltip')).toBeInTheDocument()
   })