diff --git a/app/assets/javascripts/gl_dropdown.js.coffee b/app/assets/javascripts/gl_dropdown.js.coffee
index be05250a3a8..4b78bcde774 100644
--- a/app/assets/javascripts/gl_dropdown.js.coffee
+++ b/app/assets/javascripts/gl_dropdown.js.coffee
@@ -2,8 +2,7 @@ class GitLabDropdownFilter
BLUR_KEYCODES = [27, 40]
HAS_VALUE_CLASS = "has-value"
- constructor: (@dropdown, @options) ->
- @input = @dropdown.find('.dropdown-input .dropdown-input-field')
+ constructor: (@input, @options) ->
$inputContainer = @input.parent()
$clearButton = $inputContainer.find('.js-dropdown-input-clear')
@@ -112,7 +111,9 @@ class GitLabDropdown
# Init filiterable
if @options.filterable
- @filter = new GitLabDropdownFilter @dropdown,
+ @input = @dropdown.find('.dropdown-input .dropdown-input-field')
+
+ @filter = new GitLabDropdownFilter @input,
remote: @options.filterRemote
query: @options.data
keys: @options.search.fields
@@ -120,6 +121,7 @@ class GitLabDropdown
return @fullData
callback: (data) =>
@parseData data
+ @highlightRow 1
enterCallback: =>
@selectFirstRow()
@@ -241,11 +243,19 @@ class GitLabDropdown
noResults: ->
html = "
"
- html += ""
+ html += ""
html += ""
+ highlightRow: (index) ->
+ if @input.val() isnt ""
+ selector = '.dropdown-content li:first-child a'
+ if @dropdown.find(".dropdown-toggle-page").length
+ selector = ".dropdown-page-one .dropdown-content li:first-child a"
+
+ $(selector).addClass 'is-focused'
+
rowClicked: (el) ->
fieldName = @options.fieldName
field = @dropdown.parent().find("input[name='#{fieldName}']")
@@ -289,7 +299,7 @@ class GitLabDropdown
if @dropdown.find(".dropdown-toggle-page").length
selector = ".dropdown-page-one .dropdown-content li:first-child a"
- # similute a click on the first link
+ # simulate a click on the first link
$(selector).trigger "click"
$.fn.glDropdown = (opts) ->
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 20afc5c9dc0..2d616fc660c 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -130,6 +130,12 @@
text-decoration: none;
outline: 0;
}
+
+ &.dropdown-menu-empty-link {
+ &.is-focused {
+ background-color: $dropdown-empty-row-bg;
+ }
+ }
}
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b014031e758..61e0dd4d672 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -169,6 +169,7 @@ $regular_font: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif
$dropdown-bg: #fff;
$dropdown-link-color: #555;
$dropdown-link-hover-bg: $row-hover;
+$dropdown-empty-row-bg: rgba(#000, .04);
$dropdown-border-color: rgba(#000, .1);
$dropdown-shadow-color: rgba(#000, .1);
$dropdown-divider-color: rgba(#000, .1);