diff --git a/app/assets/javascripts/search_autocomplete.js.coffee b/app/assets/javascripts/search_autocomplete.js.coffee index e6a2990ab5..ff81a39146 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 99307e7de0..bb49ae396c 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 7525db891f..50505e9cf8 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;