Clicking search pill focuses field

When clicking the pill in the search field, it now focus the field. Previously you would have to make sure you click in the field.

Fixed an issue where clicking out of the field wouldn't remove the focus
outline

Also reduced some of the HTML to remove what isn't needed

app/assets/javascripts/search_autocomplete.js.coffee

@@ -20,8 +20,7 @@ class @SearchAutocomplete
     @dropdown = @wrap.find('.dropdown')
     @dropdownContent = @dropdown.find('.dropdown-content')
 
-    @locationBadgeEl = @getElement('.search-location-badge')
-    @locationText = @getElement('.location-text')
+    @locationBadgeEl = @getElement('.location-badge')
     @scopeInputEl = @getElement('#scope')
     @searchInput = @getElement('.search-input')
     @projectInputEl = @getElement('#search_project_id')
@@ -133,7 +132,7 @@ class @SearchAutocomplete
       scope: @scopeInputEl.val()
 
       # Location badge
-      _location: @locationText.text()
+      _location: @locationBadgeEl.text()
     }
 
   bindEvents: ->
@@ -143,12 +142,14 @@ class @SearchAutocomplete
     @searchInput.on 'click', @onSearchInputClick
     @searchInput.on 'focus', @onSearchInputFocus
     @clearInput.on 'click', @onClearInputClick
+    @locationBadgeEl.on 'click', =>
+      @searchInput.focus()
 
   onDocumentClick: (e) =>
     # If clicking outside the search box
     # And search input is not focused
     # And we are not clicking inside a suggestion
-    if not $.contains(@dropdown[0], e.target) and @isFocused and not $(e.target).parents('ul').length
+    if not $.contains(@dropdown[0], e.target) and @isFocused and not $(e.target).closest('.search-form').length
       @onSearchInputBlur()
 
   enableAutocomplete: ->
@@ -221,10 +222,8 @@ class @SearchAutocomplete
     category = if item.category? then "#{item.category}: " else ''
     value = if item.value? then item.value else ''
 
-    html = "<span class='location-badge'>
-              <i class='location-text'>#{category}#{value}</i>
-            </span>"
-    @locationBadgeEl.html(html)
+    badgeText = "#{category}#{value}"
+    @locationBadgeEl.text(badgeText).show()
     @wrap.addClass('has-location-badge')
 
   restoreOriginalState: ->
@@ -233,9 +232,8 @@ class @SearchAutocomplete
     for input in inputs
       @getElement("##{input}").val(@originalState[input])
 
-
     if @originalState._location is ''
-      @locationBadgeEl.empty()
+      @locationBadgeEl.hide()
     else
       @addLocationBadge(
         value: @originalState._location
@@ -244,7 +242,7 @@ class @SearchAutocomplete
     @dropdown.removeClass 'open'
 
   badgePresent: ->
-    @locationBadgeEl.children().length
+    @locationBadgeEl.length
 
   resetSearchState: ->
     inputs = Object.keys @originalState
@@ -257,7 +255,7 @@ class @SearchAutocomplete
       @getElement("##{input}").val('')
 
   removeLocationBadge: ->
-    @locationBadgeEl.empty()
+    @locationBadgeEl.hide()
 
     # Reset state
     @resetSearchState()

app/assets/stylesheets/pages/search.scss

@@ -28,6 +28,7 @@
   }
 
   .search-input {
+    padding-right: 20px;
     border: none;
     font-size: 14px;
     outline: none;
@@ -47,6 +48,7 @@
     display: inline-block;
     background-color: $location-badge-bg;
     vertical-align: top;
+    cursor: default;
   }
 
   .search-input-container {
@@ -55,7 +57,7 @@
     position: relative;
   }
 
-  .search-location-badge, .search-input-wrap {
+  .search-input-wrap {
     // Fallback if flexbox is not supported
     display: inline-block;
   }

app/views/layouts/_search.html.haml

@@ -6,11 +6,8 @@
 .search.search-form{class: "#{'has-location-badge' if label.present?}"}
   = form_tag search_path, method: :get, class: 'navbar-form' do |f|
     .search-input-container
-      .search-location-badge
       - if label.present?
-          %span.location-badge
-            %i.location-text
-              = label
+        .location-badge= label
       .search-input-wrap
         .dropdown{ data: {url: search_autocomplete_path } }
           = search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off',  data: { toggle: 'dropdown' }