Commit c40ea689 authored by Simon Stieger's avatar Simon Stieger

Don't close issue label select box on click if only mouseup outside

parent 680f4b18
...@@ -29,6 +29,26 @@ const FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-fil ...@@ -29,6 +29,26 @@ const FILTER_INPUT = '.dropdown-input .dropdown-input-field:not(.dropdown-no-fil
const NO_FILTER_INPUT = '.dropdown-input .dropdown-input-field.dropdown-no-filter'; const NO_FILTER_INPUT = '.dropdown-input .dropdown-input-field.dropdown-no-filter';
let mouseEventListenersAdded = false;
let mousedownTarget = null;
let mouseupTarget = null;
function addGlobalMouseEventListeners() {
// Remember mousedown and mouseup locations.
// Required in the `hide.bs.dropdown` listener for
// dropdown close prevention in some cases.
document.addEventListener('mousedown', ({ target }) => {
mousedownTarget = target;
});
document.addEventListener('mouseup', ({ target }) => {
mouseupTarget = target;
});
document.addEventListener('click', () => {
mousedownTarget = null;
mouseupTarget = null;
});
}
export class GitLabDropdown { export class GitLabDropdown {
constructor(el1, options) { constructor(el1, options) {
let selector; let selector;
...@@ -36,9 +56,14 @@ export class GitLabDropdown { ...@@ -36,9 +56,14 @@ export class GitLabDropdown {
this.el = el1; this.el = el1;
this.options = options; this.options = options;
this.updateLabel = this.updateLabel.bind(this); this.updateLabel = this.updateLabel.bind(this);
this.hidden = this.hidden.bind(this);
this.opened = this.opened.bind(this); this.opened = this.opened.bind(this);
this.hide = this.hide.bind(this);
this.hidden = this.hidden.bind(this);
this.shouldPropagate = this.shouldPropagate.bind(this); this.shouldPropagate = this.shouldPropagate.bind(this);
if (!mouseEventListenersAdded) {
addGlobalMouseEventListeners();
mouseEventListenersAdded = true;
}
self = this; self = this;
selector = $(this.el).data('target'); selector = $(this.el).data('target');
this.dropdown = selector != null ? $(selector) : $(this.el).parent(); this.dropdown = selector != null ? $(selector) : $(this.el).parent();
...@@ -132,6 +157,7 @@ export class GitLabDropdown { ...@@ -132,6 +157,7 @@ export class GitLabDropdown {
} }
// Event listeners // Event listeners
this.dropdown.on('shown.bs.dropdown', this.opened); this.dropdown.on('shown.bs.dropdown', this.opened);
this.dropdown.on('hide.bs.dropdown', this.hide);
this.dropdown.on('hidden.bs.dropdown', this.hidden); this.dropdown.on('hidden.bs.dropdown', this.hidden);
$(this.el).on('update.label', this.updateLabel); $(this.el).on('update.label', this.updateLabel);
this.dropdown.on('click', '.dropdown-menu, .dropdown-menu-close', this.shouldPropagate); this.dropdown.on('click', '.dropdown-menu, .dropdown-menu-close', this.shouldPropagate);
...@@ -334,6 +360,21 @@ export class GitLabDropdown { ...@@ -334,6 +360,21 @@ export class GitLabDropdown {
$menu.css('bottom', '100%'); $menu.css('bottom', '100%');
} }
hide(e) {
// Prevent dropdowns with a search from being closed when the
// mousedown event happened inside the dropdown box and only
// the mouseup event did not.
if (this.options.search && mousedownTarget) {
const isIn = (element, $possibleContainer) => Boolean($possibleContainer.has(element).length);
const $menu = this.dropdown.find('.dropdown-menu');
const mousedownInsideDropdown = isIn(mousedownTarget, $menu);
const mouseupOutsideDropdown = !isIn(mouseupTarget, $menu);
if (mousedownInsideDropdown && mouseupOutsideDropdown) {
e.preventDefault();
}
}
}
hidden(e) { hidden(e) {
this.resetRows(); this.resetRows();
this.removeArrowKeyEvent(); this.removeArrowKeyEvent();
......
---
title: Don't close auto suggest select boxes on click if only the mouseup (but not the mousedown) event happened outside the box
merge_request: 51139
author: Simon Stieger @sim0
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment