Emit `onValueClick` event on component when container is clicked

2 files changed, 16 insertions, 0 deletions

diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
index 5cf728fe050..68fa2ab8d01 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue
@@ -26,6 +26,11 @@ export default {
       return labelsString;
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('onValueClick');
+    },
+  },
 };
 </script>
 
@@ -36,6 +41,7 @@ export default {
     data-placement="left"
     data-container="body"
     :title="labelsList"
+    @click="handleClick"
   >
     <i
       aria-hidden="true"
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
index 39040670a87..da74595bcdc 100644
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
@@ -56,6 +56,16 @@ describe('DropdownValueCollapsedComponent', () => {
     });
   });
 
+  describe('methods', () => {
+    describe('handleClick', () => {
+      it('emits onValueClick event on component', () => {
+        spyOn(vm, '$emit');
+        vm.handleClick();
+        expect(vm.$emit).toHaveBeenCalledWith('onValueClick');
+      });
+    });
+  });
+
   describe('template', () => {
     it('renders component container element with tooltip`', () => {
       expect(vm.$el.dataset.placement).toBe('left');