oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Improve dropdown's behavior when there is a search input in menu (#27526)

Follow #27225

The change in #27225 is not ideal, this should be the complete fix:
support the layout which Fomantic doesn't support.

authored by

wxiaoguang and committed by
GitHub 43632d9d 79e8865a

+9 -3
+9
web_src/js/modules/aria/dropdown.js
··· 57 57 function delegateOne($dropdown) { 58 58 const dropdownCall = fomanticDropdownFn.bind($dropdown); 59 59 60 + // If there is a "search input" in the "menu", Fomantic will only "focus the input" but not "toggle the menu" when the "dropdown icon" is clicked. 61 + // Actually, Fomantic UI doesn't support such layout/usage. It needs to patch the "focusSearch" / "blurSearch" functions to make sure it toggles the menu. 62 + const oldFocusSearch = dropdownCall('internal', 'focusSearch'); 63 + const oldBlurSearch = dropdownCall('internal', 'blurSearch'); 64 + // * If the "dropdown icon" is clicked, Fomantic calls "focusSearch", so show the menu 65 + dropdownCall('internal', 'focusSearch', function () { dropdownCall('show'); oldFocusSearch.call(this) }); 66 + // * If the "dropdown icon" is clicked again when the menu is visible, Fomantic calls "blurSearch", so hide the menu 67 + dropdownCall('internal', 'blurSearch', function () { oldBlurSearch.call(this); dropdownCall('hide') }); 68 + 60 69 // the "template" functions are used for dynamic creation (eg: AJAX) 61 70 const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()}; 62 71 const dropdownTemplatesMenuOld = dropdownTemplates.menu;
-3
web_src/js/modules/fomantic.js
··· 16 16 $.fn.dropdown.settings.fullTextSearch = 'exact'; 17 17 // Do not use "cursor: pointer" for dropdown labels 18 18 $.fn.dropdown.settings.className.label += ' gt-cursor-default'; 19 - // The default selector has a bug: if there is a "search input" in the "menu", Fomantic will only "focus the input" but not "toggle the menu" when the "dropdown icon" is clicked. 20 - // Actually, the "search input in menu" shouldn't be considered as the dropdown's input 21 - $.fn.dropdown.settings.selector.search = '> input.search, :not(.menu) > .search > input, :not(.menu) input.search'; 22 19 // Always use Gitea's SVG icons 23 20 $.fn.dropdown.settings.templates.label = function(_value, text, preserveHTML, className) { 24 21 const escape = $.fn.dropdown.settings.templates.escape;