fix

Author: wxiaoguang

.eslintrc.yaml

@@ -818,7 +818,7 @@ rules:
   unicorn/consistent-destructuring: [2]
   unicorn/consistent-empty-array-spread: [2]
   unicorn/consistent-existence-index-check: [0]
-  unicorn/consistent-function-scoping: [2]
+  unicorn/consistent-function-scoping: [0]
   unicorn/custom-error-definition: [0]
   unicorn/empty-brace-spaces: [2]
   unicorn/error-message: [0]

templates/repo/issue/sidebar/label_list.tmpl

@@ -22,7 +22,7 @@
 					{{range $data.RepoLabels}}
 						{{$exclusiveScope := .ExclusiveScope}}
 						{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
-							<div class="divider"></div>
+							<div class="divider" data-scope="{{.ExclusiveScope}}"></div>
 						{{end}}
 						{{$previousExclusiveScope = $exclusiveScope}}
 						{{template "repo/issue/sidebar/label_list_item" dict "Label" .}}
@@ -32,7 +32,7 @@
 					{{range $data.OrgLabels}}
 						{{$exclusiveScope := .ExclusiveScope}}
 						{{if and (ne $previousExclusiveScope "_no_scope") (ne $previousExclusiveScope $exclusiveScope)}}
-							<div class="divider"></div>
+							<div class="divider" data-scope="{{.ExclusiveScope}}"></div>
 						{{end}}
 						{{$previousExclusiveScope = $exclusiveScope}}
 						{{template "repo/issue/sidebar/label_list_item" dict "Label" .}}

web_src/js/features/repo-issue-sidebar-combolist.test.ts

@@ -0,0 +1,54 @@
+import {createElementFromHTML} from '../utils/dom.ts';
+import {hideScopedEmptyDividers} from './repo-issue-sidebar-combolist.ts';
+
+test('hideScopedEmptyDividers-simple', () => {
+  const container = createElementFromHTML(`<div>
+<div class="divider"></div>
+<div class="item">a</div>
+<div class="divider"></div>
+<div class="divider"></div>
+<div class="item">b</div>
+<div class="divider"></div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="divider hidden transition"></div>
+<div class="item">a</div>
+<div class="divider hidden transition"></div>
+<div class="divider"></div>
+<div class="item">b</div>
+<div class="divider hidden transition"></div>
+`);
+});
+
+test('hideScopedEmptyDividers-hidden1', () => {
+  const container = createElementFromHTML(`<div>
+<div class="item">a</div>
+<div class="divider" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="item">a</div>
+<div class="divider hidden transition" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+`);
+});
+
+test('hideScopedEmptyDividers-hidden2', () => {
+  const container = createElementFromHTML(`<div>
+<div class="item" data-scope="">a</div>
+<div class="divider" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+<div class="divider" data-scope=""></div>
+<div class="item" data-scope="">c</div>
+</div>`);
+  hideScopedEmptyDividers(container);
+  expect(container.innerHTML).toEqual(`
+<div class="item" data-scope="">a</div>
+<div class="divider hidden transition" data-scope="b"></div>
+<div class="item tw-hidden" data-scope="b">b</div>
+<div class="divider hidden transition" data-scope=""></div>
+<div class="item" data-scope="">c</div>
+`);
+});

web_src/js/features/repo-issue-sidebar-combolist.ts

@@ -146,14 +146,72 @@ class IssueSidebarComboList {
 
     this.elDropdown.addEventListener('click', (e) => this.onItemClick(e));
 
+    const itemsMenu = this.elDropdown.querySelector('.scrolling.menu') || this.elDropdown.querySelector('.menu');
     fomanticQuery(this.elDropdown).dropdown('setting', {
       action: 'nothing', // do not hide the menu if user presses Enter
       fullTextSearch: 'exact',
+      onShow: () => hideScopedEmptyDividers(itemsMenu),
+      onAfterFilterItems: () => hideScopedEmptyDividers(itemsMenu),
       onHide: () => this.onHide(),
     });
   }
 }
 
+export function hideScopedEmptyDividers(container: Element) {
+  const visibleItems: Element[] = [];
+  const curScopeVisibleItems: Element[] = [];
+  let curScope = '', lastVisibleScope = '';
+  const isScopedDivider = (item: Element) => item.matches('.divider') && item.hasAttribute('data-scope');
+  const hideDivider = (item: Element) => item.classList.add('hidden', 'transition'); // dropdown has its own classes to hide items
+
+  const handleScopeSwitch = (itemScope: string) => {
+    if (curScopeVisibleItems.length === 1 && isScopedDivider(curScopeVisibleItems[0])) {
+      hideDivider(curScopeVisibleItems[0]);
+    } else if (curScopeVisibleItems.length) {
+      if (isScopedDivider(curScopeVisibleItems[0]) && lastVisibleScope === curScope) {
+        hideDivider(curScopeVisibleItems[0]);
+        curScopeVisibleItems.shift();
+      }
+      visibleItems.push(...curScopeVisibleItems);
+      lastVisibleScope = curScope;
+    }
+    curScope = itemScope;
+    curScopeVisibleItems.length = 0;
+  };
+
+  // remove the scope dividers if the scope items are empty
+  for (const item of container.children) {
+    const itemScope = item.getAttribute('data-scope') || '';
+    if (itemScope !== curScope) {
+      handleScopeSwitch(itemScope);
+    }
+    if (!item.classList.contains('filtered') && !item.classList.contains('tw-hidden')) {
+      curScopeVisibleItems.push(item as HTMLElement);
+    }
+  }
+  handleScopeSwitch('');
+
+  // hide all leading and trailing dividers
+  while (visibleItems.length) {
+    if (!visibleItems[0].matches('.divider')) break;
+    hideDivider(visibleItems[0]);
+    visibleItems.shift();
+  }
+  while (visibleItems.length) {
+    if (!visibleItems[visibleItems.length - 1].matches('.divider')) break;
+    hideDivider(visibleItems[visibleItems.length - 1]);
+    visibleItems.pop();
+  }
+  // hide all duplicate dividers
+  for (let i = 0; i < visibleItems.length; i++) {
+    const item = visibleItems[i];
+    if (!item.matches('.divider')) continue;
+    if (i === 0 || i === visibleItems.length - 1 || item.nextElementSibling?.matches('.divider')) {
+      hideDivider(item);
+    }
+  }
+}
+
 export function initIssueSidebarComboList(container: HTMLElement) {
   new IssueSidebarComboList(container).init();
 }

web_src/js/modules/fomantic/dropdown.ts

@@ -72,6 +72,13 @@ function delegateOne($dropdown: any) {
   // * If the "dropdown icon" is clicked again when the menu is visible, Fomantic calls "blurSearch", so hide the menu
   dropdownCall('internal', 'blurSearch', function () { oldBlurSearch.call(this); dropdownCall('hide') });
 
+  const oldFilterItems = dropdownCall('internal', 'filterItems');
+  dropdownCall('internal', 'filterItems', function () {
+    oldFilterItems.call(this);
+    const onAfterFilterItems = dropdownCall('setting', 'onAfterFilterItems');
+    if (onAfterFilterItems) onAfterFilterItems();
+  });
+
   // the "template" functions are used for dynamic creation (eg: AJAX)
   const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()};
   const dropdownTemplatesMenuOld = dropdownTemplates.menu;

web_src/js/webcomponents/overflow-menu.ts

@@ -12,7 +12,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement {
   mutationObserver: MutationObserver;
   lastWidth: number;
 
-  updateItems = throttle(100, () => { // eslint-disable-line unicorn/consistent-function-scoping -- https://github.com/sindresorhus/eslint-plugin-unicorn/issues/2088
+  updateItems = throttle(100, () => {
     if (!this.tippyContent) {
       const div = document.createElement('div');
       div.classList.add('tippy-target');