Development

frontend/src/components/shared/DropdownTrigger/DropdownTrigger.jsx

@@ -5,18 +5,32 @@ const DropdownTrigger = ({
   value,
   placeholder,
   onClick,
+  onClear,
   darkMode = false,
   disabled = false
 }) => {
   return (
     <div
       className={`${styles.triggerContainer} ${darkMode ? styles.dark : ''} ${disabled ? styles.disabled : ''}`}
       onClick={disabled ? undefined : onClick}
-      style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
+      style={{ cursor: disabled ? 'not-allowed' : 'pointer', position: 'relative' }}
     >
       <span className={styles.triggerText}>
         {value || placeholder}
       </span>
+      {value && onClear && (
+        <button
+          className={styles.clearButton}
+          onClick={e => {
+            e.stopPropagation();
+            onClear();
+          }}
+          aria-label="Clear"
+          tabIndex={0}
+        >
+          ×
+        </button>
+      )}
       <span className={styles.triggerArrow}>▼</span>
     </div>
   );

frontend/src/components/shared/DropdownTrigger/DropdownTrigger.module.css

@@ -43,6 +43,27 @@
   transition: transform 0.15s;
 }
 
+.clearButton {
+  position: absolute;
+  right: 2rem;
+  background: none;
+  border: none;
+  color: #aaa;
+  font-size: 1.1rem;
+  cursor: pointer;
+  padding: 0 0.25rem;
+  z-index: 2;
+  line-height: 1;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.clearButton:hover {
+  color: #f44336;
+}
+
 .triggerContainer:hover .triggerArrow {
   color: #4F6AF6;
 } 

frontend/src/components/shared/SearchForm.jsx

@@ -8,7 +8,11 @@ const SearchForm = ({
   searchKeyword,
   setSearchKeyword,
   author,
+  setAuthor,
+  setAuthorObject,
   institution,
+  setInstitution,
+  setInstitutionObject,
   onSearch,
   onOpenAdvancedFilters,
   onAuthorClick,
@@ -100,6 +104,10 @@ const SearchForm = ({
                 value={author}
                 placeholder="Click to search authors..."
                 onClick={onAuthorClick}
+                onClear={author ? () => {
+                  setAuthor("");
+                  if (typeof setAuthorObject === 'function') setAuthorObject(null);
+                } : undefined}
                 darkMode={darkMode}
               />
             </div>
@@ -116,6 +124,10 @@ const SearchForm = ({
                 value={institution}
                 placeholder="Click to search institutions..."
                 onClick={onInstitutionClick}
+                onClear={institution ? () => {
+                  setInstitution("");
+                  if (typeof setInstitutionObject === 'function') setInstitutionObject(null);
+                } : undefined}
                 darkMode={darkMode}
               />
             </div>

frontend/src/pages/search.js

@@ -369,7 +369,11 @@ const SearchPageLight = ({ darkMode = true }) => {
                 searchKeyword={searchKeyword}
                 setSearchKeyword={setSearchKeyword}
                 author={author}
+                setAuthor={setAuthor}
+                setAuthorObject={setAuthorObject}
                 institution={institution}
+                setInstitution={setInstitution}
+                setInstitutionObject={setInstitutionObject}
                 onSearch={handleSearch}
                 onOpenAdvancedFilters={() => setShowAdvanced(true)}
                 onAuthorClick={() => {

frontend/src/pages/trend_graphs.js

@@ -426,7 +426,11 @@ export const PositionDetailLight = ({ darkMode = true }) => {
                 searchKeyword={searchKeyword}
                 setSearchKeyword={setSearchKeyword}
                 author={author}
+                setAuthor={setAuthor}
+                setAuthorObject={setAuthorObject}
                 institution={institution}
+                setInstitution={setInstitution}
+                setInstitutionObject={setInstitutionObject}
                 onSearch={handleSearch}
                 onOpenAdvancedFilters={() => setShowAdvanced(true)}
                 onAuthorClick={() => {

frontend/src/pages/world_map.js

@@ -208,7 +208,11 @@ const WorldMapPapersPage = () => {
                 searchKeyword={searchKeyword}
                 setSearchKeyword={setSearchKeyword}
                 author={author}
+                setAuthor={setAuthor}
+                setAuthorObject={setAuthorObject}
                 institution={institution}
+                setInstitution={setInstitution}
+                setInstitutionObject={setInstitutionObject}
                 onSearch={handleSearch}
                 onOpenAdvancedFilters={() => setShowAdvanced(true)}
                 onAuthorClick={() => {