Migrate approvers_select GLDropdown to <select>

ee/app/assets/javascripts/approvals/components/approvers_select.vue

 <script>
-import { GlCollapsibleListbox, GlDropdown, GlDropdownItem, GlAvatarLabeled } from '@gitlab/ui';
+import { GlIcon, GlCollapsibleListbox, GlAvatarLabeled } from '@gitlab/ui';
 import Api from 'ee/api';
 import { NAMESPACE_TYPES } from 'ee/security_orchestration/constants';
 import {
@@ -17,10 +17,9 @@ function addType(type) {
 
 export default {
   components: {
+    GlIcon,
     GlCollapsibleListbox,
     GlAvatarLabeled,
-    GlDropdown,
-    GlDropdownItem,
   },
   i18n: {
     toggleText: SEARCH_PLACEHOLDER,
@@ -147,7 +146,9 @@ export default {
 
       this.listboxItems = this.listboxItems.filter((item) => item.value !== selected);
     },
-    selectGroupOption(option) {
+    selectGroupOption(inputEvent) {
+      const option = inputEvent.target.value;
+
       if (option === this.selectedGroupOption) {
         return;
       }
@@ -159,7 +160,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="gl-display-flex">
     <gl-collapsible-listbox
       :items="listboxItems"
       :toggle-text="$options.i18n.toggleText"
@@ -184,14 +185,17 @@ export default {
         />
       </template>
     </gl-collapsible-listbox>
-    <gl-dropdown :text="selectedGroupOption" class="gl-w-30p gl-ml-4">
-      <gl-dropdown-item
-        v-for="groupOption in $options.groupOptions"
-        :key="groupOption"
-        @click="selectGroupOption(groupOption)"
-      >
-        {{ $options.i18n.dropdownItemLabel }} {{ groupOption }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+    <div class="gl-relative gl-ml-4 gl-flex-grow-1">
+      <select class="gl-pr-6 form-control select-control" @input="selectGroupOption">
+        <option v-for="opt in $options.groupOptions" :key="opt" :value="opt">
+          {{ $options.i18n.dropdownItemLabel }} {{ opt }}
+        </option>
+      </select>
+      <gl-icon
+        name="chevron-down"
+        data-hidden="true"
+        class="gl-absolute gl-top-3 gl-right-3 gl-text-gray-500"
+      />
+    </div>
   </div>
 </template>

ee/spec/frontend/approvals/components/approvers_select_spec.js

-import {
-  GlCollapsibleListbox,
-  GlListboxItem,
-  GlAvatarLabeled,
-  GlDropdown,
-  GlDropdownItem,
-} from '@gitlab/ui';
+import { GlCollapsibleListbox, GlListboxItem, GlAvatarLabeled } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import { cloneDeep } from 'lodash';
 import { shallowMount } from '@vue/test-utils';
@@ -13,7 +7,7 @@ import waitForPromises from 'helpers/wait_for_promises';
 import Api from 'ee/api';
 import ApproversSelect from 'ee/approvals/components/approvers_select.vue';
 import { NAMESPACE_TYPES } from 'ee/security_orchestration/constants';
-import { TYPE_USER, GROUP_OPTIONS, DROPDOWN_OPTION_ALL_GROUPS } from 'ee/approvals/constants';
+import { TYPE_USER, GROUP_OPTIONS } from 'ee/approvals/constants';
 
 const TEST_PROJECT_ID = '17';
 const TEST_GROUP_AVATAR = `${TEST_HOST}/group-avatar.png`;
@@ -40,8 +34,8 @@ describe('Approvers Selector', () => {
   const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
   const findAllListboxItems = () => wrapper.findAllComponents(GlListboxItem);
   const findAvatar = (index) => findAllListboxItems().at(index).findComponent(GlAvatarLabeled);
-  const findGroupOptionsDropdown = () => wrapper.findComponent(GlDropdown);
-  const findGroupOtions = () => wrapper.findAllComponents(GlDropdownItem);
+  const findGroupOptionsDropdown = () => wrapper.find('select');
+  const findGroupOptions = () => wrapper.findAll('option');
   const search = (searchString) => findListbox().vm.$emit('search', searchString);
 
   const createComponent = (props = {}) => {
@@ -138,15 +132,9 @@ describe('Approvers Selector', () => {
 
         expect(findGroupOptionsDropdown().exists()).toBe(true);
       });
-
-      it('renders all groups option selected by default', () => {
-        createComponent();
-        expect(findGroupOptionsDropdown().props('text')).toBe(DROPDOWN_OPTION_ALL_GROUPS);
-      });
-
       it('renders expected amount of group options', () => {
         createComponent();
-        expect(findGroupOtions()).toHaveLength(GROUP_OPTIONS.length);
+        expect(findGroupOptions()).toHaveLength(GROUP_OPTIONS.length);
       });
     });
 
@@ -241,7 +229,11 @@ describe('Approvers Selector', () => {
     describe('on project groups option selection', () => {
       it('fetches project groups when the project group option is selected', async () => {
         createComponent();
-        findGroupOtions().at(1).vm.$emit('click');
+
+        const groupOptions = findGroupOptionsDropdown();
+
+        groupOptions.element.value = 'project groups';
+        groupOptions.trigger('input');
         await waitForPromises();
 
         expect(Api.projectGroups).toHaveBeenCalledWith('17', {