Replace broken autocomplete field for new tags with dropdown

app/assets/javascripts/dispatcher.js

@@ -52,6 +52,7 @@ import Pipelines from './pipelines';
 import BlobViewer from './blob/viewer/index';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import UsersSelect from './users_select';
+import RefSelectDropdown from './ref_select_dropdown';
 
 const ShortcutsBlob = require('./shortcuts_blob');
 
@@ -212,6 +213,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'projects:tags:new':
           new ZenMode();
           new gl.GLForm($('.tag-form'));
+          new RefSelectDropdown($('.js-branch-select'), window.gl.availableRefs);
           break;
         case 'projects:releases:edit':
           new ZenMode();

app/assets/javascripts/new_branch_form.js

 /* eslint-disable func-names, space-before-function-paren, no-var, one-var, prefer-rest-params, max-len, vars-on-top, wrap-iife, consistent-return, comma-dangle, one-var-declaration-per-line, quotes, no-return-assign, prefer-arrow-callback, prefer-template, no-shadow, no-else-return, max-len, object-shorthand */
+import RefSelectDropdown from '~/ref_select_dropdown';
+
 (function() {
   this.NewBranchForm = (function() {
     function NewBranchForm(form, availableRefs) {
@@ -6,7 +8,7 @@
       this.branchNameError = form.find('.js-branch-name-error');
       this.name = form.find('.js-branch-name');
       this.ref = form.find('#ref');
-      this.setupAvailableRefs(availableRefs);
+      new RefSelectDropdown($('.js-branch-select'), availableRefs); // eslint-disable-line no-new
       this.setupRestrictions();
       this.addBinding();
       this.init();
@@ -22,49 +24,6 @@
       }
     };
 
-    NewBranchForm.prototype.setupAvailableRefs = function(availableRefs) {
-      var $branchSelect = $('.js-branch-select');
-
-      $branchSelect.glDropdown({
-        data: availableRefs,
-        filterable: true,
-        filterByText: true,
-        remote: false,
-        fieldName: $branchSelect.data('field-name'),
-        filterInput: 'input[type="search"]',
-        selectable: true,
-        isSelectable: function(branch, $el) {
-          return !$el.hasClass('is-active');
-        },
-        text: function(branch) {
-          return branch;
-        },
-        id: function(branch) {
-          return branch;
-        },
-        toggleLabel: function(branch) {
-          if (branch) {
-            return branch;
-          }
-        }
-      });
-
-      const $dropdownContainer = $branchSelect.closest('.dropdown');
-      const $fieldInput = $(`input[name="${$branchSelect.data('field-name')}"]`, $dropdownContainer);
-      const $filterInput = $('input[type="search"]', $dropdownContainer);
-
-      $filterInput.on('keyup', (e) => {
-        const keyCode = e.keyCode || e.which;
-        if (keyCode !== 13) return;
-
-        const text = $filterInput.val();
-        $fieldInput.val(text);
-        $('.dropdown-toggle-text', $branchSelect).text(text);
-
-        $dropdownContainer.removeClass('open');
-      });
-    };
-
     NewBranchForm.prototype.setupRestrictions = function() {
       var endsWith, invalid, single, startsWith;
       startsWith = {

app/assets/javascripts/ref_select_dropdown.js

+class RefSelectDropdown {
+  constructor($dropdownButton, availableRefs) {
+    $dropdownButton.glDropdown({
+      data: availableRefs,
+      filterable: true,
+      filterByText: true,
+      remote: false,
+      fieldName: $dropdownButton.data('field-name'),
+      filterInput: 'input[type="search"]',
+      selectable: true,
+      isSelectable(branch, $el) {
+        return !$el.hasClass('is-active');
+      },
+      text(branch) {
+        return branch;
+      },
+      id(branch) {
+        return branch;
+      },
+      toggleLabel(branch) {
+        return branch;
+      },
+    });
+
+    const $dropdownContainer = $dropdownButton.closest('.dropdown');
+    const $fieldInput = $(`input[name="${$dropdownButton.data('field-name')}"]`, $dropdownContainer);
+    const $filterInput = $('input[type="search"]', $dropdownContainer);
+
+    $filterInput.on('keyup', (e) => {
+      const keyCode = e.keyCode || e.which;
+      if (keyCode !== 13) return;
+
+      const ref = $filterInput.val().trim();
+      if (ref === '') {
+        return;
+      }
+
+      $fieldInput.val(ref);
+      $('.dropdown-toggle-text', $dropdownButton).text(ref);
+
+      $dropdownContainer.removeClass('open');
+    });
+  }
+}
+
+export default RefSelectDropdown;

app/views/projects/tags/new.html.haml

 - page_title "New Tag"
+- default_ref = params[:ref] || @project.default_branch
 
 - if @error
   .alert.alert-danger
@@ -16,9 +17,13 @@
       = text_field_tag :tag_name, params[:tag_name], required: true, tabindex: 1, autofocus: true, class: 'form-control'
   .form-group
     = label_tag :ref, 'Create from', class: 'control-label'
-    .col-sm-10
-      = text_field_tag :ref, params[:ref] || @project.default_branch, required: true, tabindex: 2, class: 'form-control'
-      .help-block  Branch name or commit SHA
+    .col-sm-10.create-from
+      .dropdown
+        = hidden_field_tag :ref, default_ref
+        = button_tag type: 'button', title: default_ref, class: 'dropdown-menu-toggle wide form-control js-branch-select', required: true, data: { toggle: 'dropdown', selected: default_ref, field_name: 'ref' } do
+          .text-left.dropdown-toggle-text= default_ref
+        = render 'shared/ref_dropdown', dropdown_class: 'wide'
+      .help-block Existing branch name, tag, or commit SHA
   .form-group
     = label_tag :message, nil, class: 'control-label'
     .col-sm-10
@@ -37,9 +42,5 @@
     = link_to 'Cancel', namespace_project_tags_path(@project.namespace, @project), class: 'btn btn-cancel'
 
 :javascript
-  var availableRefs = #{@project.repository.ref_names.to_json};
-
-  $("#ref").autocomplete({
-    source: availableRefs,
-    minLength: 1
-  });
+  window.gl = window.gl || { };
+  window.gl.availableRefs = #{@project.repository.ref_names.to_json};

spec/features/tags/master_creates_tag_spec.rb

@@ -51,10 +51,24 @@ feature 'Master creates tag', feature: true do
     end
   end
 
+  scenario 'opens dropdown for ref', js: true do
+    click_link 'New tag'
+    ref_row = find('.form-group:nth-of-type(2) .col-sm-10')
+    page.within ref_row do
+      ref_input = find('[name="ref"]', visible: false)
+      expect(ref_input.value).to eq 'master'
+      expect(find('.dropdown-toggle-text')).to have_content 'master'
+
+      find('.js-branch-select').trigger('click')
+
+      expect(find('.dropdown-menu')).to have_content 'empty-branch'
+    end
+  end
+
   def create_tag_in_form(tag:, ref:, message: nil, desc: nil)
     click_link 'New tag'
     fill_in 'tag_name', with: tag
-    fill_in 'ref', with: ref
+    find('#ref', visible: false).set(ref)
     fill_in 'message', with: message unless message.nil?
     fill_in 'release_description', with: desc unless desc.nil?
     click_button 'Create tag'