FIX: display keyboard on mobile when focusing mini-tag-chooser

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) {

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",
+});

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);
   },

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() {

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"}}

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;
       }