1 files changed, 11 insertions, 14 deletions
diff --git a/web_src/js/features/repo-issue-sidebar-combolist.ts b/web_src/js/features/repo-issue-sidebar-combolist.ts
index 24d620547f..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;
@@ -30,9 +30,11 @@ class IssueSidebarComboList {
   elList: HTMLElement;
   elComboValue: HTMLInputElement;
   initialValues: string[];
+  container: HTMLElement;
 
-  constructor(private container: HTMLElement) {
-    this.updateUrl = this.container.getAttribute('data-update-url');
+  constructor(container: HTMLElement) {
+    this.container = container;
+    this.updateUrl = container.getAttribute('data-update-url');
     this.updateAlgo = container.getAttribute('data-update-algo');
     this.selectionMode = container.getAttribute('data-selection-mode');
     if (!['single', 'multiple'].includes(this.selectionMode)) throw new Error(`Invalid data-update-on: ${this.selectionMode}`);
@@ -46,7 +48,7 @@ class IssueSidebarComboList {
     return Array.from(this.elDropdown.querySelectorAll('.menu > .item.checked'), (el) => el.getAttribute('data-value'));
   }
 
-  updateUiList(changedValues) {
+  updateUiList(changedValues: Array<string>) {
     const elEmptyTip = this.elList.querySelector('.item.empty-list');
     queryElemChildren(this.elList, '.item:not(.empty-list)', (el) => el.remove());
     for (const value of changedValues) {
@@ -60,7 +62,7 @@ class IssueSidebarComboList {
     toggleElem(elEmptyTip, !hasItems);
   }
 
-  async updateToBackend(changedValues) {
+  async updateToBackend(changedValues: Array<string>) {
     if (this.updateAlgo === 'diff') {
       for (const value of this.initialValues) {
         if (!changedValues.includes(value)) {
@@ -93,9 +95,7 @@ class IssueSidebarComboList {
     }
   }
 
-  async onItemClick(e) {
-    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;
 
@@ -144,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();
-}