fix multi-select dropdown component w.r.t. api call

Author: TrixiRa

frontend/src/components/shared/MultiSelectModalDropdown/MultiSelectModalDropdown.jsx

@@ -6,6 +6,7 @@ const MultiSelectModalDropdown = ({
   onClose,
   title,
   placeholder,
+  searchValue,
   onSearchChange,
   suggestions,
   selectedItems,
@@ -36,7 +37,10 @@ const MultiSelectModalDropdown = ({
     if (isSelected) {
       onDeselect(item);
     } else {
-      onSelect(item);
+      // Prevent duplicate selection
+      if (!selectedItems.some(selected => selected.id === item.id)) {
+        onSelect(item);
+      }
     }
   };
 
@@ -48,6 +52,11 @@ const MultiSelectModalDropdown = ({
     return selectedItems.some(selected => selected.id === item.id);
   };
 
+  // Filter out already selected items from suggestions
+  const availableSuggestions = suggestions.filter(item => 
+    !selectedItems.some(selected => selected.id === item.id)
+  );
+
   if (!isOpen) return null;
 
   return (
@@ -98,7 +107,7 @@ const MultiSelectModalDropdown = ({
               Loading...
             </div>
           )}
-          {!loading && suggestions.map((item) => (
+          {!loading && availableSuggestions.map((item) => (
             <div
               key={item.id}
               onClick={() => handleItemToggle(item)}
@@ -113,7 +122,7 @@ const MultiSelectModalDropdown = ({
               <span className={styles.itemText}>{item.display_name}</span>
             </div>
           ))}
-          {!loading && suggestions.length === 0 && inputValue.length >= minSearchLength && (
+          {!loading && availableSuggestions.length === 0 && inputValue.length >= minSearchLength && (
             <div className={styles.noResults}>
               {noResultsMessage}
             </div>

frontend/src/components/shared/SearchForm.jsx

@@ -50,13 +50,14 @@ const SearchForm = ({
 
   return (
     <div style={{ 
-      background: '#1a1a1a', 
+      background: 'rgba(26, 26, 26, 0.25)', 
+      backdropFilter: 'blur(4px)',
       borderRadius: 16, 
       boxShadow: '0 4px 24px rgba(0,0,0,0.3)', 
       padding: 32, 
       maxWidth: 900, 
       margin: '0 auto 2rem auto',
-      border: '1px solid #404040'
+      border: '1px solid rgba(64, 64, 64, 0.2)'
     }}>
       <form onSubmit={e => { e.preventDefault(); onSearch(); }} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
         <div style={labelStyle}>
@@ -143,7 +144,7 @@ const SearchForm = ({
           <button 
             type="button" 
             style={{ 
-              background: '#1a1a1a', 
+              background: 'rgba(26, 26, 26, 0.15)', 
               color: '#4F6AF6', 
               border: '1px solid #4F6AF6', 
               borderRadius: 8, 

frontend/src/pages/search_light.js

@@ -557,12 +557,16 @@ const SearchPageLight = ({ darkMode = true }) => {
               // Return a mock suggestions array for the multi-select component
               return Promise.resolve(filtered);
             }}
-            suggestions={publicationTypes.filter(pt => 
-              !selectedPublicationTypes.some(selected => selected.id === pt.id)
-            )}
+            suggestions={publicationTypes}
             selectedItems={selectedPublicationTypes}
             onSelect={(publicationType) => {
-              setSelectedPublicationTypes(prev => [...prev, publicationType]);
+              setSelectedPublicationTypes(prev => {
+                // Prevent duplicate selection
+                if (prev.some(pt => pt.id === publicationType.id)) {
+                  return prev;
+                }
+                return [...prev, publicationType];
+              });
             }}
             onDeselect={(publicationType) => {
               setSelectedPublicationTypes(prev => 
@@ -580,12 +584,16 @@ const SearchPageLight = ({ darkMode = true }) => {
             title="Select Journals"
             placeholder="Type to search journals..."
             onSearchChange={searchJournals}
-            suggestions={journalSuggestions.filter(journal => 
-              !selectedJournals.some(selected => selected.id === journal.id)
-            )}
+            suggestions={journalSuggestions}
             selectedItems={selectedJournals}
             onSelect={(journal) => {
-              setSelectedJournals(prev => [...prev, journal]);
+              setSelectedJournals(prev => {
+                // Prevent duplicate selection
+                if (prev.some(j => j.id === journal.id)) {
+                  return prev;
+                }
+                return [...prev, journal];
+              });
             }}
             onDeselect={(journal) => {
               setSelectedJournals(prev =>