From 057fa049e674b4a0b222e51578511abe30b3ebfa Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 5 Mar 2018 10:55:20 +0100
Subject: [PATCH] FIX: display keyboard on mobile when focusing
 mini-tag-chooser

---
 .../select-kit/components/mini-tag-chooser.js.es6   |  7 +++++++
 .../mini-tag-chooser/mini-tag-chooser-header.js.es6 |  6 ++++++
 .../select-kit/components/multi-select.js.es6       |  4 ++--
 .../select-kit/mixins/dom-helpers.js.es6            | 13 ++++---------
 .../mini-tag-chooser/mini-tag-chooser-header.hbs    |  1 +
 .../common/select-kit/mini-tag-chooser.scss         | 10 ++++++++++
 6 files changed, 30 insertions(+), 11 deletions(-)
 create mode 100644 app/assets/javascripts/select-kit/components/mini-tag-chooser/mini-tag-chooser-header.js.es6
 create mode 100644 app/assets/javascripts/select-kit/templates/components/mini-tag-chooser/mini-tag-chooser-header.hbs

diff --git a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6 b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
index 5478097d75f..23113a0a8fa 100644
--- a/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
+++ b/app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6
@@ -6,6 +6,7 @@ const { get, isEmpty, run, makeArray } = Ember;
 
 export default ComboBox.extend(Tags, {
   allowContentReplacement: true,
+  headerComponent: "mini-tag-chooser/mini-tag-chooser-header",
   pluginApiIdentifiers: ["mini-tag-chooser"],
   attributeBindings: ["categoryId"],
   classNames: ["mini-tag-chooser"],
@@ -65,12 +66,18 @@ export default ComboBox.extend(Tags, {
       event.stopImmediatePropagation();
       this.send("removeTag", $(event.target).attr("data-value"));
     });
+
+    $(".select-kit-header").on("focus.mini-tag-chooser", ".selected-name", (event) => {
+      event.stopImmediatePropagation();
+      this.focus(event);
+    });
   },
 
   willDestroyElement() {
     this._super();
 
     $(".select-kit-body").off("click.mini-tag-chooser");
+    $(".select-kit-header").off("focus.mini-tag-chooser");
   },
 
   didPressEscape(event) {
diff --git a/app/assets/javascripts/select-kit/components/mini-tag-chooser/mini-tag-chooser-header.js.es6 b/app/assets/javascripts/select-kit/components/mini-tag-chooser/mini-tag-chooser-header.js.es6
new file mode 100644
index 00000000000..1efc5095a1d
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/mini-tag-chooser/mini-tag-chooser-header.js.es6
@@ -0,0 +1,6 @@
+import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
+
+export default SelectKitHeaderComponent.extend({
+  layoutName: "select-kit/templates/components/mini-tag-chooser/mini-tag-chooser-header",
+  classNames: "mini-tag-chooser-header",
+});
diff --git a/app/assets/javascripts/select-kit/components/multi-select.js.es6 b/app/assets/javascripts/select-kit/components/multi-select.js.es6
index b74b371c59c..da21f55b07f 100644
--- a/app/assets/javascripts/select-kit/components/multi-select.js.es6
+++ b/app/assets/javascripts/select-kit/components/multi-select.js.es6
@@ -260,7 +260,7 @@ export default SelectKitComponent.extend({
   },
 
   didSelect() {
-    this.focusFilterOrHeader();
+    this.focus();
     this.autoHighlight();
 
     applyOnSelectPluginApiCallbacks(
@@ -278,7 +278,7 @@ export default SelectKitComponent.extend({
   },
 
   didDeselect(rowComputedContentItems) {
-    this.focusFilterOrHeader();
+    this.focus();
     this.autoHighlight();
     this._boundaryActionHandler("onDeselect", rowComputedContentItems);
   },
diff --git a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
index 48503dcc537..b867011f359 100644
--- a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
+++ b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
@@ -58,15 +58,10 @@ export default Ember.Mixin.create({
     this.setProperties({ isFocused: false });
   },
 
-  // force the component in a known default state
-  focus() {
-    Ember.run.schedule("afterRender", () => this.$header().focus());
-  },
-
   // try to focus filter and fallback to header if not present
-  focusFilterOrHeader() {
+  focus() {
     Ember.run.schedule("afterRender", () => {
-      if ((this.site && this.site.isMobileDevice) || !this.$filterInput().is(":visible")) {
+      if ((!this.get("filterable")) || !this.$filterInput().is(":visible")) {
         this.$header().focus();
       } else {
         this.$filterInput().focus();
@@ -77,10 +72,10 @@ export default Ember.Mixin.create({
   expand() {
     if (this.get("isExpanded") === true) return;
     this.setProperties({ isExpanded: true, renderedBodyOnce: true, isFocused: true });
-    this.focusFilterOrHeader();
-    this.autoHighlight();
     this._setCollectionHeaderComputedContent();
     this._setHeaderComputedContent();
+    this.focus();
+    this.autoHighlight();
   },
 
   collapse() {
diff --git a/app/assets/javascripts/select-kit/templates/components/mini-tag-chooser/mini-tag-chooser-header.hbs b/app/assets/javascripts/select-kit/templates/components/mini-tag-chooser/mini-tag-chooser-header.hbs
new file mode 100644
index 00000000000..09799d3d576
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/mini-tag-chooser/mini-tag-chooser-header.hbs
@@ -0,0 +1 @@
+{{input class="selected-name" value=label readonly="readonly"}}
diff --git a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
index 27c8f44fc9e..36d9509bdc5 100644
--- a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
@@ -23,6 +23,16 @@
         box-shadow: shadow("focus")
       }
 
+      .select-kit-header {
+        .selected-name {
+          margin: 0;
+          border: 0;
+          padding: 0;
+          outline: none;
+          box-shadow: none;
+        }
+      }
+
       .select-kit-filter {
         border-top: 0;
       }