searchableSelect: fix autocomp. pos and

This commit is contained in:
Felix Niklas 2016-02-09 18:31:37 +01:00
parent 07925e665c
commit d6c78469ad
2 changed files with 16 additions and 6 deletions

View file

@ -3,6 +3,7 @@ class App.SearchableSelect extends Spine.Controller
events: events:
'input .js-input': 'onInput' 'input .js-input': 'onInput'
'blur .js-input': 'onBlur' 'blur .js-input': 'onBlur'
'focus .js-input': 'onFocus'
'click .js-option': 'selectItem' 'click .js-option': 'selectItem'
'mouseenter .js-option': 'highlightItem' 'mouseenter .js-option': 'highlightItem'
'shown.bs.dropdown': 'onDropdownShown' 'shown.bs.dropdown': 'onDropdownShown'
@ -97,14 +98,16 @@ class App.SearchableSelect extends Spine.Controller
caretPosition = @invisiblePart.text().length + 1 caretPosition = @invisiblePart.text().length + 1
@input.val @suggestion @input.val @suggestion
@shadowInput.val @suggestionValue
@clearAutocomplete() @clearAutocomplete()
@toggle() @toggle()
@input.prop('selectionStart', caretPosition) @input.prop('selectionStart', caretPosition)
@input.prop('selectionEnd', caretPosition) @input.prop('selectionEnd', caretPosition)
autocomplete: (text) -> autocomplete: (value, text) ->
@suggestion = text @suggestion = text
@suggestionValue = value
startIndex = text.indexOf(@query) startIndex = text.indexOf(@query)
if !@query or startIndex != 0 if !@query or startIndex != 0
@ -146,7 +149,12 @@ class App.SearchableSelect extends Spine.Controller
@toggle() @toggle()
onBlur: -> onBlur: ->
# @clearAutocomplete() @clearAutocomplete()
onFocus: ->
textEnd = @input.val().length
@input.prop('selectionStart', textEnd)
@input.prop('selectionEnd', textEnd)
onInput: (event) => onInput: (event) =>
@toggle() if not @isOpen @toggle() if not @isOpen
@ -163,12 +171,14 @@ class App.SearchableSelect extends Spine.Controller
@textContent.match(regex) @textContent.match(regex)
.removeClass 'is-hidden' .removeClass 'is-hidden'
@highlightFirst() @highlightFirst(true)
highlightFirst: -> highlightFirst: (autocomplete) ->
first = @option_items.removeClass('is-active').not('.is-hidden').first() first = @option_items.removeClass('is-active').not('.is-hidden').first()
first.addClass 'is-active' first.addClass 'is-active'
@autocomplete first.text().trim()
if autocomplete
@autocomplete first.attr('data-value'), first.text().trim()
highlightItem: (event) => highlightItem: (event) =>
@option_items.removeClass('is-active') @option_items.removeClass('is-active')

View file

@ -7041,7 +7041,7 @@ output {
.searchableSelect-autocomplete { .searchableSelect-autocomplete {
position: absolute; position: absolute;
left: 13px; left: 13px;
top: 10px; top: 11px;
right: 37px; right: 37px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;