Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-07-31 22:45:48 +02:00
Code Issues Activity

fix: various dropdown problems (#38020)

Browse Source 
1. remove legacy onResponseKeepSelectedItem, refactor the code to
dropdown.js
2. make dropdown correctly handle "single selection + remote query + filter"
    * fix #38018
3. fix incorrect "transition" class usage for the dropdown dividers
This commit is contained in:
wxiaoguang
2026-06-07 10:33:16 +00:00
committed by GitHub
parent 9bbea90bfe
commit e2fbfc8730
5 changed files with 25 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/js/modules/fomantic/dropdown.test.ts
+8 -8
View File
@@ -13,13 +13,13 @@ test('hideScopedEmptyDividers-simple', () => {
</div>`);
hideScopedEmptyDividers(container);
expect(container.innerHTML).toEqual(`
<div class="divider hidden transition"></div>
<div class="divider hidden"></div>
<div class="item">a</div>
<div class="divider hidden transition"></div>
<div class="divider hidden transition"></div>
<div class="divider hidden"></div>
<div class="divider hidden"></div>
<div class="divider"></div>
<div class="item">b</div>
<div class="divider hidden transition"></div>
<div class="divider hidden"></div>
`);
});
@@ -35,7 +35,7 @@ test('hideScopedEmptyDividers-items-all-filtered', () => {
hideScopedEmptyDividers(container);
expect(container.innerHTML).toEqual(`
<div class="any"></div>
<div class="divider hidden transition"></div>
<div class="divider hidden"></div>
<div class="item filtered">a</div>
<div class="item filtered">b</div>
<div class="divider"></div>
@@ -52,7 +52,7 @@ test('hideScopedEmptyDividers-hide-last', () => {
hideScopedEmptyDividers(container);
expect(container.innerHTML).toEqual(`
<div class="item">a</div>
<div class="divider hidden transition" data-scope="b"></div>
<div class="divider hidden" data-scope="b"></div>
<div class="item tw-hidden" data-scope="b">b</div>
`);
});
@@ -68,9 +68,9 @@ test('hideScopedEmptyDividers-scoped-items', () => {
hideScopedEmptyDividers(container);
expect(container.innerHTML).toEqual(`
<div class="item" data-scope="">a</div>
<div class="divider hidden transition" data-scope="b"></div>
<div class="divider hidden" data-scope="b"></div>
<div class="item tw-hidden" data-scope="b">b</div>
<div class="divider hidden transition" data-scope=""></div>
<div class="divider hidden" data-scope=""></div>
<div class="item" data-scope="">c</div>
`);
});
web_src/js/modules/fomantic/dropdown.ts
+2 -19
View File
@@ -8,7 +8,6 @@ const fomanticDropdownFn = $.fn.dropdown;
export function initAriaDropdownPatch() {
if ($.fn.dropdown === ariaDropdownFn) throw new Error('initAriaDropdownPatch could only be called once');
$.fn.dropdown = ariaDropdownFn;
$.fn.fomanticExt.onResponseKeepSelectedItem = onResponseKeepSelectedItem;
$.fn.fomanticExt.onDropdownAfterFiltered = onDropdownAfterFiltered;
(ariaDropdownFn as FomanticInitFunction).settings = fomanticDropdownFn.settings;
}
@@ -296,8 +295,8 @@ export function hideScopedEmptyDividers(container: Element) {
let curScope: string = '', lastVisibleScope: string = '';
const isDivider = (item: Element) => item.classList.contains('divider');
const isScopedDivider = (item: Element) => isDivider(item) && item.hasAttribute('data-scope');
const hideDivider = (item: Element) => item.classList.add('hidden', 'transition'); // dropdown has its own classes to hide items
const showDivider = (item: Element) => item.classList.remove('hidden', 'transition');
const hideDivider = (item: Element) => item.classList.add('hidden'); // dropdown has its own classes to hide items
const showDivider = (item: Element) => item.classList.remove('hidden');
const isHidden = (item: Element) => item.classList.contains('hidden') || item.classList.contains('filtered') || item.classList.contains('tw-hidden');
const handleScopeSwitch = (itemScope: string) => {
if (curScopeVisibleItems.length === 1 && isScopedDivider(curScopeVisibleItems[0])) {
@@ -347,19 +346,3 @@ export function hideScopedEmptyDividers(container: Element) {
if (visibleItems[i + 1].matches('.divider')) hideDivider(visibleItems[i]);
}
}
function onResponseKeepSelectedItem(dropdown: typeof $ | HTMLElement, selectedValue: string) {
// There is a bug in fomantic dropdown when using "apiSettings" to fetch data
// * when there is a selected item, the dropdown insists on hiding the selected one from the list:
// * in the "filter" function: ('[data-value="'+value+'"]').addClass(className.filtered)
//
// When user selects one item, and click the dropdown again,
// then the dropdown only shows other items and will select another (wrong) one.
// It can't be easily fix by using setTimeout(patch, 0) in `onResponse` because the `onResponse` is called before another `setTimeout(..., timeLeft)`
// Fortunately, the "timeLeft" is controlled by "loadingDuration" which is always zero at the moment, so we can use `setTimeout(..., 10)`
const elDropdown = (dropdown instanceof HTMLElement) ? dropdown : (dropdown as any)[0];
setTimeout(() => {
queryElems(elDropdown, `.menu .item[data-value="${CSS.escape(selectedValue)}"].filtered`, (el) => el.classList.remove('filtered'));
$(elDropdown).dropdown('set selected', selectedValue ?? '');
}, 10);
}