feat: Ignore classes in useClickOutside hook (#2135)

mondaycom · May 28, 2024 · ea42d2b · ea42d2b
1 parent 229cb72
commit ea42d2b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/core/src/hooks/useClickOutside/__stories__/useClickOutside.mdx b/packages/core/src/hooks/useClickOutside/__stories__/useClickOutside.mdx
@@ -39,6 +39,11 @@ This hook is used when you want to capture click events outside your component.
       description="Callback function to execute on outside clicks."
       required
     />
+    <FunctionArgument
+          name="ignoreClasses"
+          type="string[]"
+          description="A list of classes to ignore when checking if the click is outside the element."
+        />
     <FunctionArgument
       name="eventName"
       type="keyof HTMLElementEventMap | string"

diff --git a/packages/core/src/hooks/useClickOutside/index.ts b/packages/core/src/hooks/useClickOutside/index.ts
@@ -5,10 +5,12 @@ import { GenericEventCallback } from "../../types/events";
 export default function useClickOutside({
   ref,
   callback,
+  ignoreClasses,
   eventName = "click"
 }: {
   ref: RefObject<HTMLElement>;
   callback: GenericEventCallback;
+  ignoreClasses?: string[];
   eventName?: keyof HTMLElementEventMap | string;
 }) {
   const onClickOutsideListener = useCallback(
@@ -17,6 +19,11 @@ export default function useClickOutside({
         return;
       }
 
+      const shouldIgnoreClasses = ignoreClasses && event.target instanceof HTMLElement;
+      if (shouldIgnoreClasses && event.target.closest(ignoreClasses.join(","))) {
+        return;
+      }
+
       callback(event);
     },