Merge branch '359829-groups-board-search-project-autofocus' into 'master'

Added autofocus on 'Search projects' input

See merge request !85816

app/assets/javascripts/boards/components/project_select.vue

@@ -91,6 +91,9 @@ export default {
     loadMoreProjects() {
       this.fetchGroupProjects({ search: this.searchTerm, fetchNext: true });
     },
+    setFocus() {
+      this.$refs.search.focusInput();
+    },
   },
 };
 </script>
@@ -107,8 +110,10 @@ export default {
       block
       menu-class="gl-w-full!"
       :loading="initialLoading"
+      @shown="setFocus"
     >
       <gl-search-box-by-type
+        ref="search"
         v-model.trim="searchTerm"
         debounce="250"
         :placeholder="$options.i18n.searchPlaceholder"

spec/frontend/boards/project_select_spec.js

-import { GlDropdown, GlDropdownItem, GlSearchBoxByType, GlLoadingIcon } from '@gitlab/ui';
+import {
+  GlDropdown,
+  GlDropdownItem,
+  GlSearchBoxByType,
+  GlLoadingIcon,
+  GlFormInput,
+} from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
@@ -23,6 +29,8 @@ describe('ProjectSelect component', () => {
   const findInMenuLoadingIcon = () => wrapper.find("[data-testid='dropdown-text-loading-icon']");
   const findEmptySearchMessage = () => wrapper.find("[data-testid='empty-result-message']");
 
+  const waitRAF = () => new Promise((resolve) => requestAnimationFrame(resolve));
+
   const createStore = ({ state, activeGroupProjects }) => {
     Vue.use(Vuex);
 
@@ -61,6 +69,7 @@ describe('ProjectSelect component', () => {
       provide: {
         groupId: 1,
       },
+      attachTo: document.body,
     });
   };
 
@@ -120,6 +129,17 @@ describe('ProjectSelect component', () => {
       it('does not render empty search result message', () => {
         expect(findEmptySearchMessage().exists()).toBe(false);
       });
+
+      it('focuses on the search input', async () => {
+        const dropdownToggle = findGlDropdown().find('.dropdown-toggle');
+
+        await dropdownToggle.trigger('click');
+        await waitRAF();
+        await nextTick();
+
+        const searchInput = findGlDropdown().findComponent(GlFormInput).element;
+        expect(document.activeElement).toEqual(searchInput);
+      });
     });
 
     describe('when no projects are being returned', () => {