mirror of
https://github.com/go-gitea/gitea
synced 2024-09-12 12:19:38 +02:00
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.
This commit is contained in:
parent
79e8865aae
commit
43632d9d34
2 changed files with 9 additions and 3 deletions
|
@ -57,6 +57,15 @@ function updateSelectionLabel($label) {
|
||||||
function delegateOne($dropdown) {
|
function delegateOne($dropdown) {
|
||||||
const dropdownCall = fomanticDropdownFn.bind($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)
|
// the "template" functions are used for dynamic creation (eg: AJAX)
|
||||||
const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()};
|
const dropdownTemplates = {...dropdownCall('setting', 'templates'), t: performance.now()};
|
||||||
const dropdownTemplatesMenuOld = dropdownTemplates.menu;
|
const dropdownTemplatesMenuOld = dropdownTemplates.menu;
|
||||||
|
|
|
@ -16,9 +16,6 @@ export function initGiteaFomantic() {
|
||||||
$.fn.dropdown.settings.fullTextSearch = 'exact';
|
$.fn.dropdown.settings.fullTextSearch = 'exact';
|
||||||
// Do not use "cursor: pointer" for dropdown labels
|
// Do not use "cursor: pointer" for dropdown labels
|
||||||
$.fn.dropdown.settings.className.label += ' gt-cursor-default';
|
$.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
|
// Always use Gitea's SVG icons
|
||||||
$.fn.dropdown.settings.templates.label = function(_value, text, preserveHTML, className) {
|
$.fn.dropdown.settings.templates.label = function(_value, text, preserveHTML, className) {
|
||||||
const escape = $.fn.dropdown.settings.templates.escape;
|
const escape = $.fn.dropdown.settings.templates.escape;
|
||||||
|
|
Loading…
Reference in a new issue