Merge branch 'develop' of github.com:martini/zammad into develop

app/assets/javascripts/app/controllers/layout_ref.coffee

@@ -1521,7 +1521,7 @@ class InputsRef extends App.ControllerContent
       attribute:
         name:        'company-name'
         id:          'company-name-12345'
-        options:     [{value:0,name:'Apple'},{value:1,name:'Microsoft',selected:true},{value:2,name:'Google'},{value:3,name:'Deutsche Bahn'},{value:4,name:'Sparkasse'},{value:5,name:'Deutsche Post'},{value:6,name:'Mitfahrzentrale'},{value:7,name:'Starbucks'},{value:8,name:'Mac Donalds'},{value:9,name:'Flixbus'},{value:10,name:'Betahaus'},{value:11,name:'Bruno Banani'},{value:12,name:'Alpina'},{value:13,name:'Samsung'},{value:14,name:'ChariTea'},{value:15,name:'fritz-kola'},{value:16,name:'Vitamin Water'},{value:17,name:'Znuny'},{value:18,name:'Max & Moritz'}]
+        options:     [{value:0,name:'Apple'},{value:1,name:'Microsoft',selected:true},{value:2,name:'Google'},{value:3,name:'Deutsche Bahn'},{value:4,name:'Sparkasse'},{value:5,name:'Deutsche Post'},{value:6,name:'Mitfahrzentrale'},{value:7,name:'Starbucks'},{value:8,name:'Mac Donalds'},{value:9,name:'Flixbus'},{value:10,name:'Betahaus'},{value:11,name:'Bruno Banani'},{value:12,name:'Alpina'},{value:13,name:'Samsung'},{value:14,name:'ChariTea'},{value:15,name:'fritz-kola'},{value:16,name:'Vitamin Water'},{value:17,name:'Znuny'},{value:18,name:'Max & Moritz'},{value:19,name:'Telefónica Deutschland Holding GmbH'}]
     @$('.columnSelectPlaceholder').replaceWith( columnSelectObject.element() )
 
 App.Config.set( 'layout_ref/inputs', InputsRef, 'Routes' )

app/assets/javascripts/app/lib/app_post/column_select.coffee

@@ -68,7 +68,7 @@ class App.ColumnSelect extends Spine.Controller
     @poolOptions.each (i, el) ->
       return if $(el).hasClass('is-hidden')
 
-      if $(el).text().indexOf(filter) > -1
+      if $(el).text().toLowerCase().indexOf(filter.toLowerCase()) > -1
         $(el).removeClass 'is-filtered'
       else
         $(el).addClass 'is-filtered'

app/assets/javascripts/app/lib/app_post/searchable_select.coffee

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

app/assets/javascripts/app/views/generic/column_select.jst.eco

@@ -12,7 +12,7 @@
   <% end %>
 </select>
 <div class="columnSelect-column columnSelect-column--selected js-selected">
-  <div class="u-placeholder js-placeholder"><%- @T('Nothing selected') %></div>
+  <div class="u-placeholder u-unselectable js-placeholder"><%- @T('Nothing selected') %></div>
   <% for option in @options: %>
   <div class="columnSelect-option is-hidden js-remove js-option" data-value="<%= option.value %>"><%= option.name %></div>
   <% end %>
@@ -29,7 +29,7 @@
   <% end %>
   <div class="columnSelect-pool js-pool">
     <% for option in @options: %>
-    <div class="columnSelect-option js-select js-option" data-value="<%= option.value %>"><%= option.name %></div>
+    <div class="columnSelect-option js-select js-option" data-value="<%= option.value %>" title="<%= option.name %>"><%= option.name %></div>
     <% end %>
   </div>
 </div>

app/assets/stylesheets/zammad.scss

@@ -123,6 +123,11 @@ blockquote {
   user-select: none;
 }
 
+.u-unselectable {
+  pointer-events: none;
+  user-select: none;
+}
+
 .u-textTruncate {
   white-space: nowrap;
   overflow: hidden;
@@ -7036,7 +7041,7 @@ output {
   .searchableSelect-autocomplete {
     position: absolute;
     left: 13px;
-    top: 10px;
+    top: 11px;
     right: 37px;
     white-space: nowrap;
     overflow: hidden;
@@ -7791,12 +7796,9 @@ output {
   }
 }
 
-
 .columnSelect {
+  height: 234px;
   display: flex;
-  height: auto;
-  line-height: 25px;
-  max-height: 300px;
   padding: 0;
   line-height: 22px;
   
@@ -7805,8 +7807,7 @@ output {
   }
 
   .columnSelect-column--selected { 
-    flex-basis: 66%;
+    flex: 1 1 66%;
-    flex-grow: 1;
     overflow: auto;
     padding: 7px;
   }
@@ -7817,10 +7818,11 @@ output {
     border-left: 1px dotted hsl(0,0%,90%);
     display: flex;
     flex-direction: column;
+    min-width: 0;
   }
 
   .columnSelect-pool {
-    flex: 1;
+    flex: 1 1 auto;
     overflow: auto;
     padding: 7px;
   }
@@ -7830,6 +7832,9 @@ output {
     user-select: none;
     padding: 0 5px;
     border-radius: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
     
     &:hover {
       background: hsl(0,0%,96%);