Changed compare dropdowns to dropdowns with isolated search input

Updated compare specs

4 files changed, 24 insertions, 5 deletions

diff --git a/app/assets/javascripts/compare_autocomplete.js b/app/assets/javascripts/compare_autocomplete.js
index 4e3a28cd163..294d2c9052c 100644
--- a/app/assets/javascripts/compare_autocomplete.js
+++ b/app/assets/javascripts/compare_autocomplete.js
@@ -23,8 +23,9 @@
           selectable: true,
           filterable: true,
           filterByText: true,
-          fieldName: $dropdown.attr('name'),
-          filterInput: 'input[type="text"]',
+          toggleLabel: true,
+          fieldName: $dropdown.data('field-name'),
+          filterInput: 'input[type="search"]',
           renderRow: function(ref) {
             var link;
             if (ref.header != null) {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 8c8c403244e..7c8ab7cb2a2 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -743,6 +743,19 @@ pre.light-well {
   .dropdown-menu {
     width: 300px;
   }
+
+  > .input-group > .compare-dropdown-toggle {
+    width: 200px;
+
+    .dropdown-toggle-text {
+      display: block;
+      height: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    }
+  }
 }
 
 .clearable-input {
@@ -779,4 +792,4 @@ pre.light-well {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/app/views/projects/compare/_form.html.haml b/app/views/projects/compare/_form.html.haml
index d79336f5a60..b66027115b2 100644
--- a/app/views/projects/compare/_form.html.haml
+++ b/app/views/projects/compare/_form.html.haml
@@ -5,13 +5,17 @@
     .form-group.dropdown.compare-form-group.js-compare-from-dropdown
       .input-group.inline-input-group
         %span.input-group-addon from
-        = 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 }
+        = hidden_field_tag :from, params[:from]
+        = button_tag type: 'button', class: "form-control compare-dropdown-toggle 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], field_name: :from } do
+          .dropdown-toggle-text= params[:from] || 'Select branch/tag'
       = render "ref_dropdown"
     = "..."
     .form-group.dropdown.compare-form-group.js-compare-to-dropdown
       .input-group.inline-input-group
         %span.input-group-addon to
-        = 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 }
+        = hidden_field_tag :to, params[:to]
+        = button_tag type: 'button', class: "form-control compare-dropdown-toggle 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], field_name: :to } do
+          .dropdown-toggle-text= params[:to] || 'Select branch/tag'
       = render "ref_dropdown"
      
     = button_tag "Compare", class: "btn btn-create commits-compare-btn"
diff --git a/app/views/projects/compare/_ref_dropdown.html.haml b/app/views/projects/compare/_ref_dropdown.html.haml
index c604c6d0135..27d928c87a0 100644
--- a/app/views/projects/compare/_ref_dropdown.html.haml
+++ b/app/views/projects/compare/_ref_dropdown.html.haml
@@ -1,4 +1,5 @@
 .dropdown-menu.dropdown-menu-selectable
   = dropdown_title "Select branch/tag"
+  = dropdown_filter "Filter by branch/tag"
   = dropdown_content
   = dropdown_loading