Autofocus on search input after labels load

Fixes a bug where search input didn't
autofocus after labels get loaded.

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue

@@ -92,6 +92,13 @@ export default {
         }
       }
     },
+    handleComponentAppear() {
+      // We can avoid putting `catch` block here
+      // as failure is handled within actions.js already.
+      return this.fetchLabels().then(() => {
+        this.$refs.searchInput.focusInput();
+      });
+    },
     /**
      * We want to remove loaded labels to ensure component
      * fetches fresh set of labels every time when shown.
@@ -139,7 +146,7 @@ export default {
 </script>
 
 <template>
-  <gl-intersection-observer @appear="fetchLabels" @disappear="handleComponentDisappear">
+  <gl-intersection-observer @appear="handleComponentAppear" @disappear="handleComponentDisappear">
     <div class="labels-select-contents-list js-labels-list" @keydown="handleKeyDown">
       <div
         v-if="isDropdownVariantSidebar || isDropdownVariantEmbedded"
@@ -158,8 +165,8 @@ export default {
       </div>
       <div class="dropdown-input" @click.stop="() => {}">
         <gl-search-box-by-type
+          ref="searchInput"
           v-model="searchKey"
-          :autofocus="true"
           :disabled="labelsFetchInProgress"
           data-qa-selector="dropdown_input_field"
         />

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/store/actions.js

@@ -20,7 +20,7 @@ export const receiveLabelsFailure = ({ commit }) => {
 };
 export const fetchLabels = ({ state, dispatch }) => {
   dispatch('requestLabels');
-  axios
+  return axios
     .get(state.labelsFetchPath)
     .then(({ data }) => {
       dispatch('receiveLabelsSuccess', data);

changelogs/unreleased/kp-fix-labels-dropdown-search-autofocus.yml

+---
+title: Autofocus on search input within labels dropdown after labels are loaded
+merge_request: 46750
+author:
+type: fixed

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view_spec.js

@@ -128,6 +128,16 @@ describe('DropdownContentsLabelsView', () => {
       });
     });
 
+    describe('handleComponentAppear', () => {
+      it('calls `focusInput` on searchInput field', async () => {
+        wrapper.vm.$refs.searchInput.focusInput = jest.fn();
+
+        await wrapper.vm.handleComponentAppear();
+
+        expect(wrapper.vm.$refs.searchInput.focusInput).toHaveBeenCalled();
+      });
+    });
+
     describe('handleComponentDisappear', () => {
       it('calls action `receiveLabelsSuccess` with empty array', () => {
         jest.spyOn(wrapper.vm, 'receiveLabelsSuccess');
@@ -301,7 +311,6 @@ describe('DropdownContentsLabelsView', () => {
       const searchInputEl = wrapper.find(GlSearchBoxByType);
 
       expect(searchInputEl.exists()).toBe(true);
-      expect(searchInputEl.attributes('autofocus')).toBe('true');
     });
 
     it('renders label elements for all labels', () => {