Merge pull request #53 from Valik3201/feature/close-dropdown-on-click…

…-outside feat: close dropdown when clicking outside
Valik3201 · Jun 18, 2024 · b402865 · b402865
2 parents d2cd859 + 2bb92ac
commit b402865
Showing 1 changed file with 31 additions and 2 deletions.
diff --git a/src/components/Invoices/FilterByStatus.tsx b/src/components/Invoices/FilterByStatus.tsx
@@ -1,3 +1,4 @@
+import { useRef, useEffect } from "react";
 import { useToggleState } from "@/src/hooks/useToggleState";
 import { InvoiceStatus } from "@/src/lib/types";
 import ArrowIcon from "@/src/icons/ArrowIcon";
@@ -12,6 +13,28 @@ export default function FilterByStatus({
 }) {
   const { state: isOpen, toggleState } = useToggleState();
 
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      toggleState();
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    } else {
+      document.removeEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
   return (
     <>
       <button
@@ -31,11 +54,17 @@ export default function FilterByStatus({
       </button>
 
       {isOpen && (
-        <div className="absolute top-14 -left-9 w-48 p-6 rounded-lg bg-white shadow-filter-light dark:bg-dark-medium dark:shadow-filter-dark">
+        <div
+          ref={dropdownRef}
+          className="absolute top-14 -left-9 w-48 p-6 rounded-lg bg-white shadow-filter-light dark:bg-dark-medium dark:shadow-filter-dark"
+        >
           <ul className="text-heading-s-variant space-y-4">
             {Object.values(InvoiceStatus).map((status) => (
               <li className="flex items-center" key={status}>
-                <label className="relative flex gap-4 items-center capitalize hover:cursor-pointer">
+                <label
+                  className="relative flex gap-4 items-center capitalize hover:cursor-pointer"
+                  onClick={(e) => e.stopPropagation()}
+                >
                   <input
                     type="checkbox"
                     checked={selectedStatuses.has(status)}