fix searchableSelect bugs

- bug with spaces suggestions
- pressing left and right key while typing complets the suggestion
This commit is contained in:
Felix Niklas 2015-09-22 17:59:25 +02:00
parent b2437ead50
commit afb956ae00
2 changed files with 23 additions and 11 deletions

View file

@ -5,8 +5,8 @@ class App.SearchableSelect extends Spine.Controller
'blur .js-input': 'onBlur'
'click .js-option': 'selectItem'
'mouseenter .js-option': 'highlightItem'
'shown.bs.dropdown': 'onDropdownShown'
'hidden.bs.dropdown': 'onDropdownHidden'
'shown.bs.dropdown': 'onDropdownShown'
'hidden.bs.dropdown': 'onDropdownHidden'
elements:
'.js-option': 'option_items'
@ -59,7 +59,8 @@ class App.SearchableSelect extends Spine.Controller
switch event.keyCode
when 40 then @nudge event, 1 # down
when 38 then @nudge event, -1 # up
when 39 then @pickSuggestion event # right
when 39 then @fillWithAutocompleteSuggestion event # right
when 37 then @fillWithAutocompleteSuggestion event # left
when 13 then @onEnter event
when 27 then @onEscape()
when 9 then @onTab event
@ -84,13 +85,23 @@ class App.SearchableSelect extends Spine.Controller
visibleOptions.eq(currentPosition).addClass('is-active')
@clearAutocomplete()
pickSuggestion: (event) ->
if not @suggestion
fillWithAutocompleteSuggestion: (event) ->
if !@suggestion
return
if event.keyCode is 39 # right
# end position
caretPosition = @suggestion.length
else
# current position
caretPosition = @invisiblePart.text().length + 1
# check if the cursor is at the end of the text
# pick autocompleteSuggestion
@input.val @suggestion
@clearAutocomplete()
@toggle()
@input.prop('selectionStart', caretPosition)
@input.prop('selectionEnd', caretPosition)
autocomplete: (text) ->
@suggestion = text
@ -135,7 +146,7 @@ class App.SearchableSelect extends Spine.Controller
@toggle()
onBlur: =>
@clearAutocomplete()
# @clearAutocomplete()
onInput: (event) =>
@toggle() if not @isOpen
@ -157,7 +168,7 @@ class App.SearchableSelect extends Spine.Controller
highlightFirst: ->
first = @option_items.removeClass('is-active').not('.is-hidden').first()
first.addClass 'is-active'
@autocomplete first.text()
@autocomplete first.text().trim()
highlightItem: (event) =>
@option_items.removeClass('is-active')

View file

@ -6098,12 +6098,13 @@ output {
.searchableSelect-autocomplete {
position: absolute;
left: 13px;
top: 11px;
top: 10px;
right: 37px;
white-space: nowrap;
overflow: hidden;
pointer-events: none;
display: flex;
pointer-events: none;
white-space: pre;
}
.searchableSelect-autocomplete-invisible {