fix: share the tooltip escape listener

packages/design-system/src/directives/OcTooltip.spec.ts

@@ -0,0 +1,26 @@
+import OcTooltip from './OcTooltip'
+import type { DirectiveBinding } from 'vue'
+
+describe('OcTooltip', () => {
+  it('shares one document escape listener between visible tooltip instances', async () => {
+    const addEventListener = vi.spyOn(document, 'addEventListener')
+    const removeEventListener = vi.spyOn(document, 'removeEventListener')
+    const first = document.createElement('button')
+    const second = document.createElement('button')
+
+    OcTooltip.beforeMount(first, { value: 'first' } as DirectiveBinding<string>)
+    OcTooltip.beforeMount(second, { value: 'second' } as DirectiveBinding<string>)
+
+    expect(addEventListener).not.toHaveBeenCalled()
+
+    first.dispatchEvent(new Event('mouseenter'))
+    second.dispatchEvent(new Event('mouseenter'))
+    await vi.waitFor(() => expect(addEventListener).toHaveBeenCalledTimes(1))
+
+    OcTooltip.unmounted(first)
+    expect(removeEventListener).not.toHaveBeenCalled()
+
+    OcTooltip.unmounted(second)
+    expect(removeEventListener).toHaveBeenCalledTimes(1)
+  })
+})

packages/design-system/src/directives/OcTooltip.ts

@@ -7,10 +7,18 @@ interface TooltipData {
   showHandler: () => void
   hideHandler: () => void
   clickHandler: () => void
-  escapeHandler: (e: KeyboardEvent) => void
 }
 
 const tooltipMap = new WeakMap<HTMLElement, TooltipData>()
+const tooltipElements = new Set<HTMLElement>()
+
+const documentEscapeHandler = (event: KeyboardEvent) => {
+  if (event.code !== 'Escape') {
+    return
+  }
+
+  tooltipElements.forEach((el) => hideTooltip(el))
+}
 
 const showTooltip = async (el: HTMLElement) => {
   const data = tooltipMap.get(el)
@@ -32,6 +40,10 @@ const showTooltip = async (el: HTMLElement) => {
 
   document.body.appendChild(tooltipEl)
   data.tooltipEl = tooltipEl
+  tooltipElements.add(el)
+  if (tooltipElements.size === 1) {
+    document.addEventListener('keydown', documentEscapeHandler)
+  }
 
   const { x, y, placement, middlewareData } = await computePosition(el, tooltipEl, {
     placement: 'top',
@@ -72,6 +84,10 @@ const hideTooltip = (el: HTMLElement) => {
 
   data.tooltipEl.remove()
   data.tooltipEl = null
+  tooltipElements.delete(el)
+  if (tooltipElements.size === 0) {
+    document.removeEventListener('keydown', documentEscapeHandler)
+  }
 }
 
 const destroy = (el: HTMLElement) => {
@@ -87,8 +103,6 @@ const destroy = (el: HTMLElement) => {
   el.removeEventListener('mouseleave', data.hideHandler)
   el.removeEventListener('blur', data.hideHandler)
   el.removeEventListener('click', data.clickHandler)
-  document.removeEventListener('keydown', data.escapeHandler)
-
   tooltipMap.delete(el)
 }
 
@@ -113,27 +127,18 @@ const initOrUpdate = (el: HTMLElement, { value }: DirectiveBinding) => {
   const showHandler = () => showTooltip(el)
   const hideHandler = () => hideTooltip(el)
   const clickHandler = () => hideTooltip(el)
-  const escapeHandler = (e: KeyboardEvent) => {
-    if (e.code === 'Escape') {
-      hideTooltip(el)
-    }
-  }
-
   tooltipMap.set(el, {
     content: value,
     tooltipEl: null,
     showHandler,
     hideHandler,
-    clickHandler,
-    escapeHandler
+    clickHandler
   })
-
   el.addEventListener('mouseenter', showHandler)
   el.addEventListener('mouseleave', hideHandler)
   el.addEventListener('focus', showHandler)
   el.addEventListener('blur', hideHandler)
   el.addEventListener('click', clickHandler)
-  document.addEventListener('keydown', escapeHandler)
 }
 
 export default {