Add latest changes from gitlab-org/gitlab@master

1 files changed, 24 insertions, 2 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
index b90f441b8ec..5e41a155ef6 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue
@@ -122,9 +122,14 @@ export default {
     this.$store.subscribeAction({
       after: this.handleVuexActionDispatch,
     });
+
+    document.addEventListener('click', this.handleDocumentClick);
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleDocumentClick);
   },
   methods: {
-    ...mapActions(['setInitialState']),
+    ...mapActions(['setInitialState', 'toggleDropdownContents']),
     /**
      * This method differentiates between
      * dispatched actions and calls necessary method.
@@ -138,6 +143,22 @@ export default {
         this.handleDropdownClose(state.labels.filter(label => label.touched));
       }
     },
+    /**
+     * This method listens for document-wide click event
+     * and toggle dropdown if user clicks anywhere outside
+     * the dropdown while dropdown is visible.
+     */
+    handleDocumentClick({ target }) {
+      if (
+        this.showDropdownButton &&
+        this.showDropdownContents &&
+        !target?.classList.contains('js-sidebar-dropdown-toggle') &&
+        !this.$refs.dropdownButtonCollapsed?.$el.contains(target) &&
+        !this.$refs.dropdownContents?.$el.contains(target)
+      ) {
+        this.toggleDropdownContents();
+      }
+    },
     handleDropdownClose(labels) {
       // Only emit label updates if there are any labels to update
       // on UI.
@@ -156,6 +177,7 @@ export default {
     <div v-if="!dropdownOnly">
       <dropdown-value-collapsed
         v-if="allowLabelCreate"
+        ref="dropdownButtonCollapsed"
         :labels="selectedLabels"
         @onValueClick="handleCollapsedValueClick"
       />
@@ -167,7 +189,7 @@ export default {
         <slot></slot>
       </dropdown-value>
       <dropdown-button v-show="showDropdownButton" />
-      <dropdown-contents v-if="showDropdownButton && showDropdownContents" />
+      <dropdown-contents v-if="showDropdownButton && showDropdownContents" ref="dropdownContents" />
     </div>
   </div>
 </template>