diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-06-08 12:07:08 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-06-08 12:19:28 +0200 |
| commit | 58cb40f031f395ca9efccff674ba0f2dae723f50 (patch) | |
| tree | d69539a66a83da85689b8f7e835492eedc068e1f /src/utils/hooks/use-click-outside.tsx | |
| parent | 43bddd9506d790ad6707fe71f28a4ecfa635c8f1 (diff) | |
fix(settings): close tooltip when modal is closing
The event was not captured so the tooltip remained open when the
settings was closed. It prevented to click on the toolbar buttons.
Diffstat (limited to 'src/utils/hooks/use-click-outside.tsx')
| -rw-r--r-- | src/utils/hooks/use-click-outside.tsx | 46 |
1 files changed, 0 insertions, 46 deletions
diff --git a/src/utils/hooks/use-click-outside.tsx b/src/utils/hooks/use-click-outside.tsx deleted file mode 100644 index cead98b..0000000 --- a/src/utils/hooks/use-click-outside.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { RefObject, useCallback, useEffect } from 'react'; - -/** - * Listen for click/focus outside an element and execute the given callback. - * - * @param el - A React reference to an element. - * @param callback - A callback function to execute on click outside. - */ -const useClickOutside = ( - el: RefObject<HTMLElement>, - callback: (target: EventTarget) => void -) => { - /** - * Check if an event target is outside an element. - * - * @param {RefObject<HTMLElement>} ref - A React reference object. - * @param {EventTarget} target - An event target. - * @returns {boolean} True if the event target is outside the ref object. - */ - const isTargetOutside = ( - ref: RefObject<HTMLElement>, - target: EventTarget - ): boolean => { - if (!ref.current) return false; - return !ref.current.contains(target as Node); - }; - - const handleEvent = useCallback( - (e: MouseEvent | FocusEvent) => { - if (e.target && isTargetOutside(el, e.target)) callback(e.target); - }, - [el, callback] - ); - - useEffect(() => { - document.addEventListener('mousedown', handleEvent); - document.addEventListener('focusin', handleEvent); - - return () => { - document.removeEventListener('mousedown', handleEvent); - document.removeEventListener('focusin', handleEvent); - }; - }, [handleEvent]); -}; - -export default useClickOutside; |
