Allow ref selector to receive parent attrs

This commit updates the ref selector dropdown component to allow its
parent to bind attributes to the root element of this component.

app/assets/javascripts/ref/components/ref_selector.vue

@@ -107,7 +107,7 @@ export default {
 </script>
 
 <template>
-  <gl-new-dropdown class="ref-selector" @shown="focusSearchBox">
+  <gl-new-dropdown v-bind="$attrs" class="ref-selector" @shown="focusSearchBox">
     <template slot="button-content">
       <span class="gl-flex-grow-1 gl-ml-2 gl-text-gray-600" data-testid="button-content">
         <span v-if="selectedRef" class="gl-font-monospace">{{ selectedRef }}</span>

spec/frontend/ref/components/ref_selector_spec.js

@@ -26,13 +26,14 @@ describe('Ref selector component', () => {
   let tagsApiCallSpy;
   let commitApiCallSpy;
 
-  const createComponent = (props = {}) => {
+  const createComponent = (props = {}, attrs = {}) => {
     wrapper = mount(RefSelector, {
       propsData: {
         projectId,
         value: '',
         ...props,
       },
+      attrs,
       listeners: {
         // simulate a parent component v-model binding
         input: selectedRef => {
@@ -164,6 +165,20 @@ describe('Ref selector component', () => {
   });
 
   describe('post-initialization behavior', () => {
+    describe('when the parent component provides an `id` binding', () => {
+      const id = 'git-ref';
+
+      beforeEach(() => {
+        createComponent({}, { id });
+
+        return waitForRequests();
+      });
+
+      it('adds the provided ID to the GlNewDropdown instance', () => {
+        expect(wrapper.attributes().id).toBe(id);
+      });
+    });
+
     describe('when a ref is pre-selected', () => {
       const preselectedRef = fixtures.branches[0].name;