diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-10-09 14:48:51 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-10-09 06:48:51 +0000 |
| commit | 43632d9d34dd8e7f28cac86cd619d5d0049e3d28 (patch) | |
| tree | cf36d0f216f53ed12b4ffae789c7c37580dfca97 /web_src/js | |
| parent | 79e8865aaed43de81816390ee616263bb2bee67f (diff) | |
| download | gitea-43632d9d34dd8e7f28cac86cd619d5d0049e3d28.tar.gz gitea-43632d9d34dd8e7f28cac86cd619d5d0049e3d28.zip | |
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.
Diffstat (limited to 'web_src/js')
| -rw-r--r-- | web_src/js/modules/aria/dropdown.js | 9 | ||||
| -rw-r--r-- | web_src/js/modules/fomantic.js | 3 |
2 files changed, 9 insertions, 3 deletions
diff --git a/web_src/js/modules/aria/dropdown.js b/web_src/js/modules/aria/dropdown.js index b1ff57ab85..c053256dd5 100644 --- a/web_src/js/modules/aria/dropdown.js +++ b/web_src/js/modules/aria/dropdown.js @@ -57,6 +57,15 @@ function updateSelectionLabel($label) { function delegateOne($dropdown) { const dropdownCall = fomanticDropdownFn.bind($dropdown); + // 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. + // Actually, Fomantic UI doesn't support such layout/usage. It needs to patch the "focusSearch" / "blurSearch" functions to make sure it toggles the menu. + const oldFocusSearch = dropdownCall('internal', 'focusSearch'); + const oldBlurSearch = dropdownCall('internal', 'blurSearch'); + // * If the "dropdown icon" is clicked, Fomantic calls "focusSearch", so show the menu + dropdownCall('internal', 'focusSearch', function () { dropdownCall('show'); oldFocusSearch.call(this) }); + // * 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') }); + // the "template" functions are used for dynamic creation (eg: AJAX) const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()}; const dropdownTemplatesMenuOld = dropdownTemplates.menu; diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js index 9b52a5d429..da693e9a93 100644 --- a/web_src/js/modules/fomantic.js +++ b/web_src/js/modules/fomantic.js @@ -16,9 +16,6 @@ export function initGiteaFomantic() { $.fn.dropdown.settings.fullTextSearch = 'exact'; // Do not use "cursor: pointer" for dropdown labels $.fn.dropdown.settings.className.label += ' gt-cursor-default'; - // 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. - // Actually, the "search input in menu" shouldn't be considered as the dropdown's input - $.fn.dropdown.settings.selector.search = '> input.search, :not(.menu) > .search > input, :not(.menu) input.search'; // Always use Gitea's SVG icons $.fn.dropdown.settings.templates.label = function(_value, text, preserveHTML, className) { const escape = $.fn.dropdown.settings.templates.escape; |