src/components/Project/AssignTask.jsx

@@ -47,6 +47,20 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
     },
   });
 
+  const dropdownRef = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
   const infoRef = useRef(null);
   const infoRef1 = useRef(null);
 
@@ -255,7 +269,10 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
               <div className="row mb-1">
                 <div className="col-12">
                   <div className="form-text text-start">
-                    <div className="d-flex align-items-center form-text fs-7">
+                    <div
+                      className="d-flex align-items-center form-text fs-7"
+                      ref={dropdownRef}
+                    >
                       <span className="text-dark">Select Team</span>
 
                       {/* Dropdown */}
@@ -265,9 +282,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                               ? "text-secondary"
                               : "text-primary"
                             }`}
-                          data-bs-toggle="dropdown"
-                          role="button"
-                          aria-expanded="false"
+                          onClick={() => setOpen(!open)}
                         >
                           <i className="bx bx-slider-alt ms-2"></i>
                         </a>
@@ -290,9 +305,10 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           </span>
                         )}
 
-                        {/* Dropdown Menu with Scroll */}
+                        {/* Dropdown Menu */}
+                        {open && (
                           <ul
-                          className="dropdown-menu p-2 text-capitalize"
+                            className="dropdown-menu show p-2 text-capitalize"
                             style={{ maxHeight: "300px", overflowY: "auto" }}
                           >
                             {/* All Roles */}
@@ -304,9 +320,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                   id="checkboxAllRoles"
                                   value="all"
                                   checked={selectedRoles.includes("all")}
-                                onChange={(e) =>
-                                  handleRoleChange(e, e.target.value)
-                                }
+                                  onChange={(e) => handleRoleChange(e, e.target.value)}
                                 />
                                 <label
                                   className="form-check-label ms-2"
@@ -327,9 +341,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                                     id={`checkboxRole-${role.id}`}
                                     value={role.id}
                                     checked={selectedRoles.includes(String(role.id))}
-                                  onChange={(e) =>
-                                    handleRoleChange(e, e.target.value)
-                                  }
+                                    onChange={(e) => handleRoleChange(e, e.target.value)}
                                   />
                                   <label
                                     className="form-check-label ms-2"
@@ -341,6 +353,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                               </li>
                             ))}
                           </ul>
+                        )}
                       </div>
 
                       {/* Search Box */}