6 files changed, 27 insertions, 31 deletions
diff --git a/web_src/css/base.css b/web_src/css/base.css
index dc79f2f322..a28fb7b92a 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1188,16 +1188,6 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil
   text-overflow: ellipsis !important;
 }
 
-.ui.dropdown.text-flex-grow {
-  display: flex;
-}
-
-.ui.dropdown.text-flex-grow > .text {
-  display: flex;
-  flex-grow: 1;
-  justify-content: space-between;
-}
-
 .svg.octicon-file-directory-fill,
 .svg.octicon-file-directory-open-fill,
 .svg.octicon-file-submodule {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 0044b6b04d..306db34300 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -50,23 +50,33 @@
   width: 300px;
 }
 
-.issue-sidebar-combo .ui.dropdown .item:not(.checked) .item-check-mark {
-  visibility: hidden;
+.issue-content-right .ui.dropdown.full-width {
+  width: 100%;
+}
+
+.issue-content-right .ui.dropdown.full-width > .fixed-text {
+  display: flex;
+  flex-grow: 1;
+  justify-content: space-between;
 }
 
-.issue-content-right .dropdown > .menu {
+.issue-content-right .ui.dropdown > .menu {
   max-width: 270px;
   min-width: 0;
   max-height: 500px;
   overflow-x: auto;
 }
 
-.issue-content-right .dropdown > .menu .item-secondary-info small {
+.issue-content-right .ui.dropdown > .menu .item-secondary-info small {
   display: block;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
+.issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark {
+  visibility: hidden;
+}
+
 @media (max-width: 767.98px) {
   .issue-content-left,
   .issue-content-right {
diff --git a/web_src/fomantic/build/components/dropdown.js b/web_src/fomantic/build/components/dropdown.js
index 163de9f751..9d0e07b33b 100644
--- a/web_src/fomantic/build/components/dropdown.js
+++ b/web_src/fomantic/build/components/dropdown.js
@@ -4080,7 +4080,7 @@ $.fn.dropdown.settings = {
     search       : 'input.search, .menu > .search > input, .menu input.search',
     sizer        : '> span.sizer',
     text         : '> .text:not(.icon)',
-    unselectable : '.disabled, .filtered',
+    unselectable : '.disabled, .filtered, .tw-hidden', // GITEA-PATCH: tw-hidden hides the item so it is also unselectable
     clearIcon    : '> .remove.icon'
   },
 
diff --git a/web_src/js/features/repo-issue-sidebar-combolist.ts b/web_src/js/features/repo-issue-sidebar-combolist.ts
index c30d4fe50d..f25c0a77c6 100644
--- a/web_src/js/features/repo-issue-sidebar-combolist.ts
+++ b/web_src/js/features/repo-issue-sidebar-combolist.ts
@@ -1,6 +1,6 @@
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {POST} from '../modules/fetch.ts';
-import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
+import {addDelegatedEventListener, queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
 
 // if there are draft comments, confirm before reloading, to avoid losing comments
 function issueSidebarReloadConfirmDraftComment() {
@@ -22,7 +22,7 @@ function issueSidebarReloadConfirmDraftComment() {
   window.location.reload();
 }
 
-class IssueSidebarComboList {
+export class IssueSidebarComboList {
   updateUrl: string;
   updateAlgo: string;
   selectionMode: string;
@@ -95,9 +95,7 @@ class IssueSidebarComboList {
     }
   }
 
-  async onItemClick(e: Event) {
-    const elItem = (e.target as HTMLElement).closest('.item');
-    if (!elItem) return;
+  async onItemClick(elItem: HTMLElement, e: Event) {
     e.preventDefault();
     if (elItem.hasAttribute('data-can-change') && elItem.getAttribute('data-can-change') !== 'true') return;
 
@@ -146,16 +144,13 @@ class IssueSidebarComboList {
     }
     this.initialValues = this.collectCheckedValues();
 
-    this.elDropdown.addEventListener('click', (e) => this.onItemClick(e));
+    addDelegatedEventListener(this.elDropdown, 'click', '.item', (el, e) => this.onItemClick(el, e));
 
     fomanticQuery(this.elDropdown).dropdown('setting', {
       action: 'nothing', // do not hide the menu if user presses Enter
       fullTextSearch: 'exact',
+      hideDividers: 'empty',
       onHide: () => this.onHide(),
     });
   }
 }
-
-export function initIssueSidebarComboList(container: HTMLElement) {
-  new IssueSidebarComboList(container).init();
-}
diff --git a/web_src/js/features/repo-issue-sidebar.ts b/web_src/js/features/repo-issue-sidebar.ts
index f84bed127f..290e1ae000 100644
--- a/web_src/js/features/repo-issue-sidebar.ts
+++ b/web_src/js/features/repo-issue-sidebar.ts
@@ -1,6 +1,6 @@
 import {POST} from '../modules/fetch.ts';
 import {queryElems, toggleElem} from '../utils/dom.ts';
-import {initIssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
+import {IssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
 
 function initBranchSelector() {
   // TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl"
@@ -48,5 +48,5 @@ export function initRepoIssueSidebar() {
   initRepoIssueDue();
 
   // init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions
-  queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => initIssueSidebarComboList(el));
+  queryElems<HTMLElement>(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
 }
diff --git a/web_src/js/modules/fomantic/dropdown.ts b/web_src/js/modules/fomantic/dropdown.ts
index 1b05939cf3..0360b8ef95 100644
--- a/web_src/js/modules/fomantic/dropdown.ts
+++ b/web_src/js/modules/fomantic/dropdown.ts
@@ -228,12 +228,13 @@ function attachDomEvents(dropdown: HTMLElement, focusable: HTMLElement, menu: HT
   dropdown.addEventListener('keydown', (e: KeyboardEvent) => {
     // here it must use keydown event before dropdown's keyup handler, otherwise there is no Enter event in our keyup handler
     if (e.key === 'Enter') {
-      const dropdownCall = fomanticDropdownFn.bind($(dropdown));
-      let $item = dropdownCall('get item', dropdownCall('get value'));
-      if (!$item) $item = $(menu).find('> .item.selected'); // when dropdown filters items by input, there is no "value", so query the "selected" item
+      const elItem = menu.querySelector<HTMLElement>(':scope > .item.selected, .menu > .item.selected');
       // if the selected item is clickable, then trigger the click event.
       // we can not click any item without check, because Fomantic code might also handle the Enter event. that would result in double click.
-      if ($item?.[0]?.matches('a, .js-aria-clickable')) $item[0].click();
+      if (elItem?.matches('a, .js-aria-clickable') && !elItem.matches('.tw-hidden, .filtered')) {
+        e.preventDefault();
+        elItem.click();
+      }
     }
   });