Change approach, do not use timeouts

2 files changed, 14 insertions, 20 deletions

diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
index 564fb265b9d..5a0df7817c9 100644
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ b/app/assets/javascripts/search_autocomplete.js.coffee
@@ -137,13 +137,17 @@ class @SearchAutocomplete
     }
 
   bindEvents: ->
+    $(document).on 'click', @onDocumentClick
     @searchInput.on 'keydown', @onSearchInputKeyDown
     @searchInput.on 'keyup', @onSearchInputKeyUp
     @searchInput.on 'click', @onSearchInputClick
     @searchInput.on 'focus', @onSearchInputFocus
-    @searchInput.on 'blur', @onSearchInputBlur
     @clearInput.on 'click', @onRemoveLocationClick
 
+  onDocumentClick: (e) =>
+    if not $.contains(@dropdown[0], e.target) and @isFocused
+      @onSearchInputBlur()
+
   enableAutocomplete: ->
     # No need to enable anything if user is not logged in
     return if !gon.current_user_id
@@ -193,27 +197,21 @@ class @SearchAutocomplete
     e.stopImmediatePropagation()
 
   onSearchInputFocus: =>
+    @isFocused = true
     @wrap.addClass('search-active')
 
   onRemoveLocationClick: (e) =>
     e.preventDefault()
     @removeLocationBadge()
     @searchInput.val('').focus()
-    @skipBlurEvent = true
 
   onSearchInputBlur: (e) =>
-    @skipBlurEvent = false
-
-    # We should wait to make sure we are not clearing the input instead
-    setTimeout( =>
-      return if @skipBlurEvent
+    @isFocused = false
+    @wrap.removeClass('search-active')
 
-      @wrap.removeClass('search-active')
-
-      # If input is blank then restore state
-      if @searchInput.val() is ''
-        @restoreOriginalState()
-    , 150)
+    # If input is blank then restore state
+    if @searchInput.val() is ''
+      @restoreOriginalState()
 
   addLocationBadge: (item) ->
     category = if item.category? then "#{item.category}: " else ''
@@ -291,9 +289,5 @@ class @SearchAutocomplete
 
       $el.removeClass('is-active')
       @disableAutocomplete()
+      @onSearchInputFocus()
       @searchInput.val('').focus()
-
-      # We need to wait because of @skipBlurEvent
-      setTimeout( =>
-        @onSearchInputFocus()
-      , 200)
diff --git a/app/views/layouts/_search.html.haml b/app/views/layouts/_search.html.haml
index 9d4ab9847a8..ba04bd74b8d 100644
--- a/app/views/layouts/_search.html.haml
+++ b/app/views/layouts/_search.html.haml
@@ -21,8 +21,8 @@
                   %a.is-focused.dropdown-menu-empty-link
                     Loading...
             = dropdown_loading
-        %i.search-icon
-        %i.clear-icon.js-clear-input
+          %i.search-icon
+          %i.clear-icon.js-clear-input
 
     = hidden_field_tag :group_id, @group.try(:id)
     = hidden_field_tag :project_id, @project && @project.persisted? ? @project.id : '', id: 'search_project_id'