Merge branch...

Merge branch '338639-on-issue-creation-clicking-select-epic-does-not-bring-focus-to-search-input-causing-problems' into 'master'

Focus on input when dropdown is shown on issue creation page

See merge request gitlab-org/gitlab!70703

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,8 +16,6 @@ describe('EpicsSelect', () => {
     let wrapperStandalone;
     const store = createDefaultStore();
     const storeStandalone = createDefaultStore();
-
-    beforeEach(() => {
     const props = {
       canEdit: true,
       initialEpic: mockEpic1,
@@ -27,6 +25,7 @@ describe('EpicsSelect', () => {
       issueId: mockIssue.id,
     };
 
+    beforeEach(() => {
       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);
+      });
     });
   });
 });