Added clear button to dropdown filter

3 files changed, 39 insertions, 5 deletions

diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index 960585245d7..be05250a3a8 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -1,13 +1,30 @@
 class GitLabDropdownFilter
   BLUR_KEYCODES = [27, 40]
+  HAS_VALUE_CLASS = "has-value"
 
   constructor: (@dropdown, @options) ->
-    @input = @dropdown.find(".dropdown-input .dropdown-input-field")
+    @input = @dropdown.find('.dropdown-input .dropdown-input-field')
+    $inputContainer = @input.parent()
+    $clearButton = $inputContainer.find('.js-dropdown-input-clear')
+
+    # Clear click
+    $clearButton.on 'click', (e) =>
+      e.preventDefault()
+      e.stopPropagation()
+      @input
+        .val('')
+        .trigger('keyup')
+        .focus()
 
     # Key events
     timeout = ""
     @input.on "keyup", (e) =>
-      if e.keyCode is 13 && @input.val() isnt ""
+      if @input.val() isnt "" and !$inputContainer.hasClass HAS_VALUE_CLASS
+        $inputContainer.addClass HAS_VALUE_CLASS
+      else if @input.val() is "" and $inputContainer.hasClass HAS_VALUE_CLASS
+        $inputContainer.removeClass HAS_VALUE_CLASS
+
+      if e.keyCode is 13 and @input.val() isnt ""
         if @options.enterCallback
           @options.enterCallback()
         return
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index d92cf6e6c44..fbead004ade 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -270,6 +270,22 @@
     font-size: 12px;
     pointer-events: none;
   }
+
+  .dropdown-input-clear {
+    display: none;
+    cursor: pointer;
+    pointer-events: all;
+  }
+
+  &.has-value {
+    .dropdown-input-clear {
+      display: block;
+    }
+
+    .dropdown-input-search {
+      display: none;
+    }
+  }
 }
 
 .dropdown-input-field {
@@ -286,13 +302,13 @@
     border-color: $dropdown-input-focus-border;
     box-shadow: 0 0 4px $dropdown-input-focus-shadow;
 
-    + .fa {
+    ~ .fa {
       color: $dropdown-link-color;
     }
   }
 
   &:hover {
-    + .fa {
+    ~ .fa {
       color: $dropdown-link-color;
     }
   }
diff --git a/app/helpers/dropdowns_helper.rb b/app/helpers/dropdowns_helper.rb
index ceff1fbb161..316a10b7da3 100644
--- a/app/helpers/dropdowns_helper.rb
+++ b/app/helpers/dropdowns_helper.rb
@@ -70,7 +70,8 @@ module DropdownsHelper
   def dropdown_filter(placeholder)
     content_tag :div, class: "dropdown-input" do
       filter_output = search_field_tag nil, nil, class: "dropdown-input-field", placeholder: placeholder
-      filter_output << icon('search')
+      filter_output << icon('search', class: "dropdown-input-search")
+      filter_output << icon('times', class: "dropdown-input-clear js-dropdown-input-clear", role: "button")
 
       filter_output.html_safe
     end