From 5f4ce722c0f5fbf9129dddf20de879f00db4a311 Mon Sep 17 00:00:00 2001
From: Alfredo Sumaran <alfredo@gitlab.com>
Date: Wed, 6 Apr 2016 13:55:49 -0500
Subject: [PATCH] Display clear button only if input has a value

---
 .../javascripts/search_autocomplete.js.coffee    |  7 ++++---
 app/assets/stylesheets/pages/search.scss         | 16 ++++++++--------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
index 5a0df7817c9..9c85ce1633b 100644
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ b/app/assets/javascripts/search_autocomplete.js.coffee
@@ -142,7 +142,7 @@ class @SearchAutocomplete
     @searchInput.on 'keyup', @onSearchInputKeyUp
     @searchInput.on 'click', @onSearchInputClick
     @searchInput.on 'focus', @onSearchInputFocus
-    @clearInput.on 'click', @onRemoveLocationClick
+    @clearInput.on 'click', @onClearInputClick
 
   onDocumentClick: (e) =>
     if not $.contains(@dropdown[0], e.target) and @isFocused
@@ -189,6 +189,8 @@ class @SearchAutocomplete
           # We should display the menu only when input is not empty
           @enableAutocomplete()
 
+    @wrap.toggleClass 'has-value', !!e.target.value
+
     # Avoid falsy value to be returned
     return
 
@@ -200,9 +202,8 @@ class @SearchAutocomplete
     @isFocused = true
     @wrap.addClass('search-active')
 
-  onRemoveLocationClick: (e) =>
+  onClearInputClick: (e) =>
     e.preventDefault()
-    @removeLocationBadge()
     @searchInput.val('').focus()
 
   onSearchInputBlur: (e) =>
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 9274796233b..f0f3744c6fa 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -144,16 +144,16 @@
         color: $location-icon-active-color;
       }
     }
+  }
 
-    &.has-location-badge {
-      .search-icon {
-        display: none;
-      }
+  &.has-value {
+    .search-icon {
+      display: none;
+    }
 
-      .clear-icon {
-        cursor: pointer;
-        display: block;
-      }
+    .clear-icon {
+      cursor: pointer;
+      display: block;
     }
   }