diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-11 15:09:26 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-03-11 15:09:26 +0300 |
commit | c9687bdf58e9d4a9c3942f587bd4841f42e3b5de (patch) | |
tree | a60a2e20f152483be6a92bacdf10564bbc96c664 /app/assets/javascripts/vue_shared/components | |
parent | 3f3e4bcc50a3280d03299c2c263eafd9c8e3bd7b (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared/components')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue | 26 |
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> |