community
/
gitea
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix Fomantic UI dropdown icon bug when there is a search input in menu (#27225) (#27228) 

Backport #27225 by @wxiaoguang

Fix #27224

And add the case to the devtest page.

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Giteabot 2023-09-24 21:42:00 +08:00 committed by GitHub
parent 64c0a6a4e2
commit f4f6885c1f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
templates/devtest/gitea-ui.tmpl
View File

@ -171,6 +171,7 @@
<span class="text">simple</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="ui icon search input"><i class="icon">{{svg "octicon-search"}}</i><input type="text" value="search input in menu"></div>
<div class="item">item</div>
</div>
</div>

3
web_src/js/modules/fomantic.js
View File

@ -16,6 +16,9 @@ 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;