From 7f9220a2cd4551e4ae2ca385b7b5622689f541f2 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 11 Sep 2017 00:38:32 +0200
Subject: [PATCH] minor select-box fixes

- select row when using tab
- makes sure tab order is correct
- highlight first row when filtering
---
 .../discourse/components/select-box.js.es6    | 24 ++++++++++-------
 .../templates/components/select-box.hbs       |  1 +
 .../select-box/select-box-filter.hbs          |  2 +-
 .../components/select-box-test.js.es6         | 27 +++++++++++++++++--
 4 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/select-box.js.es6 b/app/assets/javascripts/discourse/components/select-box.js.es6
index 07915ea3871..8d6f308a8c3 100644
--- a/app/assets/javascripts/discourse/components/select-box.js.es6
+++ b/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;
diff --git a/app/assets/javascripts/discourse/templates/components/select-box.hbs b/app/assets/javascripts/discourse/templates/components/select-box.hbs
index e596b1682fc..37ba7b460dd 100644
--- a/app/assets/javascripts/discourse/templates/components/select-box.hbs
+++ b/app/assets/javascripts/discourse/templates/components/select-box.hbs
@@ -26,6 +26,7 @@
         icon=filterIcon
         focused=filterFocused
         placeholder=filterPlaceholder
+        tabindex=tabindex
       }}
     {{/if}}
 
diff --git a/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs b/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs
index 3ba9d155040..c9a06c3fc5e 100644
--- a/app/assets/javascripts/discourse/templates/components/select-box/select-box-filter.hbs
+++ b/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
diff --git a/test/javascripts/components/select-box-test.js.es6 b/test/javascripts/components/select-box-test.js.es6
index 3aec9521568..ebc9fcfb2e4 100644
--- a/test/javascripts/components/select-box-test.js.es6
+++ b/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");
+    });
   }
 });