Always display suggestions

3 files changed, 20 insertions, 25 deletions

diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee
index e6a2990ab5b..ff81a39146a 100644
--- a/app/assets/javascripts/search_autocomplete.js.coffee
+++ b/app/assets/javascripts/search_autocomplete.js.coffee
@@ -72,9 +72,6 @@ class @SearchAutocomplete
     # Prevent multiple ajax calls
     return if @loadingSuggestions
 
-    # Do not request suggestions if dropdown is disabled
-    return if @badgePresent()
-
     @loadingSuggestions = true
 
     jqXHR = $.get(@autocompletePath, {
@@ -132,16 +129,12 @@ class @SearchAutocomplete
     # No need to enable anything if user is not logged in
     return if !gon.current_user_id
 
-    dropdownMenu = @dropdown.find('.dropdown-menu')
     _this = @
     @loadingSuggestions = false
 
     @dropdown.addClass('open')
     @searchInput.removeClass('disabled')
 
-  onDropdownOpen: (e) =>
-    @dropdown.dropdown('toggle')
-
   onSearchInputKeyDown: =>
     # Saves last length of the entered text
     @saveTextLength()
@@ -154,23 +147,20 @@ class @SearchAutocomplete
             @removeLocationBadge()
 
         # When removing the last character and no badge is present
-        if @lastTextLength is 1 and !@badgePresent()
+        if @lastTextLength is 1
           @disableAutocomplete()
+
+        # When removing any character from existin value
+        if @lastTextLength > 1
+          @enableAutocomplete()
+
       when KEYCODE.ESCAPE
-        if @badgePresent()
-        else
-          @restoreOriginalState()
+        @restoreOriginalState()
 
-          # If after restoring there's a badge
-          @disableAutocomplete() if @badgePresent()
       else
-        if @badgePresent()
-          @disableAutocomplete()
-        else
-
-          # We should display the menu only when input is not empty
-          if @searchInput.val() isnt ''
-            @enableAutocomplete()
+        # We should display the menu only when input is not empty
+        if @searchInput.val() isnt ''
+          @enableAutocomplete()
 
     # Avoid falsy value to be returned
     return
@@ -229,8 +219,8 @@ class @SearchAutocomplete
     @dropdown.removeClass 'open'
 
     # Only add class if there's a badge
-    if @badgePresent()
-      @searchInput.addClass 'disabled'
+    # if @badgePresent()
+      # @searchInput.addClass 'disabled'
 
   badgePresent: ->
     @locationBadgeEl.children().length
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 99307e7de02..bb49ae396c7 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -205,5 +205,5 @@ $search-input-width: $dropdown-width;
 $location-badge-color: #aaa;
 $location-badge-bg: $gray-normal;
 $location-icon-color: #e7e9ed;
-$location-active-color: #7f8fa4;
-$location-active-bg: $location-active-color;
+$location-active-color: $gl-text-color;
+$location-active-bg: $search-input-border-color;
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 7525db891fc..50505e9cf8c 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -63,6 +63,7 @@
   .search-input-container {
     display: -webkit-flex;
     display: flex;
+    position: relative;
   }
 
   .search-location-badge, .search-input-wrap {
@@ -72,7 +73,6 @@
 
   .search-input-wrap {
     width: 100%;
-    position: relative;
 
     .search-icon, .clear-icon {
       position: absolute;
@@ -100,6 +100,11 @@
       display: none;
     }
 
+    // Rewrite position. Dropdown menu should be relative to .search-input-container
+    .dropdown {
+      position: static;
+    }
+
     .dropdown-header {
       text-transform: uppercase;
       font-size: 11px;