Small improvements to milestone combobox

This commit makes a few small improvements to the milestone combobox
component. Most notably, the search box is focused when the dropdown is
opened.

app/assets/javascripts/milestones/project_milestone_combobox.vue

@@ -13,6 +13,8 @@ import { __, sprintf } from '~/locale';
 import Api from '~/api';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 
+const SEARCH_DEBOUNCE_MS = 250;
+
 export default {
   components: {
     GlNewDropdown,
@@ -95,12 +97,15 @@ export default {
     // lodash attaches to the function, which is
     // made inaccessible by Vue. More info:
     // https://stackoverflow.com/a/52988020/1063392
-    this.debouncedSearchMilestones = debounce(this.searchMilestones, 100);
+    this.debouncedSearchMilestones = debounce(this.searchMilestones, SEARCH_DEBOUNCE_MS);
   },
   mounted() {
     this.fetchMilestones();
   },
   methods: {
+    focusSearchBox() {
+      this.$refs.searchBox.$el.querySelector('input').focus();
+    },
     fetchMilestones() {
       this.requestCount += 1;
 
@@ -183,7 +188,7 @@ export default {
 </script>
 
 <template>
-  <gl-new-dropdown>
+  <gl-new-dropdown v-bind="$attrs" class="project-milestone-combobox" @shown="focusSearchBox">
     <template slot="button-content">
       <span ref="buttonText" class="flex-grow-1 ml-1 text-muted">{{
         selectedMilestonesLabel
@@ -198,6 +203,7 @@ export default {
     <gl-new-dropdown-divider />
 
     <gl-search-box-by-type
+      ref="searchBox"
       v-model.trim="searchQuery"
       class="gl-m-3"
       :placeholder="this.$options.translations.searchMilestones"

spec/support/helpers/features/releases_helpers.rb

@@ -18,7 +18,9 @@ module Spec
     module Helpers
       module Features
         module ReleasesHelpers
-          # Returns the element that currently has keyboard focus
+          # Returns the element that currently has keyboard focus.
+          # Reminder that this returns a Selenium::WebDriver::Element
+          # _not_ a Capybara::Node::Element
           def focused_element
             page.driver.browser.switch_to.active_element
           end
@@ -39,7 +41,8 @@ module Spec
             # Wait for the dropdown to be rendered
             page.find('.ref-selector .dropdown-menu')
 
-            focused_element.send_keys(branch_name)
+            # Pressing Enter in the search box shouldn't submit the form
+            focused_element.send_keys(branch_name, :enter)
 
             # Wait for the search to return
             page.find('.ref-selector .dropdown-item', text: branch_name, match: :first)
@@ -63,12 +66,16 @@ module Spec
             focused_element.send_keys(:enter)
 
             # Wait for the dropdown to be rendered
-            page.find('.gl-new-dropdown .dropdown-menu')
+            page.find('.project-milestone-combobox .dropdown-menu')
 
-            focused_element.send_keys(:tab, milestone_title)
+            # Clear any existing input
+            focused_element.attribute('value').length.times { focused_element.send_keys(:backspace) }
+
+            # Pressing Enter in the search box shouldn't submit the form
+            focused_element.send_keys(milestone_title, :enter)
 
             # Wait for the search to return
-            page.find('.gl-new-dropdown .dropdown-item', text: milestone_title, match: :first)
+            page.find('.project-milestone-combobox .dropdown-item', text: milestone_title, match: :first)
 
             focused_element.send_keys(:arrow_down, :arrow_down, :enter)