aboutsummaryrefslogtreecommitdiffstats
path: root/src/utils/hooks/use-click-outside.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2022-06-08 12:07:08 +0200
committerArmand Philippot <git@armandphilippot.com>2022-06-08 12:19:28 +0200
commit58cb40f031f395ca9efccff674ba0f2dae723f50 (patch)
treed69539a66a83da85689b8f7e835492eedc068e1f /src/utils/hooks/use-click-outside.tsx
parent43bddd9506d790ad6707fe71f28a4ecfa635c8f1 (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.tsx46
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;