Labels widget - focus first item on search

Changelog: changed

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_contents.vue

@@ -179,6 +179,9 @@ export default {
       this.searchKey = '';
       this.setFocus();
     },
+    selectFirstItem() {
+      this.$refs.dropdownContentsView.selectFirstItem();
+    },
   },
 };
 </script>
@@ -204,11 +207,13 @@ export default {
         @toggleDropdownContentsCreateView="toggleDropdownContent"
         @closeDropdown="$emit('closeDropdown')"
         @input="debouncedSearchKeyUpdate"
+        @searchEnter="selectFirstItem"
       />
     </template>
     <template #default>
       <component
         :is="dropdownContentsView"
+        ref="dropdownContentsView"
         v-model="localSelectedLabels"
         :search-key="searchKey"
         :allow-multiselect="allowMultiselect"

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

@@ -84,6 +84,9 @@ export default {
     showNoMatchingResultsMessage() {
       return Boolean(this.searchKey) && this.visibleLabels.length === 0;
     },
+    shouldHighlightFirstItem() {
+      return this.searchKey !== '' && this.visibleLabels.length > 0;
+    },
   },
   methods: {
     isLabelSelected(label) {
@@ -128,6 +131,11 @@ export default {
     onDropdownAppear() {
       this.isVisible = true;
     },
+    selectFirstItem() {
+      if (this.shouldHighlightFirstItem) {
+        this.handleLabelClick(this.visibleLabels[0]);
+      }
+    },
   },
 };
 </script>
@@ -143,11 +151,13 @@ export default {
         />
         <template v-else>
           <gl-dropdown-item
-            v-for="label in visibleLabels"
+            v-for="(label, index) in visibleLabels"
             :key="label.id"
             :is-checked="isLabelSelected(label)"
             :is-check-centered="true"
             :is-check-item="true"
+            :active="shouldHighlightFirstItem && index === 0"
+            active-class="is-focused"
             data-testid="labels-list"
             @click.native.capture.stop="handleLabelClick(label)"
           >

app/assets/javascripts/vue_shared/components/sidebar/labels_select_widget/dropdown_header.vue

@@ -83,6 +83,7 @@ export default {
       data-qa-selector="dropdown_input_field"
       data-testid="dropdown-input-field"
       @input="$emit('input', $event)"
+      @keydown.enter="$emit('searchEnter', $event)"
     />
   </div>
 </template>

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

@@ -110,6 +110,19 @@ describe('DropdownContentsLabelsView', () => {
     });
   });
 
+  it('first item is highlighted when search is not empty', async () => {
+    createComponent({
+      queryHandler: jest.fn().mockResolvedValue(workspaceLabelsQueryResponse),
+      searchKey: 'Label',
+    });
+    await makeObserverAppear();
+    await waitForPromises();
+    await nextTick();
+
+    expect(findLabelsList().exists()).toBe(true);
+    expect(findFirstLabel().attributes('active')).toBe('true');
+  });
+
   it('when search returns 0 results', async () => {
     createComponent({
       queryHandler: jest.fn().mockResolvedValue({

spec/support/shared_examples/features/sidebar/sidebar_labels_shared_examples.rb

@@ -47,6 +47,26 @@ RSpec.shared_examples 'labels sidebar widget' do
       end
     end
 
+    it 'adds first label by pressing enter when search' do
+      within(labels_widget) do
+        page.within('[data-testid="value-wrapper"]') do
+          expect(page).not_to have_content(development.name)
+        end
+
+        fill_in 'Search', with: 'Devel'
+        sleep 1
+        expect(page.all(:css, '[data-testid="dropdown-content"] .gl-new-dropdown-item').length).to eq(1)
+
+        find_field('Search').native.send_keys(:enter)
+        click_button 'Close'
+        wait_for_requests
+
+        page.within('[data-testid="value-wrapper"]') do
+          expect(page).to have_content(development.name)
+        end
+      end
+    end
+
     it 'escapes XSS when viewing issuable labels' do
       page.within(labels_widget) do
         expect(page).to have_content '<script>alert("xss");</script>'