From a29b45b061a0f2669818fde8fa324baac92b1d71 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 24 May 2016 16:57:26 +0100
Subject: [PATCH] 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
---
 .../javascripts/search_autocomplete.js.coffee | 22 +++++++++----------
 app/assets/stylesheets/pages/search.scss      |  4 +++-
 app/views/layouts/_search.html.haml           |  7 ++----
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
index 6a7b4ad1db7..2122e80f57a 100644
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ b/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()
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 2bff70c8c64..037ad520545 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/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;
   }
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 6b208c3d0bb..b49207fc315 100644
--- a/app/views/layouts/_search.html.haml
+++ b/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
+      - if label.present?
+        .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' }