FIX: multiple select-kit fixes on mobile

app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6

@@ -22,7 +22,7 @@ export default ComboBox.extend(Tags, {
   fullWidthOnMobile: true,
 
   init() {
-    this._super();
+    this._super(...arguments);
 
     this.set("termMatchesForbidden", false);
     this.selectionSelector = ".selected-tag";
@@ -45,6 +45,27 @@ export default ComboBox.extend(Tags, {
     );
   },
 
+  willDestroyElement() {
+    this._super(...arguments);
+
+    $(".selected-name").off("touchend.select-kit pointerup.select-kit");
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    $(".selected-name").on(
+      "touchend.select-kit pointerup.select-kit",
+      event => {
+        if (!this.get("isExpanded")) {
+          this.expand(event);
+        }
+
+        this.focusFilterOrHeader();
+      }
+    );
+  },
+
   @computed("hasReachedMaximum")
   caretIcon(hasReachedMaximum) {
     return hasReachedMaximum ? null : "plus fa-fw";

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

@@ -92,17 +92,6 @@ export default Ember.Component.extend(
       this.set("computedContent", []);
       this.set("highlightedSelection", []);
 
-      if (this.site && this.site.isMobileDevice) {
-        this.setProperties({
-          filterable: isNone(this.get("filterable"))
-            ? false
-            : this.get("filterable"),
-          autoFilterable: isNone(this.get("autoFilterable"))
-            ? false
-            : this.get("filterable")
-        });
-      }
-
       if (this.get("nameChanges")) {
         this.addObserver(
           `content.@each.${this.get("nameProperty")}`,
@@ -458,7 +447,7 @@ export default Ember.Component.extend(
 
     clearSelection() {
       this.deselect(this.get("selection"));
-      this.focus();
+      this.focusFilterOrHeader();
     },
 
     actions: {

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

@@ -82,9 +82,7 @@ export default Ember.Mixin.create({
   },
 
   focus() {
-    Ember.run.schedule("afterRender", () => {
+    this.focusFilterOrHeader();
-      this.$header().focus();
-    });
   },
 
   // try to focus filter and fallback to header if not present
@@ -93,12 +91,12 @@ export default Ember.Mixin.create({
     // next so we are sure it finised expand/collapse
     Ember.run.next(() => {
       Ember.run.schedule("afterRender", () => {
-        if (
+        if (!context.$filterInput() || !context.$filterInput().is(":visible")) {
-          (this.site && this.site.isMobileDevice) ||
+          if (context.$header()) {
-          !context.$filterInput() ||
+            context.$header().focus();
-          !context.$filterInput().is(":visible")
+          } else {
-        ) {
+            $(context.element).focus();
-          context.$header().focus();
+          }
         } else {
           context.$filterInput().focus();
         }

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

@@ -16,11 +16,11 @@ export default Ember.Mixin.create({
   },
 
   willDestroyElement() {
-    this._super();
+    this._super(...arguments);
 
     $(document).off("mousedown.select-kit");
 
-    if (this.$header()) {
+    if (this.$header().length) {
       this.$header()
         .off("blur.select-kit")
         .off("focus.select-kit")
@@ -28,16 +28,17 @@ export default Ember.Mixin.create({
         .off("keydown.select-kit");
     }
 
-    if (this.$filterInput()) {
+    if (this.$filterInput().length) {
       this.$filterInput()
         .off("change.select-kit")
         .off("keydown.select-kit")
-        .off("keypress.select-kit");
+        .off("keypress.select-kit")
+        .off("focusout.select-kit");
     }
   },
 
   didInsertElement() {
-    this._super();
+    this._super(...arguments);
 
     $(document).on("mousedown.select-kit", event => {
       if (!this.element || this.isDestroying || this.isDestroyed) {
@@ -120,6 +121,11 @@ export default Ember.Mixin.create({
       .on("keypress.select-kit", event => {
         event.stopPropagation();
       })
+      .on("focusout.select-kit", event => {
+        if (!Ember.$.contains(this.element, event.relatedTarget)) {
+          this.close(event);
+        }
+      })
       .on("keydown.select-kit", event => {
         const keyCode = event.keyCode || event.which;
 

app/assets/stylesheets/common/select-kit/future-date-input-selector.scss

@@ -11,11 +11,16 @@
 
       .future-date-input-selector-datetime {
         color: lighten($primary, 40%);
-        font-size: $font-down-1;
+        margin-left: 5px;
       }
 
       .future-date-input-selector-icons {
-        width: 25px;
+        margin-right: 5px;
+      }
+
+      .btn-clear {
+        padding: 0;
+        margin-left: 5px;
       }
 
       .future-date-input-selector-row {

app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss

@@ -58,14 +58,16 @@
       .select-kit-collection {
         .collection-header {
           max-height: 125px;
-          overflow-y: auto;
+          overflow: hidden;
           flex: 1 0 auto;
+          border-bottom: 1px solid $primary-low;
 
           .selected-tags {
             display: flex;
-            padding: 4px 8px;
+            padding: 4px;
             flex-wrap: wrap;
-            border-bottom: 1px solid $primary-low;
+            margin: -2px;
+            overflow: hidden;
           }
 
           .selected-tag {

app/assets/stylesheets/common/select-kit/multi-select.scss

@@ -64,9 +64,9 @@
     }
 
     .choices {
-      margin: 0;
+      margin: 1px;
       box-sizing: border-box;
-      display: inline-flex;
+      display: flex;
       justify-content: flex-start;
       flex-wrap: wrap;
 
@@ -79,7 +79,7 @@
         justify-content: space-between;
         flex-wrap: wrap;
         flex-direction: row;
-        margin: 2px;
+        margin: 1px;
       }
 
       .filter {

app/assets/stylesheets/mobile/select-kit/dropdown-select-box.scss

@@ -2,7 +2,7 @@
   &.dropdown-select-box {
     .select-kit-collection {
       max-height: 200px;
-      overflow-y: scroll;
+      overflow-y: auto;
     }
   }
 }