Prevent default on escape key press when dismissing tooltip (#2414)

.changeset/bright-glasses-taste.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Prevent other Overlays closing when Escape is pressed while Tooltips are open

app/components/primer/alpha/tool_tip.ts

@@ -35,7 +35,7 @@ const DIRECTION_CLASSES = [
   'tooltip-ne',
   'tooltip-se',
   'tooltip-nw',
-  'tooltip-sw'
+  'tooltip-sw',
 ]
 
 function closeOpenTooltips(except?: Element) {
@@ -272,11 +272,11 @@ class ToolTipElement extends HTMLElement {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore popoverTargetElement is not in the type definition
     this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
-      signal
+      signal,
     })
     this.ownerDocument.addEventListener('focusout', focusOutListener)
     this.ownerDocument.addEventListener('focusin', focusInListener)
-    this.ownerDocument.addEventListener('keydown', this, {signal})
+    this.ownerDocument.addEventListener('keydown', this, {signal, captures: true})
   }
 
   disconnectedCallback() {
@@ -301,6 +301,11 @@ class ToolTipElement extends HTMLElement {
     const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this
     const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover
 
+    if (showing && isEscapeKeydown) {
+      event.stopImmediatePropagation()
+      event.preventDefault()
+    }
+
     await Promise.resolve()
     if (!showing && shouldShow && !isPopoverOpen(this)) {
       this.#showReason = event.type === 'mouseenter' ? 'mouse' : 'focus'
@@ -408,7 +413,7 @@ class ToolTipElement extends HTMLElement {
     const position = getAnchoredPosition(this, this.control, {
       side: this.#side,
       align: this.#align,
-      anchorOffset: TOOLTIP_OFFSET
+      anchorOffset: TOOLTIP_OFFSET,
     })
     const anchorSide = position.anchorSide
     const align = position.anchorAlign

test/system/alpha/tooltip_test.rb

@@ -136,5 +136,25 @@ def test_tooltip_hidden_after_focus_change
 
       assert_selector("tool-tip[for='dialog-show-my-dialog']", visible: :hidden)
     end
+
+    def test_tooltip_escape_hides_only_tooltip
+      visit_preview(:tooltip_inside_primer_overlay)
+
+      find("button[popovertarget]").click
+
+      assert_selector("anchored-position[popover]", visible: :visible)
+
+      assert_selector("tool-tip[for='overlay-button']", visible: :hidden)
+
+      find("button#overlay-button").hover
+
+      assert_selector("tool-tip[for='overlay-button']", visible: :visible)
+
+      find("button#overlay-button").send_keys(:escape)
+
+      assert_selector("tool-tip[for='overlay-button']", visible: :hidden)
+
+      assert_selector("anchored-position[popover]", visible: :visible)
+    end
   end
 end