feat: control whether Tooltip can be closed with Esc key (#5199)

* Control whether Tooltip can be closed with Esc key

* Move condition inside the effect

* Add `handler` to deps

* chore: update changeset

* chore: remove noop

Co-authored-by: Tim Kolberger <tim@kolberger.eu>

* test(tooltip): add tests for `closeOnEsc`

* test(tooltip): dispatch keypress event on the tooltip, not document

Co-authored-by: Tim Kolberger <tim@kolberger.eu>

.changeset/real-cooks-run.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/hooks": minor
+"@chakra-ui/tooltip": minor
+---
+
+Control whether Tooltip can be closed with Esc key

packages/hooks/src/use-event-listener.ts

@@ -18,7 +18,7 @@ export type EventListenerEnv = (() => DocumentOrElement) | DocumentOrElement
  */
 export function useEventListener<K extends keyof DocumentEventMap>(
   event: K | (string & {}),
-  handler: (event: DocumentEventMap[K]) => void,
+  handler?: (event: DocumentEventMap[K]) => void,
   env?: EventListenerEnv,
   options?: boolean | AddEventListenerOptions,
 ) {
@@ -27,11 +27,15 @@ export function useEventListener<K extends keyof DocumentEventMap>(
   React.useEffect(() => {
     const node = runIfFn(env) ?? document
 
+    if (!handler) {
+      return
+    }
+
     node.addEventListener(event, listener, options)
     return () => {
       node.removeEventListener(event, listener, options)
     }
-  }, [event, env, options, listener])
+  }, [event, env, options, listener, handler])
 
   return () => {
     const node = runIfFn(env) ?? document

packages/tooltip/src/use-tooltip.ts

@@ -33,6 +33,10 @@ export interface UseTooltipProps
    * is down
    */
   closeOnMouseDown?: boolean
+  /**
+   * If `true`, the tooltip will hide on pressing Esc key
+   */
+   closeOnEsc?: boolean
   /**
    * Callback to run when the tooltip shows
    */
@@ -64,6 +68,7 @@ export function useTooltip(props: UseTooltipProps = {}) {
     closeDelay = 0,
     closeOnClick = true,
     closeOnMouseDown,
+    closeOnEsc = true,
     onOpen: onOpenProp,
     onClose: onCloseProp,
     placement,
@@ -140,7 +145,7 @@ export function useTooltip(props: UseTooltipProps = {}) {
     [isOpen, closeWithDelay],
   )
 
-  useEventListener("keydown", onKeyDown)
+  useEventListener("keydown", closeOnEsc ? onKeyDown : undefined)
 
   React.useEffect(
     () => () => {

packages/tooltip/tests/tooltip.test.tsx

@@ -5,6 +5,7 @@ import {
   screen,
   testA11y,
   waitForElementToBeRemoved,
+  press,
 } from "@chakra-ui/test-utils"
 import * as React from "react"
 import { Tooltip, TooltipProps } from "../src"
@@ -125,3 +126,41 @@ test("should close on mouseleave if shouldWrapChildren is true and child is a di
 
   await waitForElementToBeRemoved(() => screen.getByText(tooltipLabel))
 })
+
+test("shows on mouseover and closes on pressing 'esc'", async () => {
+  render(<DummyComponent />)
+
+  act(() => {
+    fireEvent.mouseOver(screen.getByText(buttonLabel))
+  })
+
+  await screen.findByRole("tooltip")
+
+  expect(screen.getByText(buttonLabel)).toBeInTheDocument()
+  expect(screen.getByRole("tooltip")).toBeInTheDocument()
+
+  act(() => {
+    press.Escape(screen.getByRole("tooltip"))
+  })
+
+  await waitForElementToBeRemoved(() => screen.getByText(tooltipLabel))
+})
+
+test("shows on mouseover and stays on pressing 'esc' if 'closeOnEsc' is false", async () => {
+  render(<DummyComponent closeOnEsc={false} />)
+
+  act(() => {
+    fireEvent.mouseOver(screen.getByText(buttonLabel))
+  })
+
+  await screen.findByRole("tooltip")
+
+  expect(screen.getByText(buttonLabel)).toBeInTheDocument()
+  expect(screen.getByRole("tooltip")).toBeInTheDocument()
+
+  act(() => {
+    press.Escape(screen.getByRole("tooltip"))
+  })
+
+  expect(screen.getByRole("tooltip")).toBeInTheDocument()
+})