minor select-box fixes

- select row when using tab
- makes sure tab order is correct
- highlight first row when filtering

app/assets/javascripts/discourse/components/select-box.js.es6

@@ -208,6 +208,14 @@ export default Ember.Component.extend({
     const keyCode = event.keyCode || event.which;
 
     if (this.get("expanded")) {
+      if ((keyCode === 13 || keyCode === 9) && Ember.isPresent(this.get("highlightedValue"))) {
+        event.preventDefault();
+        this.setProperties({
+          value: this._castInteger(this.get("highlightedValue")),
+          expanded: false
+        });
+      }
+
       if (keyCode === 9) {
         this.set("expanded", false);
       }
@@ -217,14 +225,6 @@ export default Ember.Component.extend({
         event.stopPropagation();
       }
 
-      if (keyCode === 13 && Ember.isPresent(this.get("highlightedValue"))) {
-        event.preventDefault();
-        this.setProperties({
-          value: this._castInteger(this.get("highlightedValue")),
-          expanded: false
-        });
-      }
-
       if (keyCode === 38) {
         event.preventDefault();
         const self = this;
@@ -320,14 +320,18 @@ export default Ember.Component.extend({
     return headerText;
   },
 
-  @computed("content.[]", "filter")
-  filteredContent(content, filter) {
+  @computed("content.[]", "filter", "idKey")
+  filteredContent(content, filter, idKey) {
     let filteredContent;
 
     if (Ember.isEmpty(filter)) {
       filteredContent = content;
     } else {
       filteredContent = this.filterFunction(content)(this);
+
+      if (!Ember.isEmpty(filteredContent)) {
+        this.set("highlightedValue", filteredContent[0][idKey]);
+      }
     }
 
     return filteredContent;

app/assets/javascripts/discourse/templates/components/select-box.hbs

@@ -26,6 +26,7 @@
         icon=filterIcon
         focused=filterFocused
         placeholder=filterPlaceholder
+        tabindex=tabindex
       }}
     {{/if}}
 

app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs

@@ -1,5 +1,5 @@
 {{input
-  tabindex="-1"
+  tabindex=tabindex
   class="filter-query"
   placeholder=placeholder
   key-up=onFilterChange

test/javascripts/components/select-box-test.js.es6

@@ -341,7 +341,7 @@ componentTest('supports custom row title', {
 });
 
 componentTest('supports keyboard events', {
-  template: '{{select-box content=content}}',
+  template: '{{select-box content=content filterable=true}}',
 
   beforeEach() {
     this.set("content", [{ id: 1, text: "robin" }, { id: 2, text: "regis" }]);
@@ -372,6 +372,12 @@ componentTest('supports keyboard events', {
       find(".select-box").trigger(event);
     };
 
+    const tabEvent = () => {
+      const event = jQuery.Event("keydown");
+      event.keyCode = 9;
+      find(".select-box").trigger(event);
+    };
+
     click(".select-box-header");
 
     andThen(() => arrowDownEvent() );
@@ -406,7 +412,6 @@ componentTest('supports keyboard events', {
     });
 
     click(".select-box-header");
-
     andThen(() => {
       assert.equal(find(".select-box").hasClass("is-expanded"), true);
     });
@@ -416,5 +421,23 @@ componentTest('supports keyboard events', {
     andThen(() => {
       assert.equal(find(".select-box").hasClass("is-expanded"), false, "it collapses the select box");
     });
+
+    click(".select-box-header");
+    andThen(() => {
+      assert.equal(find(".select-box").hasClass("is-expanded"), true);
+    });
+
+    fillIn(".filter-query", "regis");
+    triggerEvent('.filter-query', 'keyup');
+    andThen(() => {
+      assert.equal(find(".select-box-row.is-highlighted").attr("title"), "regis", "it highlights the first result");
+    });
+
+    andThen(() => tabEvent() );
+
+    andThen(() => {
+      assert.equal(find(".select-box-row.is-selected").attr("title"), "regis", "it selects the row when pressing tab");
+      assert.equal(find(".select-box").hasClass("is-expanded"), false, "it collapses the select box when selecting a row");
+    });
   }
 });