diff --git a/packages/react/src/components/Popover/index.tsx b/packages/react/src/components/Popover/index.tsx index 9bb4c0625..a7e1b2da9 100644 --- a/packages/react/src/components/Popover/index.tsx +++ b/packages/react/src/components/Popover/index.tsx @@ -212,7 +212,7 @@ const Popover = forwardRef( callback: handleClosePopover, active: show }, - [handleClosePopover] + [show] ); if (!show || !isBrowser()) return null; diff --git a/packages/react/src/components/Tooltip/index.tsx b/packages/react/src/components/Tooltip/index.tsx index 50dd2aca5..726c5c175 100644 --- a/packages/react/src/components/Tooltip/index.tsx +++ b/packages/react/src/components/Tooltip/index.tsx @@ -136,14 +136,17 @@ export default function Tooltip({ initialPlacement; // Only listen to key ups when the tooltip is visible - useEscapeKey({ - callback: (event) => { - event.preventDefault(); - setShowTooltip(false); + useEscapeKey( + { + callback: (event) => { + event.preventDefault(); + setShowTooltip(false); + }, + capture: true, + active: showTooltip && typeof showProp !== 'boolean' }, - capture: true, - active: showTooltip && typeof showProp !== 'boolean' - }); + [setShowTooltip] + ); // Handle hover and focus events for the targetElement useEffect(() => { diff --git a/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx b/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx index 7eaaa09d1..82e07c11e 100644 --- a/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx +++ b/packages/react/src/components/TwoColumnPanel/TwoColumnPanel.tsx @@ -4,8 +4,7 @@ import React, { cloneElement, isValidElement, useRef, - useLayoutEffect, - useEffect + useLayoutEffect } from 'react'; import { useId } from 'react-id-generator'; import FocusTrap from 'focus-trap-react'; @@ -223,29 +222,6 @@ const TwoColumnPanel = forwardRef( [setCollapsed] ); - useEffect(() => { - const handleEscape = (event: KeyboardEvent) => { - if ( - event.key === 'Escape' || - event.key === 'Esc' || - event.keyCode === 27 - ) { - setCollapsed(true); - } - }; - - const targetElement = document.body; - if (isFocusTrap) { - targetElement.addEventListener('keyup', handleEscape); - } else { - targetElement.removeEventListener('keyup', handleEscape); - } - - return () => { - targetElement.removeEventListener('keyup', handleEscape); - }; - }, [isFocusTrap]); - const handleClickOutside = () => { if (!isCollapsed && isFocusTrap) { setCollapsed(true); diff --git a/packages/react/src/utils/useEscapeKey.ts b/packages/react/src/utils/useEscapeKey.ts index 392812165..a54b8f5ae 100644 --- a/packages/react/src/utils/useEscapeKey.ts +++ b/packages/react/src/utils/useEscapeKey.ts @@ -13,8 +13,8 @@ const isEscapeKey = (event: KeyboardEvent) => */ export default function useEscapeKey( options: { - callback: (event: KeyboardEvent) => void; active?: boolean; + callback: (event: KeyboardEvent) => void; event?: 'keydown' | 'keypress' | 'keyup'; target?: T | React.RefObject | React.MutableRefObject; defaultPrevented?: boolean; @@ -44,11 +44,19 @@ export default function useEscapeKey( }; if (active) { - target?.addEventListener(event, eventListener, options?.capture); + target?.addEventListener(event, eventListener, options.capture); } return () => { - target?.removeEventListener(event, eventListener, options?.capture); + target?.removeEventListener(event, eventListener, options.capture); }; - }, [active, event, target, ...dependencies]); + }, [ + active, + callback, + event, + target, + options.capture, + options.defaultPrevented, + ...dependencies + ]); }