Updated dropdowns to use field instead

Allows a bit more flexibilty and keeps the current functionality

app/assets/javascripts/compare_autocomplete.js.coffee

+class @CompareAutocomplete
+  constructor: ->
+    @initDropdown()
+
+  initDropdown: ->
+    $('.js-compare-dropdown').each ->
+      $dropdown = $(@)
+      selected = $dropdown.data('selected')
+
+      $dropdown.glDropdown(
+        data: (term, callback) ->
+          $.ajax(
+            url: $dropdown.data('refs-url')
+            data:
+              ref: $dropdown.data('ref')
+          ).done (refs) ->
+            callback(refs)
+        selectable: true
+        filterable: true
+        filterByText: true
+        fieldName: $dropdown.attr('name')
+        filterInput: 'input[type="text"]'
+        renderRow: (ref) ->
+          if ref.header?
+            $('<li />')
+              .addClass('dropdown-header')
+              .text(ref.header)
+          else
+            link = $('<a />')
+              .attr('href', '#')
+              .addClass(if ref is selected then 'is-active' else '')
+              .text(ref)
+              .attr('data-ref', escape(ref))
+
+            $('<li />')
+              .append(link)
+        id: (obj, $el) ->
+          $el.attr('data-ref')
+        toggleLabel: (obj, $el) ->
+          $el.text().trim()
+      )

app/assets/javascripts/dispatcher.js.coffee

@@ -138,6 +138,8 @@ class Dispatcher
         new Project()
         new ProjectAvatar()
         switch path[1]
+          when 'compare'
+            new CompareAutocomplete()
           when 'edit'
             shortcut_handler = new ShortcutsNavigation()
             new ProjectNew()

app/assets/javascripts/gl_dropdown.js.coffee

@@ -456,6 +456,8 @@ class GitLabDropdown
 
   rowClicked: (el) ->
     fieldName = @options.fieldName
+    isInput = $(@el).is('input')
+
     if @renderedData
       groupName = el.data('group')
       if groupName
@@ -466,9 +468,18 @@ class GitLabDropdown
         selectedObject = @renderedData[selectedIndex]
 
     value = if @options.id then @options.id(selectedObject, el) else selectedObject.id
+
+    if isInput
+      field = $(@el)
+    else
       field = @dropdown.parent().find("input[name='#{fieldName}'][value='#{value}']")
+
     if el.hasClass(ACTIVE_CLASS)
       el.removeClass(ACTIVE_CLASS)
+
+      if isInput
+        field.val('')
+      else
         field.remove()
 
       # Toggle the dropdown label
@@ -490,6 +501,8 @@ class GitLabDropdown
     else
       if not @options.multiSelect or el.hasClass('dropdown-clear-active')
         @dropdown.find(".#{ACTIVE_CLASS}").removeClass ACTIVE_CLASS
+
+        unless isInput
           @dropdown.parent().find("input[name='#{fieldName}']").remove()
 
       if !value?

app/assets/javascripts/project.js.coffee

@@ -67,7 +67,7 @@ class @Project
         selectable: true
         filterable: true
         filterByText: true
-        fieldName: $dropdown.data('field-name')
+        fieldName: 'ref'
         renderRow: (ref) ->
           if ref.header?
             $('<li />')
@@ -87,6 +87,5 @@ class @Project
         toggleLabel: (obj, $el) ->
           $el.text().trim()
         clicked: (e) ->
-          unless $dropdown.hasClass('js-compare-dropdown')
           $dropdown.closest('form').submit()
       )

app/assets/stylesheets/framework/dropdowns.scss

@@ -48,6 +48,9 @@
   border: 1px solid $dropdown-toggle-border-color;
   border-radius: $border-radius-base;
   outline: 0;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 
   .fa {
     position: absolute;
@@ -58,14 +61,6 @@
     font-size: 10px;
   }
 
-  .dropdown-toggle-text {
-    display: block;
-    min-height: 19px;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
   &:hover, {
     border-color: $dropdown-toggle-hover-border-color;
 

app/assets/stylesheets/pages/projects.scss

@@ -633,19 +633,7 @@ pre.light-well {
   }
 }
 
-.compare-input-group {
-  &.input-group .input-group-addon {
-    @media (min-width: $screen-sm-min) {
-      width: 1%;
-    }
-  }
-
-  .dropdown-menu-toggle {
-    width: 100%;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
+.compare-form-group {
   .dropdown-menu {
     width: 300px;
   }

app/views/projects/compare/_form.html.haml

@@ -2,18 +2,16 @@
   .clearfix
     - if params[:to] && params[:from]
       = link_to 'switch', {from: params[:to], to: params[:from]}, {class: 'commits-compare-switch has-tooltip', title: 'Switch base of comparison'}
-    .form-group
-      = hidden_field_tag :from, params[:from]
-      .input-group.inline-input-group.compare-input-group.dropdown
+    .form-group.dropdown.compare-form-group.js-compare-from-dropdown
+      .input-group.inline-input-group
         %span.input-group-addon from
-        = dropdown_toggle h(params[:from].presence || ''), { toggle: "dropdown", refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'from', selected: params[:from] }, { toggle_class: "js-project-refs-dropdown js-compare-dropdown" }
+        = text_field_tag :from, params[:from], class: "form-control js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-from-dropdown", selected: params[:from].presence }
       = render "ref_dropdown"
     = "..."
-    .form-group
-      = hidden_field_tag :to, params[:to]
-      .input-group.inline-input-group.compare-input-group.dropdown
+    .form-group.dropdown.compare-form-group.js-compare-to-dropdown
+      .input-group.inline-input-group
         %span.input-group-addon to
-        = dropdown_toggle h(params[:from].presence || ''), { toggle: "dropdown", refs_url: refs_namespace_project_path(@project.namespace, @project), field_name: 'to', selected: params[:to] }, { toggle_class: "js-project-refs-dropdown js-compare-dropdown" }
+        = text_field_tag :to, params[:to], class: "form-control js-compare-dropdown", required: true, data: { refs_url: refs_namespace_project_path(@project.namespace, @project), toggle: "dropdown", target: ".js-compare-to-dropdown", selected: params[:to].presence }
       = render "ref_dropdown"
      
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"

app/views/projects/compare/_ref_dropdown.html.haml

 .dropdown-menu.dropdown-menu-selectable
-  = dropdown_title "Switch branch/tag"
-  = dropdown_filter "Search branches and tags"
+  = dropdown_title "Select branch/tag"
   = dropdown_content
   = dropdown_loading

app/views/shared/_ref_switcher.html.haml

@@ -6,7 +6,7 @@
   - @options && @options.each do |key, value|
     = hidden_field_tag key, value, id: nil
   .dropdown
-    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, field_name: 'ref', ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project) }, { toggle_class: "js-project-refs-dropdown" }
+    = dropdown_toggle dropdown_toggle_text, { toggle: "dropdown", selected: dropdown_toggle_text, ref: @ref, refs_url: refs_namespace_project_path(@project.namespace, @project) }, { toggle_class: "js-project-refs-dropdown" }
     .dropdown-menu.dropdown-menu-selectable{ class: ("dropdown-menu-align-right" if local_assigns[:align_right]) }
       = dropdown_title "Switch branch/tag"
       = dropdown_filter "Search branches and tags"