Merge branch 'close-droplab-dropdowns-on-click' into 'master'

Close DropLab dropdowns on click instead of mousedown

See merge request gitlab-org/gitlab!56847

app/assets/javascripts/droplab/drop_lab.js

@@ -60,21 +60,24 @@ class DropLab {
 
   addEvents() {
     this.eventWrapper.documentClicked = this.documentClicked.bind(this);
-    document.addEventListener('mousedown', this.eventWrapper.documentClicked);
+    document.addEventListener('click', this.eventWrapper.documentClicked);
   }
 
   documentClicked(e) {
-    let thisTag = e.target;
+    if (e.defaultPrevented) return;
 
-    if (thisTag.tagName !== 'UL') thisTag = utils.closest(thisTag, 'UL');
-    if (utils.isDropDownParts(thisTag, this.hooks)) return;
-    if (utils.isDropDownParts(e.target, this.hooks)) return;
+    if (utils.isDropDownParts(e.target)) return;
+
+    if (e.target.tagName !== 'UL') {
+      const closestUl = utils.closest(e.target, 'UL');
+      if (utils.isDropDownParts(closestUl)) return;
+    }
 
     this.hooks.forEach((hook) => hook.list.hide());
   }
 
   removeEvents() {
-    document.removeEventListener('mousedown', this.eventWrapper.documentClicked);
+    document.removeEventListener('click', this.eventWrapper.documentClicked);
   }
 
   changeHookList(trigger, list, plugins, config) {

app/assets/javascripts/droplab/hook_button.js

@@ -18,6 +18,8 @@ class HookButton extends Hook {
   }
 
   clicked(e) {
+    e.preventDefault();
+
     const buttonEvent = new CustomEvent('click.dl', {
       detail: {
         hook: this,

changelogs/unreleased/close-droplab-dropdowns-on-click.yml

+---
+title: Close DropLab dropdowns on click instead of mousedown
+merge_request: 56847
+author: Simon Stieger @sim0
+type: fixed