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,19 +269,20 @@ 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 */}
                       <div className="dropdown position-relative d-inline-block">
                         <a
                           className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
-                            ? "text-secondary"
+                              ? "text-secondary"
-                            : "text-primary"
+                              : "text-primary"
                             }`}
-                          data-bs-toggle="dropdown"
+                          onClick={() => setOpen(!open)}
-                          role="button"
-                          aria-expanded="false"
                         >
                           <i className="bx bx-slider-alt ms-2"></i>
                         </a>
@@ -290,57 +305,55 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
                           </span>
                         )}
 
-                        {/* Dropdown Menu with Scroll */}
+                        {/* Dropdown Menu */}
-                        <ul
+                        {open && (
-                          className="dropdown-menu p-2 text-capitalize"
+                          <ul
-                          style={{ maxHeight: "300px", overflowY: "auto" }}
+                            className="dropdown-menu show p-2 text-capitalize"
-                        >
+                            style={{ maxHeight: "300px", overflowY: "auto" }}
-                          {/* All Roles */}
+                          >
-                          <li key="all">
+                            {/* All Roles */}
-                            <div className="form-check dropdown-item py-0">
+                            <li key="all">
-                              <input
-                                className="form-check-input"
-                                type="checkbox"
-                                id="checkboxAllRoles"
-                                value="all"
-                                checked={selectedRoles.includes("all")}
-                                onChange={(e) =>
-                                  handleRoleChange(e, e.target.value)
-                                }
-                              />
-                              <label
-                                className="form-check-label ms-2"
-                                htmlFor="checkboxAllRoles"
-                              >
-                                All Roles
-                              </label>
-                            </div>
-                          </li>
-
-                          {/* Dynamic Roles */}
-                          {jobRolesForDropdown?.map((role) => (
-                            <li key={role.id}>
                               <div className="form-check dropdown-item py-0">
                                 <input
                                   className="form-check-input"
                                   type="checkbox"
-                                  id={`checkboxRole-${role.id}`}
+                                  id="checkboxAllRoles"
-                                  value={role.id}
+                                  value="all"
-                                  checked={selectedRoles.includes(String(role.id))}
+                                  checked={selectedRoles.includes("all")}
-                                  onChange={(e) =>
+                                  onChange={(e) => handleRoleChange(e, e.target.value)}
-                                    handleRoleChange(e, e.target.value)
-                                  }
                                 />
                                 <label
                                   className="form-check-label ms-2"
-                                  htmlFor={`checkboxRole-${role.id}`}
+                                  htmlFor="checkboxAllRoles"
                                 >
-                                  {role.name}
+                                  All Roles
                                 </label>
                               </div>
                             </li>
-                          ))}
+
-                        </ul>
+                            {/* Dynamic Roles */}
+                            {jobRolesForDropdown?.map((role) => (
+                              <li key={role.id}>
+                                <div className="form-check dropdown-item py-0">
+                                  <input
+                                    className="form-check-input"
+                                    type="checkbox"
+                                    id={`checkboxRole-${role.id}`}
+                                    value={role.id}
+                                    checked={selectedRoles.includes(String(role.id))}
+                                    onChange={(e) => handleRoleChange(e, e.target.value)}
+                                  />
+                                  <label
+                                    className="form-check-label ms-2"
+                                    htmlFor={`checkboxRole-${role.id}`}
+                                  >
+                                    {role.name}
+                                  </label>
+                                </div>
+                              </li>
+                            ))}
+                          </ul>
+                        )}
                       </div>
 
                       {/* Search Box */}