Fixes empty menu when typing on search input for the very first time
This commit is contained in:
parent
4fcd7ba954
commit
44817726fe
|
@ -31,6 +31,8 @@ class @SearchAutocomplete
|
||||||
|
|
||||||
@saveOriginalState()
|
@saveOriginalState()
|
||||||
|
|
||||||
|
@createAutocomplete()
|
||||||
|
|
||||||
@searchInput.addClass('disabled')
|
@searchInput.addClass('disabled')
|
||||||
@autocomplete = false
|
@autocomplete = false
|
||||||
|
|
||||||
|
@ -43,6 +45,57 @@ class @SearchAutocomplete
|
||||||
saveOriginalState: ->
|
saveOriginalState: ->
|
||||||
@originalState = @serializeState()
|
@originalState = @serializeState()
|
||||||
|
|
||||||
|
createAutocomplete: ->
|
||||||
|
@searchInput.glDropdown
|
||||||
|
filterInputBlur: false
|
||||||
|
filterable: true
|
||||||
|
filterRemote: true
|
||||||
|
highlight: true
|
||||||
|
filterInput: 'input#search'
|
||||||
|
search:
|
||||||
|
fields: ['text']
|
||||||
|
data: @getData.bind(@)
|
||||||
|
|
||||||
|
getData: (term, callback) ->
|
||||||
|
_this = @
|
||||||
|
|
||||||
|
# Ensure this is not called when autocomplete is disabled because
|
||||||
|
# this method still will be called because `GitLabDropdownFilter` is triggering this on keyup
|
||||||
|
return if @autocomplete is false
|
||||||
|
|
||||||
|
# Do not trigger request if input is empty
|
||||||
|
return if @searchInput.val() is ''
|
||||||
|
|
||||||
|
# Prevent multiple ajax calls
|
||||||
|
return if @loadingSuggestions
|
||||||
|
|
||||||
|
@loadingSuggestions = true
|
||||||
|
|
||||||
|
jqXHR = $.get(@autocompletePath, {
|
||||||
|
project_id: @projectId
|
||||||
|
project_ref: @projectRef
|
||||||
|
term: term
|
||||||
|
}, (response) ->
|
||||||
|
data = []
|
||||||
|
|
||||||
|
# List results
|
||||||
|
for suggestion in response
|
||||||
|
|
||||||
|
# Add group header before list each group
|
||||||
|
if lastCategory isnt suggestion.category
|
||||||
|
data.push
|
||||||
|
header: suggestion.category
|
||||||
|
|
||||||
|
lastCategory = suggestion.category
|
||||||
|
|
||||||
|
data.push
|
||||||
|
text: suggestion.label
|
||||||
|
url: suggestion.url
|
||||||
|
|
||||||
|
callback(data)
|
||||||
|
).always ->
|
||||||
|
_this.loadingSuggestions = false
|
||||||
|
|
||||||
serializeState: ->
|
serializeState: ->
|
||||||
{
|
{
|
||||||
# Search Criteria
|
# Search Criteria
|
||||||
|
@ -57,7 +110,8 @@ class @SearchAutocomplete
|
||||||
}
|
}
|
||||||
|
|
||||||
bindEvents: ->
|
bindEvents: ->
|
||||||
@searchInput.on 'keydown', @onSearchInputKeyDown
|
@searchInput.on 'keyup', @onSearchInputKeyUp
|
||||||
|
@searchInput.on 'click', @onSearchInputClick
|
||||||
@searchInput.on 'focus', @onSearchInputFocus
|
@searchInput.on 'focus', @onSearchInputFocus
|
||||||
@searchInput.on 'blur', @onSearchInputBlur
|
@searchInput.on 'blur', @onSearchInputBlur
|
||||||
@clearInput.on 'click', @onRemoveLocationClick
|
@clearInput.on 'click', @onRemoveLocationClick
|
||||||
|
@ -67,53 +121,7 @@ class @SearchAutocomplete
|
||||||
|
|
||||||
dropdownMenu = @dropdown.find('.dropdown-menu')
|
dropdownMenu = @dropdown.find('.dropdown-menu')
|
||||||
_this = @
|
_this = @
|
||||||
loading = false
|
@loadingSuggestions = false
|
||||||
|
|
||||||
@searchInput.glDropdown
|
|
||||||
filterInputBlur: false
|
|
||||||
filterable: true
|
|
||||||
filterRemote: true
|
|
||||||
highlight: true
|
|
||||||
filterInput: 'input#search'
|
|
||||||
search:
|
|
||||||
fields: ['text']
|
|
||||||
data: (term, callback) ->
|
|
||||||
# Ensure this is not called when autocomplete is disabled because
|
|
||||||
# this method still will be called because `GitLabDropdownFilter` is triggering this on keyup
|
|
||||||
return if _this.autocomplete is false
|
|
||||||
|
|
||||||
# Do not trigger request if input is empty
|
|
||||||
return if _this.searchInput.val() is ''
|
|
||||||
|
|
||||||
# Prevent multiple ajax calls
|
|
||||||
return if loading
|
|
||||||
|
|
||||||
loading = true
|
|
||||||
|
|
||||||
jqXHR = $.get(_this.autocompletePath, {
|
|
||||||
project_id: _this.projectId
|
|
||||||
project_ref: _this.projectRef
|
|
||||||
term: term
|
|
||||||
}, (response) ->
|
|
||||||
data = []
|
|
||||||
|
|
||||||
# List results
|
|
||||||
for suggestion in response
|
|
||||||
|
|
||||||
# Add group header before list each group
|
|
||||||
if lastCategory isnt suggestion.category
|
|
||||||
data.push
|
|
||||||
header: suggestion.category
|
|
||||||
|
|
||||||
lastCategory = suggestion.category
|
|
||||||
|
|
||||||
data.push
|
|
||||||
text: suggestion.label
|
|
||||||
url: suggestion.url
|
|
||||||
|
|
||||||
callback(data)
|
|
||||||
).always ->
|
|
||||||
loading = false
|
|
||||||
|
|
||||||
@dropdown.addClass('open')
|
@dropdown.addClass('open')
|
||||||
@searchInput.removeClass('disabled')
|
@searchInput.removeClass('disabled')
|
||||||
|
@ -122,7 +130,7 @@ class @SearchAutocomplete
|
||||||
onDropdownOpen: (e) =>
|
onDropdownOpen: (e) =>
|
||||||
@dropdown.dropdown('toggle')
|
@dropdown.dropdown('toggle')
|
||||||
|
|
||||||
onSearchInputKeyDown: (e) =>
|
onSearchInputKeyUp: (e) =>
|
||||||
switch e.keyCode
|
switch e.keyCode
|
||||||
when KEYCODE.BACKSPACE
|
when KEYCODE.BACKSPACE
|
||||||
if e.currentTarget.value is ''
|
if e.currentTarget.value is ''
|
||||||
|
@ -139,11 +147,18 @@ class @SearchAutocomplete
|
||||||
if @badgePresent()
|
if @badgePresent()
|
||||||
@disableAutocomplete()
|
@disableAutocomplete()
|
||||||
else
|
else
|
||||||
@enableAutocomplete()
|
|
||||||
|
# We should display the menu only when input is not empty
|
||||||
|
if @searchInput.val() isnt ''
|
||||||
|
@enableAutocomplete()
|
||||||
|
|
||||||
# Avoid falsy value to be returned
|
# Avoid falsy value to be returned
|
||||||
return
|
return
|
||||||
|
|
||||||
|
onSearchInputClick: =>
|
||||||
|
if (@searchInput.val() is '')
|
||||||
|
@disableAutocomplete()
|
||||||
|
|
||||||
onSearchInputFocus: =>
|
onSearchInputFocus: =>
|
||||||
@wrap.addClass('search-active')
|
@wrap.addClass('search-active')
|
||||||
|
|
||||||
|
|
|
@ -15,7 +15,10 @@
|
||||||
.dropdown{ data: {url: search_autocomplete_path } }
|
.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' }
|
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown' }
|
||||||
.dropdown-menu.dropdown-select
|
.dropdown-menu.dropdown-select
|
||||||
= dropdown_content
|
= dropdown_content do
|
||||||
|
%li
|
||||||
|
%a.is-focused
|
||||||
|
Loading...
|
||||||
= dropdown_loading
|
= dropdown_loading
|
||||||
%i.search-icon
|
%i.search-icon
|
||||||
%i.clear-icon.js-clear-input
|
%i.clear-icon.js-clear-input
|
||||||
|
|
Loading…
Reference in New Issue