From 43632d9d34dd8e7f28cac86cd619d5d0049e3d28 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Mon, 9 Oct 2023 14:48:51 +0800
Subject: [PATCH] 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.
---
 web_src/js/modules/aria/dropdown.js | 9 +++++++++
 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;