fix display of dropdown filter

Author: alishawalunj

src/components/Collaboration/Collaboration.jsx

@@ -18,15 +18,10 @@ function Collaboration() {
   const [totalPages, setTotalPages] = useState(1);
   const [categories, setCategories] = useState([]);
   const [showCategoryDropdown, setShowCategoryDropdown] = useState(false);
-  const [showPositionDropdown, setShowPositionDropdown] = useState(false);
   const [summaries, setSummaries] = useState(null);
-  // const [positions, setPositions] = useState([]);
   const [selectedPosition, setSelectedPosition] = useState('');
-  const [selectedCategory, setSelectedCategory] = useState('');
-  const categoryRef = useRef(null);
-  const positionRef = useRef(null);
+
   const dropdownRef = useRef(null);
-  // Modal
   const [selectedJob, setSelectedJob] = useState(null);
 
   const darkMode = useSelector(state => state.theme.darkMode);
@@ -64,18 +59,6 @@ function Collaboration() {
     }
   };
 
-  /* ================= FETCH CATEGORIES ================= */
-  const fetchPositions = async () => {
-    try {
-      const res = await fetch(`${ApiEndpoint}/jobs/positions`);
-      const data = await res.json();
-
-      setPositions((data.positions || []).sort((a, b) => a.localeCompare(b)));
-    } catch {
-      toast.error('Error fetching positions');
-    }
-  };
-
   /* ================= EFFECTS ================= */
   useEffect(() => {
     fetchCategories();
@@ -84,8 +67,9 @@ function Collaboration() {
   useEffect(() => {
     setCurrentPage(1);
     fetchJobs();
-  }, [searchTerm, selectedCategory]);
+  }, [searchTerm, categoriesSelected]);
 
+  /* ================= FILTERED JOBS ================= */
   const filteredJobs = useMemo(() => {
     if (!selectedPosition) return allJobs;
 
@@ -94,22 +78,7 @@ function Collaboration() {
     );
   }, [allJobs, selectedPosition]);
 
-  const positions = useMemo(() => {
-    const uniquePositions = [
-      ...new Set(
-        allJobs
-          .filter(
-            job =>
-              !selectedCategory || job.category?.toLowerCase() === selectedCategory.toLowerCase(),
-          )
-          .map(job => job.position || job.title)
-          .filter(Boolean),
-      ),
-    ];
-
-    return uniquePositions.sort((a, b) => a.localeCompare(b));
-  }, [allJobs, selectedCategory]);
-
+  /* ================= PAGINATION ================= */
   useEffect(() => {
     const start = (currentPage - 1) * ADS_PER_PAGE;
     setJobAds(filteredJobs.slice(start, start + ADS_PER_PAGE));
@@ -118,28 +87,25 @@ function Collaboration() {
     setTotalPages(Math.max(calculatedPages, 1));
   }, [filteredJobs, currentPage]);
 
+  /* ================= ESC CLOSE MODAL ================= */
   useEffect(() => {
     if (!selectedJob) return;
     const esc = e => e.key === 'Escape' && setSelectedJob(null);
     window.addEventListener('keydown', esc);
     return () => window.removeEventListener('keydown', esc);
   }, [selectedJob]);
 
+  /* ================= CLICK OUTSIDE DROPDOWN ================= */
   useEffect(() => {
     const handleClickOutside = event => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setShowCategoryDropdown(false);
       }
     };
 
-    if (showCategoryDropdown) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [showCategoryDropdown]);
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
   /* ================= HANDLERS ================= */
   const handleSubmit = e => {
@@ -148,7 +114,7 @@ function Collaboration() {
   };
 
   const handleClearAllFilters = () => {
-    setSelectedCategory('');
+    setCategoriesSelected([]);
     setSelectedPosition('');
     setSearchTerm('');
     setQuery('');
@@ -183,7 +149,7 @@ function Collaboration() {
 
           {summaries.jobs?.length ? (
             summaries.jobs.map(job => (
-              <div key={job._id} className="job-summary-item">
+              <div key={job._id}>
                 <h4>
                   <a href={job.jobDetailsLink}>{job.title}</a>
                 </h4>
@@ -225,11 +191,7 @@ function Collaboration() {
           </form>
 
           <div ref={dropdownRef} style={{ position: 'relative' }}>
-            <button
-              type="button"
-              onClick={() => setShowCategoryDropdown(p => !p)}
-              aria-expanded={showCategoryDropdown}
-            >
+            <button type="button" onClick={() => setShowCategoryDropdown(p => !p)}>
               Select Categories ▼
             </button>
 
@@ -257,20 +219,17 @@ function Collaboration() {
         {/* HEADINGS */}
         <div className={styles.headings}>
           <h1 className={styles.jobHead}>LIKE TO WORK WITH US? APPLY NOW!</h1>
-          <a className="btn" href="https://www.onecommunityglobal.org/collaboration/">
-            ← Return to One Community Collaboration Page
-          </a>
         </div>
 
         {/* QUERY TEXT */}
-        <div className="job-queries">
+        <div>
           <p>
             {searchTerm
               ? `Listing results for '${searchTerm}'`
               : selectedPosition
-              ? `Listing results for '${selectedPosition}' in '${selectedCategory}'`
-              : selectedCategory
-              ? `Listing results for '${selectedCategory}'`
+              ? `Listing results for '${selectedPosition}'`
+              : categoriesSelected.length
+              ? 'Listing results for selected categories'
               : 'Listing all job ads.'}
           </p>
           <button className="btn btn-secondary" onClick={handleShowSummaries}>
@@ -279,10 +238,13 @@ function Collaboration() {
         </div>
 
         {/* FILTER CHIPS */}
-        {(selectedCategory || selectedPosition) && (
+        {(categoriesSelected.length > 0 || selectedPosition) && (
           <div className={styles.jobQueries}>
-            {selectedCategory && <span className={styles.chip}>{selectedCategory}</span>}
-            {selectedPosition && <span className={styles.chip}>{selectedPosition}</span>}
+            {categoriesSelected.map(cat => (
+              <span key={cat} className={styles.chip}>
+                {cat}
+              </span>
+            ))}
             <button className={styles.clearAllButton} onClick={handleClearAllFilters}>
               Clear All
             </button>
@@ -328,14 +290,9 @@ function Collaboration() {
 
       {/* MODAL */}
       {selectedJob && (
-        <div className={styles.modalOverlay} aria-hidden="true">
+        <div className={styles.modalOverlay}>
           <div className={styles.modal}>
-            <button
-              type="button"
-              className={styles.closeButton}
-              aria-label="Close role details"
-              onClick={() => setSelectedJob(null)}
-            >
+            <button className={styles.closeButton} onClick={() => setSelectedJob(null)}>
               ×
             </button>
 
@@ -344,20 +301,6 @@ function Collaboration() {
               <strong>Category:</strong> {selectedJob.category}
             </p>
             <p>{selectedJob.description}</p>
-
-            <div className={styles.modalActions}>
-              <a
-                className="btn btn-secondary"
-                href={`https://www.onecommunityglobal.org/collaboration/seeking-${slugify(
-                  selectedJob.category,
-                )}`}
-              >
-                View Full Details
-              </a>
-              <button className="btn btn-primary" disabled>
-                Apply Now
-              </button>
-            </div>
           </div>
         </div>
       )}

src/components/Collaboration/Collaboration.module.css

@@ -113,6 +113,12 @@
   background-color: #84cc16;
 }
 
+.dropdownItem input {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
 .dark .navbar button,
 .dark .navbar input {
   color: #020617;
@@ -148,17 +154,15 @@
   position: absolute;
   top: calc(100% + 6px);
   left: 0;
-  width: max-content;
-  max-width: min(100%, 280px);
-  min-width: 180px;
-  max-height: 300px;
+  width: 240px;
+  max-height: 280px;
   overflow-y: auto;
   background-color: #fff;
-  padding: 8px 0;
   border-radius: 8px;
   border: 1px solid #ccc;
-  z-index: 2000;
-  box-shadow: 0 8px 20px rgb(0 0 0 / 20%);
+  z-index: 9999;
+  box-shadow: 0 8px 20px rgb(0 0 0 / 15%);
+  animation: dropdownFade 0.15s ease-in-out;
 }
 
 .dropdownWrapper {
@@ -168,19 +172,13 @@
 }
 
 .dropdownItem {
-  width: 100%;
-  text-align: left;
+  display: flex;
+  align-items: center;
+  gap: 10px;
   padding: 10px 14px;
   cursor: pointer;
   font-size: 14px;
-  background: transparent;
-  border: none;
-  outline: none;
   color: #333;
-  transition: background 0.2s ease;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .dropdownItem:hover {