Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix searchableSelect bugs

Browse source 
- 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
Show stats Download patch file Download diff file Expand all files Collapse all files

29
app/assets/javascripts/app/lib/app_post/searchable_select.js.coffee
View file

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

5
app/assets/stylesheets/zammad.css.scss
View file

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