From f4f6885c1f6949d2abfce7b58631afd33300b7fa Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Sun, 24 Sep 2023 21:42:00 +0800
Subject: [PATCH] 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>
---
 templates/devtest/gitea-ui.tmpl | 1 +
 web_src/js/modules/fomantic.js  | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 258b72f8cd5..e15ed0b8df3 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -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>
diff --git a/web_src/js/modules/fomantic.js b/web_src/js/modules/fomantic.js
index ab5f842bc6c..3d4a66c1ea9 100644
--- a/web_src/js/modules/fomantic.js
+++ b/web_src/js/modules/fomantic.js
@@ -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;