Display clear button only if input has a value

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;
     }
   }