Pass events to parent scope of GroupSelect

We use `v-on="$listeners"` to pass events to the parent scope.
`GroupSelect` becomes a transparent wrapper. Parent of `GroupSelect` can
listen to the `input` event, and any other events if added in the
future.

app/assets/javascripts/vue_shared/components/entity_select/group_select.vue

@@ -121,6 +121,7 @@ export default {
     :default-toggle-text="$options.i18n.toggleText"
     :fetch-items="fetchGroups"
     :fetch-initial-selection-text="fetchGroupName"
+    v-on="$listeners"
   >
     <template #error>
       <gl-alert v-if="errorMessage" class="gl-mb-3" variant="danger" @dismiss="dismissError">{{

app/assets/javascripts/vue_shared/components/entity_select/project_select.vue

@@ -166,6 +166,7 @@ export default {
     :fetch-initial-selection-text="fetchProjectName"
     :block="block"
     clearable
+    v-on="$listeners"
   >
     <template v-if="hasHtmlLabel" #label>
       <span v-safe-html="label"></span>

spec/frontend/vue_shared/components/entity_select/group_select_spec.js

@@ -39,6 +39,8 @@ describe('GroupSelect', () => {
   const findEntitySelect = () => wrapper.findComponent(EntitySelect);
   const findAlert = () => wrapper.findComponent(GlAlert);
 
+  const handleInput = jest.fn();
+
   // Helpers
   const createComponent = ({ props = {} } = {}) => {
     wrapper = shallowMountExtended(GroupSelect, {
@@ -52,6 +54,9 @@ describe('GroupSelect', () => {
         GlAlert,
         EntitySelect,
       },
+      listeners: {
+        input: handleInput,
+      },
     });
   };
   const openListbox = () => findListbox().vm.$emit('shown');
@@ -132,4 +137,11 @@ describe('GroupSelect', () => {
     expect(findAlert().exists()).toBe(true);
     expect(findAlert().text()).toBe(FETCH_GROUPS_ERROR);
   });
+
+  it('forwards events to the parent scope via `v-on="$listeners"`', () => {
+    createComponent();
+    findEntitySelect().vm.$emit('input');
+
+    expect(handleInput).toHaveBeenCalledTimes(1);
+  });
 });

spec/frontend/vue_shared/components/entity_select/project_select_spec.js

@@ -45,6 +45,8 @@ describe('ProjectSelect', () => {
   const findEntitySelect = () => wrapper.findComponent(EntitySelect);
   const findAlert = () => wrapper.findComponent(GlAlert);
 
+  const handleInput = jest.fn();
+
   // Helpers
   const createComponent = ({ props = {} } = {}) => {
     wrapper = mountExtended(ProjectSelect, {
@@ -59,6 +61,9 @@ describe('ProjectSelect', () => {
         GlAlert,
         EntitySelect,
       },
+      listeners: {
+        input: handleInput,
+      },
     });
   };
   const openListbox = () => findListbox().vm.$emit('shown');
@@ -255,4 +260,11 @@ describe('ProjectSelect', () => {
     expect(findAlert().exists()).toBe(true);
     expect(findAlert().text()).toBe(FETCH_PROJECTS_ERROR);
   });
+
+  it('forwards events to the parent scope via `v-on="$listeners"`', () => {
+    createComponent();
+    findEntitySelect().vm.$emit('input');
+
+    expect(handleInput).toHaveBeenCalledTimes(1);
+  });
 });