FIX: simplify keyboard handling

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -218,12 +218,12 @@ export default SelectKitComponent.extend({
   },
 
   didSelect() {
-    this.focus();
+    this.focusFilterOrHeader();
     this.autoHighlight();
   },
 
   didDeselect() {
-    this.focus();
+    this.focusFilterOrHeader();
     this.autoHighlight();
   },
 

app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6

@@ -66,10 +66,8 @@ export default Ember.Mixin.create({
     Ember.run.schedule("afterRender", () => this.$header().focus());
   },
 
-  expand() {
-    if (this.get("isExpanded") === true) return;
-    this.setProperties({ isExpanded: true, renderedBodyOnce: true, isFocused: true });
-
+  // try to focus filter and fallback to header if not present
+  focusFilterOrHeader() {
     Ember.run.schedule("afterRender", () => {
       if (this.$filterInput().is(":visible")) {
         this.$filterInput().focus();
@@ -77,7 +75,12 @@ export default Ember.Mixin.create({
         this.$header().focus();
       }
     });
+  },
 
+  expand() {
+    if (this.get("isExpanded") === true) return;
+    this.setProperties({ isExpanded: true, renderedBodyOnce: true, isFocused: true });
+    this.focusFilterOrHeader();
     this.autoHighlight();
   },
 

app/assets/javascripts/select-kit/mixins/events.js.es6

@@ -21,8 +21,8 @@ export default Ember.Mixin.create({
 
     if (this.$header()) {
       this.$header()
-        .off("focus.select-kit")
         .off("blur.select-kit")
+        .off("focus.select-kit")
         .off("keypress.select-kit")
         .off("keydown.select-kit");
     }
@@ -31,9 +31,7 @@ export default Ember.Mixin.create({
       this.$filterInput()
         .off("change.select-kit")
         .off("keydown.select-kit")
-        .off("keypress.select-kit")
-        .off("focus.select-kit")
-        .off("focusin.select-kit");
+        .off("keypress.select-kit");
     }
   },
 
@@ -74,6 +72,7 @@ export default Ember.Mixin.create({
         const keyCode = event.keyCode || event.which;
 
         if (keyCode === this.keys.ENTER) { return true; }
+        if (keyCode === this.keys.TAB) { return true; }
 
         this.expand(event);
 
@@ -81,21 +80,13 @@ export default Ember.Mixin.create({
           this.set("renderedFilterOnce", true);
         }
 
-        Ember.run.schedule("afterRender", () => {
-          let newVal = this.$filterInput().val();
-
-          const start = this.$filterInput()[0].selectionStart;
-          const end = this.$filterInput()[0].selectionEnd;
-          if (!Ember.isNone(start) && !Ember.isNone(end)) {
-            newVal = newVal.substr(0, start) +
-              String.fromCharCode(keyCode) +
-              newVal.substr(end, newVal.length);
-          } else {
-            newVal = newVal + String.fromCharCode(keyCode);
-          }
-
-          this.$filterInput().focus().val(newVal);
-        });
+        if (keyCode >= 65 && keyCode <= 122) {
+          Ember.run.schedule("afterRender", () => {
+            this.$filterInput()
+                .focus()
+                .val(this.$filterInput().val() + String.fromCharCode(keyCode));
+          });
+        }
 
         return false;
       });
@@ -104,10 +95,6 @@ export default Ember.Mixin.create({
       .on("change.select-kit", (event) => {
         this.send("onFilter", $(event.target).val());
       })
-      .on("focus.select-kit focusin.select-kit", (event) => {
-        this.set("isFocused", true);
-        this._destroyEvent(event);
-      })
       .on("keypress.select-kit", (event) => {
         event.stopPropagation();
       })