Focus on input when dropdown is shown on issue creation page

https://gitlab.com/gitlab-org/gitlab/-/issues/338639

Changelog: fixed

ee/app/assets/javascripts/vue_shared/components/sidebar/epics_select/base.vue

@@ -184,6 +184,9 @@ export default {
       'assignIssueToEpic',
       'removeIssueFromEpic',
     ]),
+    focusInput() {
+      this.$refs.search.focusInput();
+    },
     handleItemSelect(epic) {
       if (
         this.selectedEpicIssueId &&
@@ -248,10 +251,15 @@ export default {
         :header-text="dropdownHeaderText"
         @keydown.esc.native="hideDropdown"
         @hide="hideDropdown"
+        @shown="focusInput"
         @toggle="toggleFormDropdown"
       >
         <template #header>
-          <gl-search-box-by-type v-model.trim="search" :placeholder="$options.i18n.searchEpic" />
+          <gl-search-box-by-type
+            ref="search"
+            v-model.trim="search"
+            :placeholder="$options.i18n.searchEpic"
+          />
         </template>
         <template v-if="epicListValid">
           <gl-dropdown-item

ee/spec/frontend/vue_shared/components/sidebar/epics_select/base_spec.js

-import { GlLoadingIcon, GlDropdown, GlDropdownItem } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon, GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
+import { mount, shallowMount } from '@vue/test-utils';
 
 import { DropdownVariant } from 'ee/vue_shared/components/sidebar/epics_select//constants';
 import EpicsSelectBase from 'ee/vue_shared/components/sidebar/epics_select/base.vue';
@@ -16,17 +16,16 @@ describe('EpicsSelect', () => {
     let wrapperStandalone;
     const store = createDefaultStore();
     const storeStandalone = createDefaultStore();
+    const props = {
+      canEdit: true,
+      initialEpic: mockEpic1,
+      initialEpicLoading: false,
+      epicIssueId: mockIssue.epic_issue_id,
+      groupId: mockEpic1.group_id,
+      issueId: mockIssue.id,
+    };
 
     beforeEach(() => {
-      const props = {
-        canEdit: true,
-        initialEpic: mockEpic1,
-        initialEpicLoading: false,
-        epicIssueId: mockIssue.epic_issue_id,
-        groupId: mockEpic1.group_id,
-        issueId: mockIssue.id,
-      };
-
       wrapper = shallowMount(EpicsSelectBase, {
         store,
         propsData: {
@@ -275,6 +274,16 @@ describe('EpicsSelect', () => {
         await wrapper.vm.$nextTick();
         expect(wrapper.findComponent(GlDropdown).findComponent(GlLoadingIcon).exists()).toBe(true);
       });
+
+      it('focuses on the input when the dropdown is shown', () => {
+        wrapper = mount(EpicsSelectBase, { propsData: props });
+
+        const spy = jest.spyOn(wrapper.findComponent(GlSearchBoxByType).vm, 'focusInput');
+
+        wrapper.findComponent(GlDropdown).vm.$emit('shown');
+
+        expect(spy).toHaveBeenCalledTimes(1);
+      });
     });
   });
 });