diff --git a/app/assets/javascripts/admin/components/penalty-post-action.js.es6 b/app/assets/javascripts/admin/components/penalty-post-action.js.es6
index 6a703105fbf..09f267390ca 100644
--- a/app/assets/javascripts/admin/components/penalty-post-action.js.es6
+++ b/app/assets/javascripts/admin/components/penalty-post-action.js.es6
@@ -21,13 +21,11 @@ export default Component.extend({
 
   actions: {
     penaltyChanged() {
-      let postAction = this.postAction;
-
       // If we switch to edit mode, jump to the edit textarea
-      if (postAction === "edit") {
+      if (this.postAction === "edit") {
         scheduleOnce("afterRender", () => {
-          let elem = this.element;
-          let body = elem.closest(".modal-body");
+          const elem = this.element;
+          const body = elem.closest(".modal-body");
           body.scrollTop(body.height());
           elem.querySelector(".post-editor").focus();
         });
diff --git a/app/assets/javascripts/admin/components/permalink-form.js.es6 b/app/assets/javascripts/admin/components/permalink-form.js.es6
index 34d222d30f6..e1b62a11df6 100644
--- a/app/assets/javascripts/admin/components/permalink-form.js.es6
+++ b/app/assets/javascripts/admin/components/permalink-form.js.es6
@@ -20,6 +20,19 @@ export default Component.extend({
     ];
   },
 
+  didInsertElement() {
+    this._super(...arguments);
+
+    schedule("afterRender", () => {
+      $(this.element.querySelector(".external-url")).keydown(e => {
+        // enter key
+        if (e.keyCode === 13) {
+          this.send("submit");
+        }
+      });
+    });
+  },
+
   focusPermalink() {
     schedule("afterRender", () =>
       this.element.querySelector(".permalink-url").focus()
@@ -64,19 +77,10 @@ export default Component.extend({
             }
           );
       }
+    },
+
+    onChangePermalinkType(type) {
+      this.set("permalinkType", type);
     }
-  },
-
-  didInsertElement() {
-    this._super(...arguments);
-
-    schedule("afterRender", () => {
-      $(this.element.querySelector(".external-url")).keydown(e => {
-        // enter key
-        if (e.keyCode === 13) {
-          this.send("submit");
-        }
-      });
-    });
   }
 });
diff --git a/app/assets/javascripts/admin/components/site-settings/category-list.js.es6 b/app/assets/javascripts/admin/components/site-settings/category-list.js.es6
index ff83e13e520..24e9bb23b96 100644
--- a/app/assets/javascripts/admin/components/site-settings/category-list.js.es6
+++ b/app/assets/javascripts/admin/components/site-settings/category-list.js.es6
@@ -1,16 +1,15 @@
-import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import Category from "discourse/models/category";
+import { computed } from "@ember/object";
 
 export default Component.extend({
-  @discourseComputed("value")
-  selectedCategories: {
-    get(value) {
-      return Category.findByIds(value.split("|"));
-    },
-    set(value) {
-      this.set("value", value.mapBy("id").join("|"));
-      return value;
+  selectedCategories: computed("value", function() {
+    return Category.findByIds(this.value.split("|").filter(Boolean));
+  }),
+
+  actions: {
+    onChangeSelectedCategories(value) {
+      this.set("value", (value || []).mapBy("id").join("|"));
     }
   }
 });
diff --git a/app/assets/javascripts/admin/components/site-settings/compact-list.js.es6 b/app/assets/javascripts/admin/components/site-settings/compact-list.js.es6
new file mode 100644
index 00000000000..f68e78b5722
--- /dev/null
+++ b/app/assets/javascripts/admin/components/site-settings/compact-list.js.es6
@@ -0,0 +1,43 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { makeArray } from "discourse-common/lib/helpers";
+
+export default Component.extend({
+  tokenSeparator: "|",
+
+  createdChoices: null,
+
+  settingValue: computed("value", function() {
+    return this.value
+      .toString()
+      .split(this.tokenSeparator)
+      .filter(Boolean);
+  }),
+
+  settingChoices: computed(
+    "settingValue",
+    "setting.choices.[]",
+    "createdChoices.[]",
+    function() {
+      return [
+        ...new Set([
+          ...makeArray(this.settingValue),
+          ...makeArray(this.setting.choices),
+          ...makeArray(this.createdChoices)
+        ])
+      ];
+    }
+  ),
+
+  actions: {
+    onChangeListSetting(value) {
+      this.set("value", value.join(this.tokenSeparator));
+    },
+
+    onChangeChoices(choices) {
+      this.set("createdChoices", [
+        ...new Set([...makeArray(this.createdChoices), ...makeArray(choices)])
+      ]);
+    }
+  }
+});
diff --git a/app/assets/javascripts/admin/components/site-settings/group-list.js.es6 b/app/assets/javascripts/admin/components/site-settings/group-list.js.es6
index 97736c36ca1..41dcdbcb4d5 100644
--- a/app/assets/javascripts/admin/components/site-settings/group-list.js.es6
+++ b/app/assets/javascripts/admin/components/site-settings/group-list.js.es6
@@ -1,11 +1,25 @@
-import discourseComputed from "discourse-common/utils/decorators";
+import { computed } from "@ember/object";
 import Component from "@ember/component";
 
 export default Component.extend({
-  @discourseComputed()
-  groupChoices() {
-    return this.site.get("groups").map(g => {
+  tokenSeparator: "|",
+
+  nameProperty: "name",
+  valueProperty: "id",
+
+  groupChoices: computed("site.groups", function() {
+    return (this.site.groups || []).map(g => {
       return { name: g.name, id: g.id.toString() };
     });
+  }),
+
+  settingValue: computed("value", function() {
+    return (this.value || "").split(this.tokenSeparator).filter(Boolean);
+  }),
+
+  actions: {
+    onChangeGroupListSetting(value) {
+      this.set("value", value.join(this.tokenSeparator));
+    }
   }
 });
diff --git a/app/assets/javascripts/admin/components/value-list.js.es6 b/app/assets/javascripts/admin/components/value-list.js.es6
index 6582f20e7f3..99f1cc00d44 100644
--- a/app/assets/javascripts/admin/components/value-list.js.es6
+++ b/app/assets/javascripts/admin/components/value-list.js.es6
@@ -1,20 +1,18 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import { makeArray } from "discourse-common/lib/helpers";
-import { empty, alias } from "@ember/object/computed";
+import { empty, reads } from "@ember/object/computed";
 import Component from "@ember/component";
 import { on } from "discourse-common/utils/decorators";
 
 export default Component.extend({
   classNameBindings: [":value-list"],
-
   inputInvalid: empty("newValue"),
-
   inputDelimiter: null,
   inputType: null,
   newValue: "",
   collection: null,
   values: null,
-  noneKey: alias("addKey"),
+  noneKey: reads("addKey"),
 
   @on("didReceiveAttrs")
   _setupCollection() {
@@ -47,7 +45,7 @@ export default Component.extend({
     addValue(newValue) {
       if (this.inputInvalid) return;
 
-      this.set("newValue", "");
+      this.set("newValue", null);
       this._addValue(newValue);
     },
 
@@ -62,12 +60,26 @@ export default Component.extend({
 
   _addValue(value) {
     this.collection.addObject(value);
+
+    if (this.choices) {
+      this.set("choices", this.choices.rejectBy("id", value));
+    } else {
+      this.set("choices", []);
+    }
+
     this._saveValues();
   },
 
   _removeValue(value) {
-    const collection = this.collection;
-    collection.removeObject(value);
+    this.collection.removeObject(value);
+
+    const item = { id: value, name: value };
+    if (this.choices) {
+      this.choices.addObject(item);
+    } else {
+      this.set("choices", makeArray(item));
+    }
+
     this._saveValues();
   },
 
diff --git a/app/assets/javascripts/admin/controllers/admin-badges-show.js.es6 b/app/assets/javascripts/admin/controllers/admin-badges-show.js.es6
index 140353e1435..411f50534aa 100644
--- a/app/assets/javascripts/admin/controllers/admin-badges-show.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-badges-show.js.es6
@@ -1,5 +1,5 @@
 import discourseComputed, { observes } from "discourse-common/utils/decorators";
-import { alias } from "@ember/object/computed";
+import { reads } from "@ember/object/computed";
 import { inject } from "@ember/controller";
 import Controller from "@ember/controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
@@ -10,15 +10,37 @@ export default Controller.extend(bufferedProperty("model"), {
   adminBadges: inject(),
   saving: false,
   savingStatus: "",
-
-  badgeTypes: alias("adminBadges.badgeTypes"),
-  badgeGroupings: alias("adminBadges.badgeGroupings"),
-  badgeTriggers: alias("adminBadges.badgeTriggers"),
-  protectedSystemFields: alias("adminBadges.protectedSystemFields"),
-
-  readOnly: alias("buffered.system"),
+  badgeTypes: reads("adminBadges.badgeTypes"),
+  badgeGroupings: reads("adminBadges.badgeGroupings"),
+  badgeTriggers: reads("adminBadges.badgeTriggers"),
+  protectedSystemFields: reads("adminBadges.protectedSystemFields"),
+  readOnly: reads("buffered.system"),
   showDisplayName: propertyNotEqual("name", "displayName"),
 
+  init() {
+    this._super(...arguments);
+
+    // this is needed because the model doesnt have default values
+    // and as we are using a bufferedProperty it's not accessible
+    // in any other way
+    Ember.run.next(() => {
+      if (!this.model.badge_type_id) {
+        this.model.set("badge_type_id", this.get("badgeTypes.firstObject.id"));
+      }
+
+      if (!this.model.badge_grouping_id) {
+        this.model.set(
+          "badge_grouping_id",
+          this.get("badgeGroupings.firstObject.id")
+        );
+      }
+
+      if (!this.model.trigger) {
+        this.model.set("trigger", this.get("badgeTriggers.firstObject.id"));
+      }
+    });
+  },
+
   @discourseComputed("model.query", "buffered.query")
   hasQuery(modelQuery, bufferedQuery) {
     if (bufferedQuery) {
diff --git a/app/assets/javascripts/admin/controllers/admin-user-index.js.es6 b/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
index 51d53509adb..0460c314c75 100644
--- a/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
+++ b/app/assets/javascripts/admin/controllers/admin-user-index.js.es6
@@ -278,7 +278,7 @@ export default Controller.extend(CanCheckEmails, {
     },
 
     resetCustomGroups() {
-      this.set("customGroupIdsBuffer", null);
+      this.set("customGroupIdsBuffer", this.model.customGroups.mapBy("id"));
     },
 
     savePrimaryGroup() {
diff --git a/app/assets/javascripts/admin/controllers/modals/admin-color-scheme-select-base.js.es6 b/app/assets/javascripts/admin/controllers/modals/admin-color-scheme-select-base.js.es6
index ea64338a83f..e0b7bfe7e6e 100644
--- a/app/assets/javascripts/admin/controllers/modals/admin-color-scheme-select-base.js.es6
+++ b/app/assets/javascripts/admin/controllers/modals/admin-color-scheme-select-base.js.es6
@@ -5,6 +5,17 @@ import ModalFunctionality from "discourse/mixins/modal-functionality";
 export default Controller.extend(ModalFunctionality, {
   adminCustomizeColors: inject(),
 
+  selectedBaseThemeId: null,
+
+  init() {
+    this._super(...arguments);
+
+    const defaultScheme = this.get(
+      "adminCustomizeColors.baseColorSchemes.0.base_scheme_id"
+    );
+    this.set("selectedBaseThemeId", defaultScheme);
+  },
+
   actions: {
     selectBase() {
       this.adminCustomizeColors.send(
diff --git a/app/assets/javascripts/admin/routes/admin-user-index.js.es6 b/app/assets/javascripts/admin/routes/admin-user-index.js.es6
index 51af9f2d2e8..a0aeadd590d 100644
--- a/app/assets/javascripts/admin/routes/admin-user-index.js.es6
+++ b/app/assets/javascripts/admin/routes/admin-user-index.js.es6
@@ -19,7 +19,7 @@ export default DiscourseRoute.extend({
     controller.setProperties({
       originalPrimaryGroupId: model.primary_group_id,
       availableGroups: this._availableGroups,
-      customGroupIdsBuffer: null,
+      customGroupIdsBuffer: model.customGroups.mapBy("id"),
       model
     });
   }
diff --git a/app/assets/javascripts/admin/templates/api-keys-new.hbs b/app/assets/javascripts/admin/templates/api-keys-new.hbs
index 4ddc37befd4..aea83704d38 100644
--- a/app/assets/javascripts/admin/templates/api-keys-new.hbs
+++ b/app/assets/javascripts/admin/templates/api-keys-new.hbs
@@ -20,7 +20,7 @@
     {{/admin-form-row}}
 
     {{#admin-form-row label="admin.api.user_mode"}}
-      {{combo-box content=userModes value=userMode onSelect=(action "changeUserMode")}}
+      {{combo-box content=userModes value=userMode onChange=(action "changeUserMode")}}
     {{/admin-form-row}}
 
     {{#if showUserSelector}}
@@ -28,11 +28,11 @@
         {{user-selector single="true"
           usernames=model.username
           placeholderKey="admin.api.user_placeholder"
-          }}  
+          }}
       {{/admin-form-row}}
     {{/if}}
     {{#admin-form-row}}
       {{d-button icon="check" label="admin.api.save" action=(action "save") class="btn-primary"}}
     {{/admin-form-row}}
   {{/if}}
-</div>
\ No newline at end of file
+</div>
diff --git a/app/assets/javascripts/admin/templates/badges-show.hbs b/app/assets/javascripts/admin/templates/badges-show.hbs
index 7a50b1084bf..72147c85408 100644
--- a/app/assets/javascripts/admin/templates/badges-show.hbs
+++ b/app/assets/javascripts/admin/templates/badges-show.hbs
@@ -23,30 +23,35 @@
 
     <div>
       <label for="badge_type_id">{{i18n 'admin.badges.badge_type'}}</label>
-      {{combo-box name="badge_type_id"
-                  value=buffered.badge_type_id
-                  content=badgeTypes
-                  allowInitialValueMutation=true
-                  isDisabled=readOnly}}
+      {{combo-box
+        name="badge_type_id"
+        value=buffered.badge_type_id
+        content=badgeTypes
+        onChange=(action (mut buffered.badge_type_id))
+        isDisabled=readOnly
+      }}
     </div>
 
     <div>
       <label for="badge_grouping_id">{{i18n 'admin.badges.badge_grouping'}}</label>
 
       <div class="badge-grouping-control">
-        {{combo-box name="badge_grouping_id"
+        {{combo-box
+          name="badge_grouping_id"
           value=buffered.badge_grouping_id
           content=badgeGroupings
           class="badge-selector"
-          nameProperty="name"}}
+          nameProperty="name"
+          onChange=(action (mut buffered.badge_grouping_id))
+        }}
         {{d-button
           class="btn-default"
           action=(route-action "editGroupings")
           icon="pencil-alt"}}
+        }}
       </div>
     </div>
 
-
     <div>
       <label for="description">{{i18n 'admin.badges.description'}}</label>
       {{#if buffered.system}}
@@ -95,12 +100,13 @@
 
         <div>
           <label for="trigger">{{i18n 'admin.badges.trigger'}}</label>
-          {{combo-box name="trigger"
-                      value=buffered.trigger
-                      content=badgeTriggers
-                      optionValuePath="content.id"
-                      optionLabelPath="content.name"
-                      disabled=readOnly}}
+          {{combo-box
+            name="trigger"
+            value=buffered.trigger
+            content=badgeTriggers
+            onChange=(action (mut buffered.trigger))
+            disabled=readOnly
+          }}
         </div>
       {{/if}}
     {{/if}}
diff --git a/app/assets/javascripts/admin/templates/components/admin-report.hbs b/app/assets/javascripts/admin/templates/components/admin-report.hbs
index bdc3b5b12a7..f8a36fa7d3c 100644
--- a/app/assets/javascripts/admin/templates/components/admin-report.hbs
+++ b/app/assets/javascripts/admin/templates/components/admin-report.hbs
@@ -130,7 +130,10 @@
             </span>
 
             <div class="input">
-              {{date-input date=startDate onChange=(action "onChangeStartDate")}}
+              {{date-input
+                date=startDate
+                onChange=(action "onChangeStartDate")
+              }}
             </div>
           </div>
 
@@ -140,7 +143,10 @@
             </span>
 
             <div class="input">
-              {{date-input date=endDate onChange=(action "onChangeEndDate")}}
+              {{date-input
+                date=endDate
+                onChange=(action "onChangeEndDate")
+              }}
             </div>
           </div>
         {{/if}}
diff --git a/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs b/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
index a23d21f6e97..68b1810a8ce 100644
--- a/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
+++ b/app/assets/javascripts/admin/templates/components/admin-user-field-item.hbs
@@ -1,6 +1,10 @@
 {{#if editing}}
   {{#admin-form-row label="admin.user_fields.type"}}
-    {{combo-box content=fieldTypes value=buffered.field_type}}
+    {{combo-box
+      content=fieldTypes
+      value=buffered.field_type
+      onChange=(action (mut buffered.field_type))
+    }}
   {{/admin-form-row}}
 
   {{#admin-form-row label="admin.user_fields.name"}}
diff --git a/app/assets/javascripts/admin/templates/components/embeddable-host.hbs b/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
index 559544abcef..b7833d621d3 100644
--- a/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
+++ b/app/assets/javascripts/admin/templates/components/embeddable-host.hbs
@@ -13,7 +13,11 @@
   </td>
   <td class="editing-input">
     <div class="label">{{i18n "admin.embedding.category"}}</div>
-    {{category-chooser value=categoryId class="small"}}
+    {{category-chooser
+      value=categoryId
+      class="small"
+      onChange=(action (mut categoryId))
+    }}
   </td>
   <td class="editing-controls">
     {{d-button icon="check" action=(action "save") class="btn-primary" disabled=cantSave}}
diff --git a/app/assets/javascripts/admin/templates/components/penalty-post-action.hbs b/app/assets/javascripts/admin/templates/components/penalty-post-action.hbs
index 1c8ffe56d8e..1a672329cd2 100644
--- a/app/assets/javascripts/admin/templates/components/penalty-post-action.hbs
+++ b/app/assets/javascripts/admin/templates/components/penalty-post-action.hbs
@@ -4,7 +4,11 @@
       {{{i18n 'admin.user.penalty_post_actions'}}}
     </div>
   </label>
-  {{combo-box value=postAction content=penaltyActions onSelect=(action "penaltyChanged")}}
+  {{combo-box
+    value=postAction
+    content=penaltyActions
+    onChange=(action "penaltyChanged")
+  }}
 </div>
 
 {{#if editing}}
diff --git a/app/assets/javascripts/admin/templates/components/permalink-form.hbs b/app/assets/javascripts/admin/templates/components/permalink-form.hbs
index 8efdbbf581a..1f5d1c06f21 100644
--- a/app/assets/javascripts/admin/templates/components/permalink-form.hbs
+++ b/app/assets/javascripts/admin/templates/components/permalink-form.hbs
@@ -8,7 +8,11 @@
   autocorrect="off"
   autocapitalize="off"}}
 
-{{combo-box content=permalinkTypes value=permalinkType}}
+{{combo-box
+  content=permalinkTypes
+  value=permalinkType
+  onChange=(action (mut permalinkType))
+}}
 
 {{text-field
   value=permalink_type_value
diff --git a/app/assets/javascripts/admin/templates/components/report-filters/category.hbs b/app/assets/javascripts/admin/templates/components/report-filters/category.hbs
index 94aa60f7d05..62de5e0bed0 100644
--- a/app/assets/javascripts/admin/templates/components/report-filters/category.hbs
+++ b/app/assets/javascripts/admin/templates/components/report-filters/category.hbs
@@ -1,7 +1,5 @@
 {{search-advanced-category-chooser
   filterable=true
   value=category
-  castInteger=true
-  onSelectNone=(action "onChange")
-  onDeselect=(action "onDeselect")
-  onSelect=(action "onChange")}}
+  onChange=(action (mut category))
+}}
diff --git a/app/assets/javascripts/admin/templates/components/report-filters/file-extension.hbs b/app/assets/javascripts/admin/templates/components/report-filters/file-extension.hbs
index 871179d63d6..88d71d0747e 100644
--- a/app/assets/javascripts/admin/templates/components/report-filters/file-extension.hbs
+++ b/app/assets/javascripts/admin/templates/components/report-filters/file-extension.hbs
@@ -4,5 +4,5 @@
   allowAny=filter.allow_any
   value=filter.default
   none="admin.dashboard.report_filter_any"
-  onSelectNone=(action "onChange")
-  onSelect=(action "onChange")}}
+  onChange=(action "onChange")
+}}
diff --git a/app/assets/javascripts/admin/templates/components/report-filters/group.hbs b/app/assets/javascripts/admin/templates/components/report-filters/group.hbs
index 0209c1cb6e8..9e17bda2ac3 100644
--- a/app/assets/javascripts/admin/templates/components/report-filters/group.hbs
+++ b/app/assets/javascripts/admin/templates/components/report-filters/group.hbs
@@ -1,10 +1,9 @@
 {{combo-box
-  castInteger=true
   filterable=true
-  valueAttribute="value"
+  valueProperty="value"
   content=groupOptions
   value=groupId
   allowAny=filter.allow_any
   none="admin.dashboard.reports.groups"
-  onSelectNone=(action "onChange")
-  onSelect=(action "onChange")}}
+  onChange=(action "onChange")
+}}
diff --git a/app/assets/javascripts/admin/templates/components/screened-ip-address-form.hbs b/app/assets/javascripts/admin/templates/components/screened-ip-address-form.hbs
index 6bc99fdbd11..2be732079ea 100644
--- a/app/assets/javascripts/admin/templates/components/screened-ip-address-form.hbs
+++ b/app/assets/javascripts/admin/templates/components/screened-ip-address-form.hbs
@@ -1,4 +1,10 @@
 <b>{{i18n 'admin.logs.screened_ips.form.label'}}</b>
 {{text-field value=ip_address disabled=formSubmitted class="ip-address-input" placeholderKey="admin.logs.screened_ips.form.ip_address" autocorrect="off" autocapitalize="off"}}
-{{combo-box content=actionNames value=actionName}}
+
+{{combo-box
+  content=actionNames
+  value=actionName
+  onChange=(action (mut actionName))
+}}
+
 {{d-button class="btn-default" action=(action "submit") disabled=formSubmitted label="admin.logs.screened_ips.form.add"}}
diff --git a/app/assets/javascripts/admin/templates/components/site-settings/category-list.hbs b/app/assets/javascripts/admin/templates/components/site-settings/category-list.hbs
index 0aadec18d81..14d7210604c 100644
--- a/app/assets/javascripts/admin/templates/components/site-settings/category-list.hbs
+++ b/app/assets/javascripts/admin/templates/components/site-settings/category-list.hbs
@@ -1,3 +1,7 @@
-{{category-selector categories=selectedCategories}}
+{{category-selector
+  categories=selectedCategories
+  onChange=(action "onChangeSelectedCategories")
+}}
+
 <div class='desc'>{{{unbound setting.description}}}</div>
 {{setting-validation-message message=validationMessage}}
diff --git a/app/assets/javascripts/admin/templates/components/site-settings/category.hbs b/app/assets/javascripts/admin/templates/components/site-settings/category.hbs
index e3ab41137c1..d6b6bee5658 100644
--- a/app/assets/javascripts/admin/templates/components/site-settings/category.hbs
+++ b/app/assets/javascripts/admin/templates/components/site-settings/category.hbs
@@ -1,3 +1,7 @@
-{{category-chooser value=value allowUncategorized="true"}}
+{{category-chooser
+  value=value
+  allowUncategorized=true
+  onChange=(action (mut value))
+}}
 {{setting-validation-message message=validationMessage}}
 <div class='desc'>{{{unbound setting.description}}}</div>
diff --git a/app/assets/javascripts/admin/templates/components/site-settings/compact-list.hbs b/app/assets/javascripts/admin/templates/components/site-settings/compact-list.hbs
index 551ca3d45d3..86fce97f15e 100644
--- a/app/assets/javascripts/admin/templates/components/site-settings/compact-list.hbs
+++ b/app/assets/javascripts/admin/templates/components/site-settings/compact-list.hbs
@@ -1,3 +1,11 @@
-{{list-setting settingValue=value choices=setting.choices settingName=setting.setting allowAny=allowAny}}
+{{list-setting
+  value=settingValue
+  settingName=setting.setting
+  allowAny=allowAny
+  choices=settingChoices
+  onChange=(action "onChangeListSetting")
+  onChangeChoices=(action "onChangeChoices")
+}}
+
 {{setting-validation-message message=validationMessage}}
 <div class='desc'>{{{unbound setting.description}}}</div>
diff --git a/app/assets/javascripts/admin/templates/components/site-settings/enum.hbs b/app/assets/javascripts/admin/templates/components/site-settings/enum.hbs
index 9b3da3178e3..2612679d723 100644
--- a/app/assets/javascripts/admin/templates/components/site-settings/enum.hbs
+++ b/app/assets/javascripts/admin/templates/components/site-settings/enum.hbs
@@ -1,4 +1,15 @@
-{{combo-box castInteger=true valueAttribute="value" content=setting.validValues value=value none=setting.allowsNone}}
+{{combo-box
+  valueProperty="value"
+  content=setting.validValues
+  value=value
+  onChange=(action (mut value))
+  allowAny=setting.allowsNone
+}}
+
 {{preview}}
+
 {{setting-validation-message message=validationMessage}}
-<div class='desc'>{{{unbound setting.description}}}</div>
+
+<div class='desc'>
+  {{{unbound setting.description}}}
+</div>
diff --git a/app/assets/javascripts/admin/templates/components/site-settings/group-list.hbs b/app/assets/javascripts/admin/templates/components/site-settings/group-list.hbs
index 005f14398ee..768311c3f96 100644
--- a/app/assets/javascripts/admin/templates/components/site-settings/group-list.hbs
+++ b/app/assets/javascripts/admin/templates/components/site-settings/group-list.hbs
@@ -1,3 +1,10 @@
-{{list-setting settingValue=value choices=groupChoices settingName='name'}}
+{{list-setting
+  value=settingValue
+  choices=groupChoices
+  settingName="name"
+  nameProperty=nameProperty
+  valueProperty=valueProperty
+  onChange=(action "onChangeGroupListSetting")
+}}
 {{setting-validation-message message=validationMessage}}
 <div class='desc'>{{{unbound setting.description}}}</div>
diff --git a/app/assets/javascripts/admin/templates/components/value-list.hbs b/app/assets/javascripts/admin/templates/components/value-list.hbs
index 372de2ac1d1..a5ade53ee08 100644
--- a/app/assets/javascripts/admin/templates/components/value-list.hbs
+++ b/app/assets/javascripts/admin/templates/components/value-list.hbs
@@ -2,12 +2,19 @@
   <div class='values'>
     {{#each collection as |value index|}}
       <div class='value' data-index={{index}}>
-        {{d-button action=(action "removeValue")
-                   actionParam=value
-                   icon="times"
-                   class="btn-default remove-value-btn btn-small"}}
+        {{d-button
+          action=(action "removeValue")
+          actionParam=value
+          icon="times"
+          class="remove-value-btn btn-small"
+        }}
 
-        {{input title=value value=value class="value-input" focus-out=(action "changeValue" index)}}
+        {{input
+          title=value
+          value=value
+          class="value-input"
+          focus-out=(action "changeValue" index)
+        }}
       </div>
     {{/each}}
   </div>
@@ -15,7 +22,10 @@
 
 {{combo-box
   allowAny=true
-  allowContentReplacement=true
   none=noneKey
+  valueProperty=null
+  nameProperty=null
+  value=newValue
   content=filteredChoices
-  onSelect=(action "selectChoice")}}
+  onChange=(action "selectChoice")
+}}
diff --git a/app/assets/javascripts/admin/templates/customize-email-templates.hbs b/app/assets/javascripts/admin/templates/customize-email-templates.hbs
index d89624e477f..55434c9e463 100644
--- a/app/assets/javascripts/admin/templates/customize-email-templates.hbs
+++ b/app/assets/javascripts/admin/templates/customize-email-templates.hbs
@@ -1,8 +1,8 @@
 {{combo-box
   content=sortedTemplates
-  valueAttribute="id"
+  valueProperty="id"
   nameProperty="title"
-  onSelect=(action "selectTemplate")
+  onChange=(action "selectTemplate")
 }}
 
 {{outlet}}
diff --git a/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs b/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
index bba9a724ca0..d48127916ac 100644
--- a/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
+++ b/app/assets/javascripts/admin/templates/logs/staff-action-logs.hbs
@@ -30,7 +30,13 @@
     {{/if}}
   </div>
   {{else}}
-    {{i18n "admin.logs.staff_actions.filter"}} {{combo-box content=userHistoryActions value=filterActionId none="admin.logs.staff_actions.all" onSelect=(action "filterActionIdChanged")}}
+    {{i18n "admin.logs.staff_actions.filter"}}
+    {{combo-box
+      content=userHistoryActions
+      value=filterActionId
+      none="admin.logs.staff_actions.all"
+      onChange=(action "filterActionIdChanged")
+    }}
   {{/if}}
 
   {{d-button class="btn-default" action=(action "exportStaffActionLogs") label="admin.export_csv.button_text" icon="download"}}
diff --git a/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs b/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs
index e1978b918ab..15a39314cd3 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-color-scheme-select-base.hbs
@@ -1,16 +1,20 @@
 <div>
   {{#d-modal-body title="admin.customize.colors.select_base.title"}}
     {{i18n "admin.customize.colors.select_base.description"}}
-    {{combo-box content=model
-                   value=selectedBaseThemeId
-                   allowInitialValueMutation=true
-                   valueAttribute="base_scheme_id"}}
+    {{combo-box
+      content=model
+      value=selectedBaseThemeId
+      onChange=(action (mut selectedBaseThemeId))
+      valueProperty="base_scheme_id"
+    }}
   {{/d-modal-body}}
+
   <div class="modal-footer">
     {{d-button
       class="btn-primary"
       action=(action "selectBase")
       icon="plus"
-      label="admin.customize.new"}}
+      label="admin.customize.new"
+    }}
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/templates/modal/admin-install-theme.hbs b/app/assets/javascripts/admin/templates/modal/admin-install-theme.hbs
index a41bfa93a94..7307abb411a 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-install-theme.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-install-theme.hbs
@@ -89,7 +89,12 @@
         {{input value=name placeholder=placeholder}}
 
         <div class="label">{{I18n "admin.customize.theme.create_type"}}</div>
-        {{combo-box valueAttribute="value" content=createTypes value=selectedType}}
+        {{combo-box
+          valueProperty="value"
+          content=createTypes
+          value=selectedType
+          onChange=(action (mut selectedType))
+        }}
       </div>
     {{/if}}
   </div>
diff --git a/app/assets/javascripts/admin/templates/modal/admin-silence-user.hbs b/app/assets/javascripts/admin/templates/modal/admin-silence-user.hbs
index 7f830916cd4..0b123cdc6a3 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-silence-user.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-silence-user.hbs
@@ -8,7 +8,9 @@
           label="admin.user.silence_duration"
           includeFarFuture=true
           clearable=false
-          input=silenceUntil}}
+          input=silenceUntil
+          onChangeInput=(action (mut silenceUntil))
+        }}
       </label>
     </div>
 
diff --git a/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs b/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
index cc4a075fe8f..a10ecd9c952 100644
--- a/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
+++ b/app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs
@@ -9,7 +9,9 @@
             label="admin.user.suspend_duration"
             includeFarFuture=true
             clearable=false
-            input=suspendUntil}}
+            input=suspendUntil
+            onChangeInput=(action (mut suspendUntil))
+          }}
         </label>
       </div>
       {{suspension-details reason=reason message=message}}
diff --git a/app/assets/javascripts/admin/templates/reports-show.hbs b/app/assets/javascripts/admin/templates/reports-show.hbs
index dac1aa0bbe0..6c6a8fb279e 100644
--- a/app/assets/javascripts/admin/templates/reports-show.hbs
+++ b/app/assets/javascripts/admin/templates/reports-show.hbs
@@ -4,4 +4,5 @@
   filters=model
   reportOptions=reportOptions
   showFilteringUI=true
-  onRefresh=(route-action "onParamsChange")}}
+  onRefresh=(route-action "onParamsChange")
+}}
diff --git a/app/assets/javascripts/admin/templates/search-logs-index.hbs b/app/assets/javascripts/admin/templates/search-logs-index.hbs
index 805c4fe4cfc..b56a1400fbb 100644
--- a/app/assets/javascripts/admin/templates/search-logs-index.hbs
+++ b/app/assets/javascripts/admin/templates/search-logs-index.hbs
@@ -1,6 +1,11 @@
 <div class="admin-title">
-  {{period-chooser period=period}}
-  {{combo-box content=searchTypeOptions value=searchType class='search-logs-filter'}}
+  {{period-chooser period=period onChange=(action (mut period))}}
+  {{combo-box
+    content=searchTypeOptions
+    value=searchType
+    class="search-logs-filter"
+    onChange=(action (mut searchType))
+  }}
 </div>
 
 {{#conditional-loading-spinner condition=loading}}
diff --git a/app/assets/javascripts/admin/templates/search-logs-term.hbs b/app/assets/javascripts/admin/templates/search-logs-term.hbs
index e31a80d590e..91d5d31361b 100644
--- a/app/assets/javascripts/admin/templates/search-logs-term.hbs
+++ b/app/assets/javascripts/admin/templates/search-logs-term.hbs
@@ -1,6 +1,11 @@
 <div class="admin-title">
-  {{period-chooser period=period}}
-  {{combo-box content=searchTypeOptions value=searchType class='search-logs-filter'}}
+  {{period-chooser period=period onChange=(action (mut period))}}
+  {{combo-box
+    content=searchTypeOptions
+    value=searchType
+    class="search-logs-filter"
+    onChange=(action (mut searchType))
+  }}
 </div>
 
 <h2>
diff --git a/app/assets/javascripts/admin/templates/user-badges.hbs b/app/assets/javascripts/admin/templates/user-badges.hbs
index 9f81cd2f741..6b6716b4847 100644
--- a/app/assets/javascripts/admin/templates/user-badges.hbs
+++ b/app/assets/javascripts/admin/templates/user-badges.hbs
@@ -15,8 +15,13 @@
     {{else}}
     <form class="form-horizontal">
       <div>
-      <label>{{i18n 'admin.badges.badge'}}</label>
-      {{combo-box forceEscape=true filterable=true value=selectedBadgeId content=grantableBadges}}
+        <label>{{i18n 'admin.badges.badge'}}</label>
+        {{combo-box
+          filterable=true
+          value=selectedBadgeId
+          content=grantableBadges
+          onChange=(action (mut selectedBadgeId))
+        }}
       </div>
       <div>
       <label>{{i18n 'admin.badges.reason'}}</label>
diff --git a/app/assets/javascripts/admin/templates/user-index.hbs b/app/assets/javascripts/admin/templates/user-index.hbs
index 7eb9504fb5c..d69f3b97062 100644
--- a/app/assets/javascripts/admin/templates/user-index.hbs
+++ b/app/assets/javascripts/admin/templates/user-index.hbs
@@ -298,7 +298,7 @@
       </div>
       <div class="controls">
         {{d-button href="/admin/api/keys" label="admin.api.manage_keys"}}
-        
+
       </div>
     </div>
   {{/if}}
@@ -350,8 +350,9 @@
     <div class="value">
       {{combo-box
         content=site.trustLevels
-        value=model.trust_level
         nameProperty="detailedName"
+        value=model.trustLevel.id
+        onChange=(action (mut model.trust_level))
       }}
 
       {{#if model.dirty}}
@@ -514,9 +515,10 @@
         <div class="field">{{i18n "admin.groups.custom"}}</div>
         <div class="value">
           {{admin-group-selector
-            selected=model.customGroups
-            available=availableGroups
-            buffer=customGroupIdsBuffer}}
+            content=availableGroups
+            value=customGroupIdsBuffer
+            onChange=(action (mut customGroupIdsBuffer))
+          }}
         </div>
         {{#if customGroupsDirty}}
           <div class="controls">
@@ -532,7 +534,9 @@
             {{combo-box
               content=model.customGroups
               value=model.primary_group_id
-              none="admin.groups.no_primary"}}
+              none="admin.groups.no_primary"
+              onChange=(action (mut model.primary_group_id))
+            }}
           </div>
           {{#if primaryGroupDirty}}
             <div class="controls">
diff --git a/app/assets/javascripts/admin/templates/web-hooks-show.hbs b/app/assets/javascripts/admin/templates/web-hooks-show.hbs
index cc49f3ac58c..ee7cb36eca1 100644
--- a/app/assets/javascripts/admin/templates/web-hooks-show.hbs
+++ b/app/assets/javascripts/admin/templates/web-hooks-show.hbs
@@ -14,9 +14,12 @@
 
     <div>
       <label for='content-type'>{{i18n 'admin.web_hooks.content_type'}}</label>
-      {{combo-box content=contentTypes
-                  name="content-type"
-                  value=model.content_type}}
+      {{combo-box
+        content=contentTypes
+        name="content-type"
+        value=model.content_type
+        onChange=(action (mut model.content_type))
+      }}
     </div>
 
     <div>
@@ -48,7 +51,10 @@
     <div class='filters'>
       <div class="filter">
         <label>{{d-icon 'circle' class='tracking'}}{{i18n 'admin.web_hooks.categories_filter'}}</label>
-        {{category-selector categories=model.categories}}
+        {{category-selector
+          categories=model.categories
+          onChange=(action (mut model.categories))
+        }}
         <div class="instructions">{{i18n 'admin.web_hooks.categories_filter_instructions'}}</div>
       </div>
       {{#if showTagsFilter}}
diff --git a/app/assets/javascripts/discourse-common/lib/icon-library.js.es6 b/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
index aa32589a3a2..2c2fd9043ff 100644
--- a/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
+++ b/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
@@ -637,6 +637,12 @@ registerIconRenderer({
         params.title
       ).replace(/'/g, "&#39;")}'>${html}</span>`;
     }
+    if (params.translatedtitle) {
+      html = `<span class="svg-icon-title" title='${params.translatedtitle.replace(
+        /'/g,
+        "&#39;"
+      )}'>${html}</span>`;
+    }
     return html;
   },
 
diff --git a/app/assets/javascripts/discourse/components/auth-token-dropdown.es6 b/app/assets/javascripts/discourse/components/auth-token-dropdown.es6
index 8187c6fde1c..ef4d819ead7 100644
--- a/app/assets/javascripts/discourse/components/auth-token-dropdown.es6
+++ b/app/assets/javascripts/discourse/components/auth-token-dropdown.es6
@@ -1,13 +1,16 @@
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { computed } from "@ember/object";
 
 export default DropdownSelectBoxComponent.extend({
   classNames: ["auth-token-dropdown"],
-  headerIcon: "wrench",
-  allowInitialValueMutation: false,
-  showFullTitle: false,
 
-  computeContent() {
-    const content = [
+  selectKitOptions: {
+    icon: "wrench",
+    showFullTitle: false
+  },
+
+  content: computed(function() {
+    return [
       {
         id: "notYou",
         icon: "user-times",
@@ -21,12 +24,10 @@ export default DropdownSelectBoxComponent.extend({
         description: ""
       }
     ];
-
-    return content;
-  },
+  }),
 
   actions: {
-    onSelect(id) {
+    onChange(id) {
       switch (id) {
         case "notYou":
           this.showToken(this.token);
diff --git a/app/assets/javascripts/discourse/components/d-navigation.js.es6 b/app/assets/javascripts/discourse/components/d-navigation.js.es6
index 041e21e4a8d..df6dc3c0a92 100644
--- a/app/assets/javascripts/discourse/components/d-navigation.js.es6
+++ b/app/assets/javascripts/discourse/components/d-navigation.js.es6
@@ -49,5 +49,22 @@ export default Component.extend(FilterModeMixin, {
       noSubcategories,
       persistedQueryParams: params
     });
+  },
+
+  actions: {
+    changeCategoryNotificationLevel(notificationLevel) {
+      this.category.setNotification(notificationLevel);
+    },
+
+    selectCategoryAdminDropdownAction(actionId) {
+      switch (actionId) {
+        case "create":
+          this.createCategory();
+          break;
+        case "reorder":
+          this.reorderCategories();
+          break;
+      }
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/components/date-input.js.es6 b/app/assets/javascripts/discourse/components/date-input.js.es6
index 9da5a5e16c9..7bb967455ff 100644
--- a/app/assets/javascripts/discourse/components/date-input.js.es6
+++ b/app/assets/javascripts/discourse/components/date-input.js.es6
@@ -32,8 +32,9 @@ export default Component.extend({
   didUpdateAttrs() {
     this._super(...arguments);
 
-    if (this._picker) {
-      this._picker.setDate(this.date, true);
+    if (this._picker && typeof date === "string") {
+      const [year, month, day] = this.date.split("-").map(x => parseInt(x, 10));
+      this._picker.setDate(new Date(year, month - 1, day), true);
     }
   },
 
@@ -84,7 +85,7 @@ export default Component.extend({
     this._picker && this._picker.hide();
 
     if (this.onChange) {
-      this.onChange(moment(value).toDate());
+      this.onChange(value);
     }
   },
 
@@ -103,5 +104,11 @@ export default Component.extend({
 
   _opts() {
     return null;
+  },
+
+  actions: {
+    onInput(event) {
+      this._picker && this._picker.setDate(event.target.value, true);
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/components/date-picker-future.js.es6 b/app/assets/javascripts/discourse/components/date-picker-future.js.es6
index 74ef9afd7c2..e285c68dbc9 100644
--- a/app/assets/javascripts/discourse/components/date-picker-future.js.es6
+++ b/app/assets/javascripts/discourse/components/date-picker-future.js.es6
@@ -10,7 +10,8 @@ export default DatePicker.extend({
         moment()
           .add(1, "day")
           .toDate(),
-      setDefaultDate: !!this.defaultDate
+      setDefaultDate: !!this.defaultDate,
+      minDate: this.minDate || moment().toDate()
     };
   }
 });
diff --git a/app/assets/javascripts/discourse/components/date-picker.js.es6 b/app/assets/javascripts/discourse/components/date-picker.js.es6
index 4a32928ac02..c10d7ecdd8f 100644
--- a/app/assets/javascripts/discourse/components/date-picker.js.es6
+++ b/app/assets/javascripts/discourse/components/date-picker.js.es6
@@ -1,4 +1,4 @@
-import { next } from "@ember/runloop";
+import { schedule } from "@ember/runloop";
 import Component from "@ember/component";
 /* global Pikaday:true */
 import loadScript from "discourse/lib/load-script";
@@ -28,7 +28,7 @@ export default Component.extend({
 
   _loadPikadayPicker(container) {
     loadScript("/javascripts/pikaday.js").then(() => {
-      next(() => {
+      schedule("afterRender", () => {
         const options = {
           field: this.element.querySelector(".date-picker"),
           container: container || null,
diff --git a/app/assets/javascripts/discourse/components/edit-category-security.js.es6 b/app/assets/javascripts/discourse/components/edit-category-security.js.es6
index 00ad068467c..ddabd805889 100644
--- a/app/assets/javascripts/discourse/components/edit-category-security.js.es6
+++ b/app/assets/javascripts/discourse/components/edit-category-security.js.es6
@@ -9,6 +9,16 @@ export default buildCategoryPanel("security", {
   showPendingGroupChangesAlert: false,
   interactedWithDropdowns: false,
 
+  @on("init")
+  _setup() {
+    this.setProperties({
+      selectedGroup: this.get("category.availableGroups.firstObject"),
+      selectedPermission: this.get(
+        "category.availablePermissions.firstObject.id"
+      )
+    });
+  },
+
   @on("init")
   _registerValidator() {
     this.registerValidator(() => {
@@ -24,8 +34,18 @@ export default buildCategoryPanel("security", {
   },
 
   actions: {
-    onDropdownChange() {
-      this.set("interactedWithDropdowns", true);
+    onSelectGroup(selectedGroup) {
+      this.setProperties({
+        interactedWithDropdowns: true,
+        selectedGroup
+      });
+    },
+
+    onSelectPermission(selectedPermission) {
+      this.setProperties({
+        interactedWithDropdowns: true,
+        selectedPermission
+      });
     },
 
     editPermissions() {
@@ -42,11 +62,8 @@ export default buildCategoryPanel("security", {
         });
       }
 
-      this.set(
-        "selectedGroup",
-        this.get("category.availableGroups.firstObject")
-      );
       this.setProperties({
+        selectedGroup: this.get("category.availableGroups.firstObject"),
         showPendingGroupChangesAlert: false,
         interactedWithDropdowns: false
       });
diff --git a/app/assets/javascripts/discourse/components/edit-topic-timer-form.js.es6 b/app/assets/javascripts/discourse/components/edit-topic-timer-form.js.es6
index 18f2ac04f0c..4d2be762d3d 100644
--- a/app/assets/javascripts/discourse/components/edit-topic-timer-form.js.es6
+++ b/app/assets/javascripts/discourse/components/edit-topic-timer-form.js.es6
@@ -1,5 +1,5 @@
 import { isEmpty } from "@ember/utils";
-import { alias, equal, or } from "@ember/object/computed";
+import { equal, or, readOnly } from "@ember/object/computed";
 import { schedule } from "@ember/runloop";
 import Component from "@ember/component";
 import discourseComputed, {
@@ -16,7 +16,7 @@ import {
 } from "discourse/controllers/edit-topic-timer";
 
 export default Component.extend({
-  selection: alias("topicTimer.status_type"),
+  selection: readOnly("topicTimer.status_type"),
   autoOpen: equal("selection", OPEN_STATUS_TYPE),
   autoClose: equal("selection", CLOSE_STATUS_TYPE),
   autoDelete: equal("selection", DELETE_STATUS_TYPE),
@@ -27,16 +27,11 @@ export default Component.extend({
 
   @discourseComputed(
     "topicTimer.updateTime",
-    "loading",
     "publishToCategory",
     "topicTimer.category_id"
   )
-  saveDisabled(updateTime, loading, publishToCategory, topicTimerCategoryId) {
-    return (
-      isEmpty(updateTime) ||
-      loading ||
-      (publishToCategory && !topicTimerCategoryId)
-    );
+  saveDisabled(updateTime, publishToCategory, topicTimerCategoryId) {
+    return isEmpty(updateTime) || (publishToCategory && !topicTimerCategoryId);
   },
 
   @discourseComputed("topic.visible")
@@ -70,5 +65,25 @@ export default Component.extend({
         this.set("topicTimer.based_on_last_post", false);
       });
     }
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+
+    // TODO: get rid of this hack
+    schedule("afterRender", () => {
+      if (!this.get("topicTimer.status_type")) {
+        this.set(
+          "topicTimer.status_type",
+          this.get("timerTypes.firstObject.id")
+        );
+      }
+    });
+  },
+
+  actions: {
+    onChangeTimerType(value) {
+      this.set("topicTimer.status_type", value);
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/components/future-date-input.js.es6 b/app/assets/javascripts/discourse/components/future-date-input.js.es6
index 2c1bb70b54c..d84ab3c3340 100644
--- a/app/assets/javascripts/discourse/components/future-date-input.js.es6
+++ b/app/assets/javascripts/discourse/components/future-date-input.js.es6
@@ -45,9 +45,10 @@ export default Component.extend({
     const dateTime = moment(`${this.date}${time}`);
 
     if (dateTime.isValid()) {
-      this.set("input", dateTime.format(FORMAT));
+      this.attrs.onChangeInput &&
+        this.attrs.onChangeInput(dateTime.format(FORMAT));
     } else {
-      this.set("input", null);
+      this.attrs.onChangeInput && this.attrs.onChangeInput(null);
     }
   },
 
@@ -109,7 +110,10 @@ export default Component.extend({
     }
 
     if (isCustom) {
-      return date || time;
+      if (date) {
+        return moment(`${date}${time ? " " + time : ""}`).isAfter(moment());
+      }
+      return time;
     } else {
       return input;
     }
diff --git a/app/assets/javascripts/discourse/components/group-member-dropdown.js.es6 b/app/assets/javascripts/discourse/components/group-member-dropdown.js.es6
index 7a860c29de3..1ee959ecb2d 100644
--- a/app/assets/javascripts/discourse/components/group-member-dropdown.js.es6
+++ b/app/assets/javascripts/discourse/components/group-member-dropdown.js.es6
@@ -1,23 +1,16 @@
-import discourseComputed from "discourse-common/utils/decorators";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { computed } from "@ember/object";
 
 export default DropdownSelectBoxComponent.extend({
   pluginApiIdentifiers: ["group-member-dropdown"],
-  classNames: "group-member-dropdown",
-  showFullTitle: false,
-  allowInitialValueMutation: false,
-  allowAutoSelectFirst: false,
+  classNames: ["group-member-dropdown"],
 
-  init() {
-    this._super(...arguments);
-
-    this.headerIcon = ["wrench"];
+  selectKitOptions: {
+    icon: "wrench",
+    showFullTitle: false
   },
 
-  autoHighlight() {},
-
-  @discourseComputed("member.owner")
-  content(isOwner) {
+  content: computed("member.owner", function() {
     const items = [
       {
         id: "removeMember",
@@ -29,8 +22,8 @@ export default DropdownSelectBoxComponent.extend({
       }
     ];
 
-    if (this.currentUser && this.currentUser.admin) {
-      if (isOwner) {
+    if (this.get("currentUser.admin")) {
+      if (this.member.owner) {
         items.push({
           id: "removeOwner",
           name: I18n.t("groups.members.remove_owner"),
@@ -52,19 +45,5 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return items;
-  },
-
-  mutateValue(id) {
-    switch (id) {
-      case "removeMember":
-        this.removeMember(this.member);
-        break;
-      case "makeOwner":
-        this.makeOwner(this.get("member.username"));
-        break;
-      case "removeOwner":
-        this.removeOwner(this.member);
-        break;
-    }
-  }
+  })
 });
diff --git a/app/assets/javascripts/discourse/components/groups-form-membership-fields.js.es6 b/app/assets/javascripts/discourse/components/groups-form-membership-fields.js.es6
index b85eef4fa5a..304f3d808d5 100644
--- a/app/assets/javascripts/discourse/components/groups-form-membership-fields.js.es6
+++ b/app/assets/javascripts/discourse/components/groups-form-membership-fields.js.es6
@@ -1,7 +1,10 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
+import { computed } from "@ember/object";
 
 export default Component.extend({
+  tokenSeparator: "|",
+
   init() {
     this._super(...arguments);
 
@@ -17,6 +20,17 @@ export default Component.extend({
     ];
   },
 
+  groupTrustLevel: computed(
+    "model.grant_trust_level",
+    "trustLevelOptions",
+    function() {
+      return (
+        this.model.get("grant_trust_level") ||
+        this.trustLevelOptions.firstObject.value
+      );
+    }
+  ),
+
   @discourseComputed("model.visibility_level", "model.public_admission")
   disableMembershipRequestSetting(visibility_level, publicAdmission) {
     visibility_level = parseInt(visibility_level, 10);
@@ -30,5 +44,11 @@ export default Component.extend({
   disablePublicSetting(visibility_level, allowMembershipRequests) {
     visibility_level = parseInt(visibility_level, 10);
     return allowMembershipRequests || visibility_level > 1;
+  },
+
+  actions: {
+    onChangeEmailDomainsSetting(value) {
+      this.set("model.emailDomains", value.join(this.tokenSeparator));
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/components/reviewable-field-tags.js.es6 b/app/assets/javascripts/discourse/components/reviewable-field-tags.js.es6
new file mode 100644
index 00000000000..3e23d8b884f
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/reviewable-field-tags.js.es6
@@ -0,0 +1,12 @@
+export default Ember.Component.extend({
+  actions: {
+    onChange(tags) {
+      this.valueChanged &&
+        this.valueChanged({
+          target: {
+            value: tags
+          }
+        });
+    }
+  }
+});
diff --git a/app/assets/javascripts/discourse/components/reviewable-item.js.es6 b/app/assets/javascripts/discourse/components/reviewable-item.js.es6
index ef6626ebecb..f655a92eb00 100644
--- a/app/assets/javascripts/discourse/components/reviewable-item.js.es6
+++ b/app/assets/javascripts/discourse/components/reviewable-item.js.es6
@@ -182,10 +182,13 @@ export default Component.extend({
         .finally(() => this.set("updating", false));
     },
 
-    categoryChanged(category) {
+    categoryChanged(categoryId) {
+      let category = Category.findById(categoryId);
+
       if (!category) {
         category = Category.findUncategorized();
       }
+
       this._updates.category_id = category.id;
     },
 
diff --git a/app/assets/javascripts/discourse/components/search-advanced-options.js.es6 b/app/assets/javascripts/discourse/components/search-advanced-options.js.es6
index db8c11ea4b6..855fed4e287 100644
--- a/app/assets/javascripts/discourse/components/search-advanced-options.js.es6
+++ b/app/assets/javascripts/discourse/components/search-advanced-options.js.es6
@@ -553,7 +553,6 @@ export default Component.extend({
     }
   },
 
-  @observes("searchedTerms.time.when", "searchedTerms.time.days")
   updateSearchTermForPostTime() {
     const match = this.filterBlocks(REGEXP_POST_TIME_PREFIX);
     const timeDaysFilter = this.get("searchedTerms.time.days");
@@ -603,5 +602,28 @@ export default Component.extend({
 
   badgeFinder(term) {
     return Badge.findAll({ search: term });
+  },
+
+  actions: {
+    onChangeWhenTime(time) {
+      if (time) {
+        this.set("searchedTerms.time.when", time);
+        this.updateSearchTermForPostTime();
+      }
+    },
+    onChangeWhenDate(date) {
+      if (date) {
+        this.set("searchedTerms.time.days", moment(date).format("YYYY-MM-DD"));
+        this.updateSearchTermForPostTime();
+      }
+    },
+
+    onChangeCategory(categoryId) {
+      if (categoryId) {
+        this.set("searchedTerms.category", Category.findById(categoryId));
+      } else {
+        this.set("searchedTerms.category", null);
+      }
+    }
   }
 });
diff --git a/app/assets/javascripts/discourse/components/shared-draft-controls.js.es6 b/app/assets/javascripts/discourse/components/shared-draft-controls.js.es6
index 0b988e75cf3..4374380e03f 100644
--- a/app/assets/javascripts/discourse/components/shared-draft-controls.js.es6
+++ b/app/assets/javascripts/discourse/components/shared-draft-controls.js.es6
@@ -11,8 +11,8 @@ export default Component.extend({
   },
 
   actions: {
-    updateDestinationCategory(category) {
-      return this.topic.updateDestinationCategory(category.get("id"));
+    updateDestinationCategory(categoryId) {
+      return this.topic.updateDestinationCategory(categoryId);
     },
 
     publish() {
diff --git a/app/assets/javascripts/discourse/components/tags-admin-dropdown.js.es6 b/app/assets/javascripts/discourse/components/tags-admin-dropdown.js.es6
index 608d2e588ca..d7dc2cb19ab 100644
--- a/app/assets/javascripts/discourse/components/tags-admin-dropdown.js.es6
+++ b/app/assets/javascripts/discourse/components/tags-admin-dropdown.js.es6
@@ -1,47 +1,38 @@
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { computed } from "@ember/object";
 
 export default DropdownSelectBoxComponent.extend({
   pluginApiIdentifiers: ["tags-admin-dropdown"],
   classNames: "tags-admin-dropdown",
-  showFullTitle: false,
-  allowInitialValueMutation: false,
   actionsMapping: null,
 
-  init() {
-    this._super(...arguments);
-
-    this.headerIcon = ["bars", "caret-down"];
+  selectKitOptions: {
+    icons: ["bars", "caret-down"],
+    showFullTitle: false
   },
 
-  autoHighlight() {},
-
-  computeContent() {
-    const items = [
+  content: computed(function() {
+    return [
       {
         id: "manageGroups",
         name: I18n.t("tagging.manage_groups"),
         description: I18n.t("tagging.manage_groups_description"),
-        icon: "wrench",
-        __sk_row_type: "noopRow"
+        icon: "wrench"
       },
       {
         id: "uploadTags",
         name: I18n.t("tagging.upload"),
         description: I18n.t("tagging.upload_description"),
-        icon: "upload",
-        __sk_row_type: "noopRow"
+        icon: "upload"
       },
       {
         id: "deleteUnusedTags",
         name: I18n.t("tagging.delete_unused"),
         description: I18n.t("tagging.delete_unused_description"),
-        icon: "trash-alt",
-        __sk_row_type: "noopRow"
+        icon: "trash-alt"
       }
     ];
-
-    return items;
-  },
+  }),
 
   actions: {
     onSelect(id) {
diff --git a/app/assets/javascripts/discourse/components/topic-timer-info.js.es6 b/app/assets/javascripts/discourse/components/topic-timer-info.js.es6
index 5396fbda08e..4b758ed6a24 100644
--- a/app/assets/javascripts/discourse/components/topic-timer-info.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-timer-info.js.es6
@@ -17,15 +17,6 @@ export default Component.extend({
   notice: null,
   showTopicTimer: null,
 
-  rerenderTriggers: [
-    "topicClosed",
-    "statusType",
-    "executeAt",
-    "basedOnLastPost",
-    "duration",
-    "categoryId"
-  ],
-
   @discourseComputed("statusType")
   canRemoveTimer(type) {
     if (type === REMINDER_TYPE) return true;
@@ -38,7 +29,7 @@ export default Component.extend({
   },
 
   renderTopicTimer() {
-    if (!this.executeAt) {
+    if (!this.executeAt || this.executeAt < moment()) {
       this.set("showTopicTimer", null);
       return;
     }
@@ -50,7 +41,6 @@ export default Component.extend({
     const statusUpdateAt = moment(this.executeAt);
     const duration = moment.duration(statusUpdateAt - moment());
     const minutesLeft = duration.asMinutes();
-
     if (minutesLeft > 0) {
       let rerenderDelay = 1000;
       if (minutesLeft > 2160) {
@@ -82,9 +72,11 @@ export default Component.extend({
         );
       }
 
-      this.set("title", `${moment(this.executeAt).format("LLLL")}`.htmlSafe());
-      this.set("notice", `${I18n.t(this._noticeKey(), options)}`.htmlSafe());
-      this.set("showTopicTimer", true);
+      this.setProperties({
+        title: `${moment(this.executeAt).format("LLLL")}`.htmlSafe(),
+        notice: `${I18n.t(this._noticeKey(), options)}`.htmlSafe(),
+        showTopicTimer: true
+      });
 
       // TODO Sam: concerned this can cause a heavy rerender loop
       if (ENV.environment !== "test") {
diff --git a/app/assets/javascripts/discourse/controllers/edit-topic-timer.js.es6 b/app/assets/javascripts/discourse/controllers/edit-topic-timer.js.es6
index 2c04b1ca1c3..a410f1fc901 100644
--- a/app/assets/javascripts/discourse/controllers/edit-topic-timer.js.es6
+++ b/app/assets/javascripts/discourse/controllers/edit-topic-timer.js.es6
@@ -100,13 +100,19 @@ export default Controller.extend(ModalFunctionality, {
           });
         }
       })
-      .catch(error => {
-        popupAjaxError(error);
-      })
+      .catch(popupAjaxError)
       .finally(() => this.set("loading", false));
   },
 
   actions: {
+    onChangeStatusType(value) {
+      this.set("topicTimer.status_type", value);
+    },
+
+    onChangeUpdateTime(value) {
+      this.set("topicTimer.updateTime", value);
+    },
+
     saveTimer() {
       if (!this.get("topicTimer.updateTime")) {
         this.flash(
diff --git a/app/assets/javascripts/discourse/controllers/group-index.js.es6 b/app/assets/javascripts/discourse/controllers/group-index.js.es6
index dcf5e07f3df..6916164dd65 100644
--- a/app/assets/javascripts/discourse/controllers/group-index.js.es6
+++ b/app/assets/javascripts/discourse/controllers/group-index.js.es6
@@ -86,6 +86,20 @@ export default Controller.extend({
       this.toggleProperty("showActions");
     },
 
+    actOnGroup(member, actionId) {
+      switch (actionId) {
+        case "removeMember":
+          this.send("removeMember", member);
+          break;
+        case "makeOwner":
+          this.send("makeOwner", member.username);
+          break;
+        case "removeOwner":
+          this.send("removeOwner", member);
+          break;
+      }
+    },
+
     removeMember(user) {
       this.model.removeMember(user, this.memberParams);
     },
diff --git a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6 b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
index 086e5cc0b61..1fbed8353b7 100644
--- a/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
+++ b/app/assets/javascripts/discourse/controllers/preferences/interface.js.es6
@@ -14,6 +14,7 @@ import {
   isiPad,
   iOSWithVisualViewport
 } from "discourse/lib/utilities";
+import { computed } from "@ember/object";
 
 const USER_HOMES = {
   1: "latest",
@@ -76,6 +77,17 @@ export default Controller.extend(PreferencesTabController, {
     });
   },
 
+  homepageId: computed(
+    "model.user_option.homepage_id",
+    "userSelectableHome.[]",
+    function() {
+      return (
+        this.model.user_option.homepage_id ||
+        this.userSelectableHome.firstObject.value
+      );
+    }
+  ),
+
   @discourseComputed
   titleCountModes() {
     return TITLE_COUNT_MODES.map(value => {
@@ -195,6 +207,8 @@ export default Controller.extend(PreferencesTabController, {
 
       // Force refresh when leaving this screen
       Discourse.set("assetVersion", "forceRefresh");
+
+      this.set("textSize", newSize);
     }
   }
 });
diff --git a/app/assets/javascripts/discourse/controllers/tags-show.js.es6 b/app/assets/javascripts/discourse/controllers/tags-show.js.es6
index 0c3d6e64dd9..c4d79e8643a 100644
--- a/app/assets/javascripts/discourse/controllers/tags-show.js.es6
+++ b/app/assets/javascripts/discourse/controllers/tags-show.js.es6
@@ -155,9 +155,8 @@ export default Controller.extend(BulkTopicSelection, FilterModeMixin, {
       });
     },
 
-    changeTagNotification(id) {
-      const tagNotification = this.tagNotification;
-      tagNotification.update({ notification_level: id });
+    changeTagNotificationLevel(notificationLevel) {
+      this.tagNotification.update({ notification_level: notificationLevel });
     }
   }
 });
diff --git a/app/assets/javascripts/discourse/controllers/topic.js.es6 b/app/assets/javascripts/discourse/controllers/topic.js.es6
index c474fa50fa7..25f515420b5 100644
--- a/app/assets/javascripts/discourse/controllers/topic.js.es6
+++ b/app/assets/javascripts/discourse/controllers/topic.js.es6
@@ -242,12 +242,12 @@ export default Controller.extend(bufferedProperty("model"), {
   },
 
   actions: {
-    topicCategoryChanged(selection) {
-      this.set("buffered.category_id", selection.value);
+    topicCategoryChanged(categoryId) {
+      this.set("buffered.category_id", categoryId);
     },
 
-    topicTagsChanged({ target }) {
-      this.set("buffered.tags", target.value);
+    topicTagsChanged(value) {
+      this.set("buffered.tags", value);
     },
 
     deletePending(pending) {
diff --git a/app/assets/javascripts/discourse/controllers/user-private-messages.js.es6 b/app/assets/javascripts/discourse/controllers/user-private-messages.js.es6
index 724d8b9909f..8a216985164 100644
--- a/app/assets/javascripts/discourse/controllers/user-private-messages.js.es6
+++ b/app/assets/javascripts/discourse/controllers/user-private-messages.js.es6
@@ -59,6 +59,9 @@ export default Controller.extend({
   },
 
   actions: {
+    changeGroupNotificationLevel(notificationLevel) {
+      this.group.setNotification(notificationLevel, this.get("user.id"));
+    },
     archive() {
       this.bulkOperation("archive_messages");
     },
diff --git a/app/assets/javascripts/discourse/controllers/user.js.es6 b/app/assets/javascripts/discourse/controllers/user.js.es6
index 36bd0c9213f..90eeb3a837a 100644
--- a/app/assets/javascripts/discourse/controllers/user.js.es6
+++ b/app/assets/javascripts/discourse/controllers/user.js.es6
@@ -9,7 +9,7 @@ import CanCheckEmails from "discourse/mixins/can-check-emails";
 import User from "discourse/models/user";
 import optionalService from "discourse/lib/optional-service";
 import { prioritizeNameInUx } from "discourse/lib/settings";
-import { set } from "@ember/object";
+import { set, computed } from "@ember/object";
 
 export default Controller.extend(CanCheckEmails, {
   indexStream: false,
@@ -136,6 +136,21 @@ export default Controller.extend(CanCheckEmails, {
     }
   },
 
+  userNotificationLevel: computed(
+    "currentUser.ignored_ids",
+    "model.ignored",
+    "model.muted",
+    function() {
+      if (this.get("model.ignored")) {
+        return "changeToIgnored";
+      } else if (this.get("model.muted")) {
+        return "changeToMuted";
+      } else {
+        return "changeToNormal";
+      }
+    }
+  ),
+
   actions: {
     collapseProfile() {
       this.set("forceExpand", false);
diff --git a/app/assets/javascripts/discourse/helpers/component-for-collection.js.es6 b/app/assets/javascripts/discourse/helpers/component-for-collection.js.es6
new file mode 100644
index 00000000000..384012a0e6c
--- /dev/null
+++ b/app/assets/javascripts/discourse/helpers/component-for-collection.js.es6
@@ -0,0 +1,8 @@
+import { registerUnbound } from "discourse-common/lib/helpers";
+
+registerUnbound(
+  "component-for-collection",
+  (collectionIdentifier, selectKit) => {
+    return selectKit.modifyComponentForCollection(collectionIdentifier);
+  }
+);
diff --git a/app/assets/javascripts/discourse/helpers/component-for-row.js.es6 b/app/assets/javascripts/discourse/helpers/component-for-row.js.es6
new file mode 100644
index 00000000000..4f8ba12822e
--- /dev/null
+++ b/app/assets/javascripts/discourse/helpers/component-for-row.js.es6
@@ -0,0 +1,8 @@
+import { registerUnbound } from "discourse-common/lib/helpers";
+
+registerUnbound(
+  "component-for-row",
+  (collectionForIdentifier, item, selectKit) => {
+    return selectKit.modifyComponentForRow(collectionForIdentifier, item);
+  }
+);
diff --git a/app/assets/javascripts/discourse/lib/discourse-location.js.es6 b/app/assets/javascripts/discourse/lib/discourse-location.js.es6
index b1238d8d390..d9d504171b9 100644
--- a/app/assets/javascripts/discourse/lib/discourse-location.js.es6
+++ b/app/assets/javascripts/discourse/lib/discourse-location.js.es6
@@ -17,7 +17,7 @@ const DiscourseLocation = EmberObject.extend({
     this._super(...arguments);
 
     this.set("location", this.location || window.location);
-    this.initState();
+    this.initOptions();
   },
 
   /**
@@ -25,9 +25,9 @@ const DiscourseLocation = EmberObject.extend({
 
     Used to set state on first call to setURL
 
-    @method initState
+    @method initOptions
   */
-  initState() {
+  initOptions() {
     const history = this.history || window.history;
     if (history && history.scrollRestoration) {
       history.scrollRestoration = "manual";
diff --git a/app/assets/javascripts/discourse/lib/url.js.es6 b/app/assets/javascripts/discourse/lib/url.js.es6
index 6d7fa31966e..3dc13d0d799 100644
--- a/app/assets/javascripts/discourse/lib/url.js.es6
+++ b/app/assets/javascripts/discourse/lib/url.js.es6
@@ -292,6 +292,10 @@ const DiscourseURL = EmberObject.extend({
     return this.handleURL(path, opts);
   },
 
+  routeToUrl(url, opts = {}) {
+    this.routeTo(Discourse.getURL(url), opts);
+  },
+
   rewrite(regexp, replacement, opts) {
     rewrites.push({ regexp, replacement, opts: opts || {} });
   },
diff --git a/app/assets/javascripts/discourse/models/category.js.es6 b/app/assets/javascripts/discourse/models/category.js.es6
index 97a745bd5bd..0e576a4b8f2 100644
--- a/app/assets/javascripts/discourse/models/category.js.es6
+++ b/app/assets/javascripts/discourse/models/category.js.es6
@@ -120,15 +120,14 @@ const Category = RestModel.extend({
     return topicCount > (this.num_featured_topics || 2);
   },
 
-  @discourseComputed("topic_count", "subcategories")
-  totalTopicCount(topicCount, subcats) {
-    let count = topicCount;
-    if (subcats) {
-      subcats.forEach(s => {
-        count += s.get("topic_count");
+  @discourseComputed("topic_count", "subcategories.[]")
+  totalTopicCount(topicCount, subcategories) {
+    if (subcategories) {
+      subcategories.forEach(subcategory => {
+        topicCount += subcategory.topic_count;
       });
     }
-    return count;
+    return topicCount;
   },
 
   save() {
diff --git a/app/assets/javascripts/discourse/templates/components/badge-title.hbs b/app/assets/javascripts/discourse/templates/components/badge-title.hbs
index 53615951994..abb66e44aa2 100644
--- a/app/assets/javascripts/discourse/templates/components/badge-title.hbs
+++ b/app/assets/javascripts/discourse/templates/components/badge-title.hbs
@@ -12,7 +12,9 @@
         {{combo-box
           value=selectedUserBadgeId
           nameProperty="badge.name"
-          content=selectableUserBadges}}
+          content=selectableUserBadges
+          onChange=(action (mut selectedUserBadgeId))
+        }}
       </div>
     </div>
 
diff --git a/app/assets/javascripts/discourse/templates/components/bread-crumbs.hbs b/app/assets/javascripts/discourse/templates/components/bread-crumbs.hbs
index c7bfe57aaf4..b42063fb9bb 100644
--- a/app/assets/javascripts/discourse/templates/components/bread-crumbs.hbs
+++ b/app/assets/javascripts/discourse/templates/components/bread-crumbs.hbs
@@ -1,18 +1,20 @@
 {{#each categoryBreadcrumbs as |breadcrumb|}}
   {{#if breadcrumb.hasOptions}}
     {{category-drop
-        category=breadcrumb.category
+      category=breadcrumb.category
+      categories=breadcrumb.options
+      options=(hash
         parentCategory=breadcrumb.parentCategory
-        categories=breadcrumb.options
         subCategory=breadcrumb.isSubcategory
-        noSubcategories=breadcrumb.noSubcategories}}
+        noSubcategories=breadcrumb.noSubcategories
+        autoFilterable=true
+      )
+    }}
   {{/if}}
 {{/each}}
 
 {{#if siteSettings.tagging_enabled}}
-  {{tag-drop
-    currentCategory=category
-    tagId=tagId}}
+  {{tag-drop currentCategory=category tagId=tagId}}
 {{/if}}
 
 {{plugin-outlet name="bread-crumbs-right" connectorTagName="li" tagName=""}}
diff --git a/app/assets/javascripts/discourse/templates/components/composer-action-title.hbs b/app/assets/javascripts/discourse/templates/components/composer-action-title.hbs
index 8f010be7cec..3f26b6e3c5d 100644
--- a/app/assets/javascripts/discourse/templates/components/composer-action-title.hbs
+++ b/app/assets/javascripts/discourse/templates/components/composer-action-title.hbs
@@ -3,12 +3,13 @@
 {{else}}
   {{composer-actions
     composerModel=model
-    options=model.replyOptions
+    replyOptions=model.replyOptions
     canWhisper=canWhisper
     openComposer=openComposer
     closeComposer=closeComposer
     action=model.action
-    tabindex=tabindex}}
+    tabindex=tabindex
+  }}
 {{/if}}
 
 <span class="action-title">
diff --git a/app/assets/javascripts/discourse/templates/components/d-editor.hbs b/app/assets/javascripts/discourse/templates/components/d-editor.hbs
index 9435d744f80..5acae90928b 100644
--- a/app/assets/javascripts/discourse/templates/components/d-editor.hbs
+++ b/app/assets/javascripts/discourse/templates/components/d-editor.hbs
@@ -5,12 +5,15 @@
         {{#each group.buttons as |b|}}
           {{#if b.popupMenu}}
             {{toolbar-popup-menu-options
-              onSelect=onPopupMenuAction
+              content=popupMenuOptions
+              onChange=onPopupMenuAction
               onExpand=(action b.action b)
-              title=b.title
-              headerIcon=b.icon
               class=b.className
-              content=popupMenuOptions}}
+              options=(hash
+                popupTitle=b.title
+                icon=b.icon
+              )
+            }}
           {{else}}
             {{d-button
               action=b.action
diff --git a/app/assets/javascripts/discourse/templates/components/d-navigation.hbs b/app/assets/javascripts/discourse/templates/components/d-navigation.hbs
index a97af68cbc8..6a0d8e330c8 100644
--- a/app/assets/javascripts/discourse/templates/components/d-navigation.hbs
+++ b/app/assets/javascripts/discourse/templates/components/d-navigation.hbs
@@ -2,14 +2,18 @@
 
 {{#if showCategoryAdmin}}
   {{categories-admin-dropdown
-    create=createCategory
-    reorder=reorderCategories}}
+    onChange=(action "selectCategoryAdminDropdownAction")
+  }}
 {{/if}}
 
 {{navigation-bar navItems=navItems filterMode=filterMode category=category}}
 
 {{#if showCategoryNotifications}}
-  {{category-notifications-button value=category.notification_level category=category}}
+  {{category-notifications-button
+    value=category.notification_level
+    category=category
+    onChange=(action "changeCategoryNotificationLevel")
+  }}
 {{/if}}
 
 {{plugin-outlet name="before-create-topic-button"
diff --git a/app/assets/javascripts/discourse/templates/components/date-input.hbs b/app/assets/javascripts/discourse/templates/components/date-input.hbs
index e29eb0e73af..3ed544b507c 100644
--- a/app/assets/javascripts/discourse/templates/components/date-input.hbs
+++ b/app/assets/javascripts/discourse/templates/components/date-input.hbs
@@ -2,4 +2,6 @@
   type=inputType
   class="date-picker"
   placeholder=placeholder
-  value=value}}
+  value=value
+  input=(action "onInput")
+}}
diff --git a/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs b/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
index 95e681f3966..19d6e724dcc 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-category-general.hbs
@@ -17,7 +17,9 @@
         excludeCategoryId=category.id
         categories=parentCategories
         allowSubCategories=true
-        allowUncategorized=false}}
+        allowUncategorized=false
+        onChange=(action (mut category.parent_category_id))
+      }}
     </section>
   {{/if}}
 
diff --git a/app/assets/javascripts/discourse/templates/components/edit-category-security.hbs b/app/assets/javascripts/discourse/templates/components/edit-category-security.hbs
index 9b238a1a1c6..e6c7dd5634b 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-category-security.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-category-security.hbs
@@ -22,18 +22,21 @@
   {{/unless}}
   {{#if editingPermissions}}
     {{#if category.availableGroups}}
-      {{combo-box class="available-groups"
-                  allowInitialValueMutation=true
-                  allowContentReplacement=true
-                  content=category.availableGroups
-                  onSelect=(action "onDropdownChange")
-                  value=selectedGroup}}
-      {{combo-box allowInitialValueMutation=true
-                  class="permission-selector"
-                  nameProperty="description"
-                  content=category.availablePermissions
-                  onSelect=(action "onDropdownChange")
-                  value=selectedPermission}}
+      {{combo-box
+        class="available-groups"
+        content=category.availableGroups
+        onChange=(action "onSelectGroup")
+        value=selectedGroup
+        valueProperty=null
+        nameProperty=null
+      }}
+      {{combo-box
+        class="permission-selector"
+        nameProperty="description"
+        content=category.availablePermissions
+        onChange=(action "onSelectPermission")
+        value=selectedPermission
+      }}
       {{d-button
         action=(action "addPermission" selectedGroup selectedPermission)
         class="btn-primary add-permission"
diff --git a/app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs b/app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs
index 1f65507a768..fab2c089fde 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-category-settings.hbs
@@ -33,10 +33,13 @@
       {{i18n "category.search_priority.label"}}
     </label>
     <div class="controls">
-    {{combo-box valueAttribute="value"
-        id="category-search-priority"
-        content=searchPrioritiesOptions
-        value=category.search_priority}}
+    {{combo-box
+      valueProperty="value"
+      id="category-search-priority"
+      content=searchPrioritiesOptions
+      value=category.search_priority
+      onChange=(action (mut category.search_priority))
+    }}
     </div>
   </section>
 
@@ -145,7 +148,7 @@
       {{i18n "category.default_view"}}
     </label>
     <div class="controls">
-      {{combo-box valueAttribute="value" id="category-default-view" content=availableViews value=category.default_view}}
+      {{combo-box valueProperty="value" id="category-default-view" content=availableViews value=category.default_view}}
     </div>
   </section>
 
@@ -154,7 +157,7 @@
       {{i18n "category.default_top_period"}}
     </label>
     <div class="controls">
-      {{combo-box valueAttribute="value" id="category-default-period" content=availableTopPeriods value=category.default_top_period}}
+      {{combo-box valueProperty="value" id="category-default-period" content=availableTopPeriods value=category.default_top_period}}
     </div>
   </section>
 
@@ -163,9 +166,9 @@
       {{i18n "category.sort_order"}}
     </label>
     <div class="controls">
-    {{combo-box valueAttribute="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
+    {{combo-box valueProperty="value" content=availableSorts value=category.sort_order none="category.sort_options.default"}}
     {{#unless isDefaultSortOrder}}
-      {{combo-box castBoolean=true valueAttribute="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
+      {{combo-box castBoolean=true valueProperty="value" content=sortAscendingOptions value=category.sort_ascending none="category.sort_options.default"}}
     {{/unless}}
       </div>
   </section>
@@ -184,7 +187,7 @@
         <label for="subcategory-list-style">
           {{i18n "category.subcategory_list_style"}}
         </label>
-              {{combo-box valueAttribute="value" id="subcategory-list-style" content=availableSubcategoryListStyles value=category.subcategory_list_style}}
+              {{combo-box valueProperty="value" id="subcategory-list-style" content=availableSubcategoryListStyles value=category.subcategory_list_style}}
       </section>
     {{/if}}
 
diff --git a/app/assets/javascripts/discourse/templates/components/edit-category-tags.hbs b/app/assets/javascripts/discourse/templates/components/edit-category-tags.hbs
index 681e5e24dca..36151b12afc 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-category-tags.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-category-tags.hbs
@@ -6,12 +6,17 @@
     tags=category.allowed_tags
     everyTag=true
     excludeSynonyms=true
-    unlimitedTagCount=true}}
+    unlimitedTagCount=true
+    onChange=(action (mut category.allowed_tags))
+  }}
 </section>
 
 <section class="field">
   <label for="category-allowed-tag-groups">{{i18n 'category.tags_allowed_tag_groups'}}</label>
-  {{tag-group-chooser id="category-allowed-tag-groups" tagGroups=category.allowed_tag_groups}}
+  {{tag-group-chooser
+    id="category-allowed-tag-groups"
+    tagGroups=category.allowed_tag_groups
+  }}
   {{#link-to 'tagGroups'}}{{i18n 'category.manage_tag_groups_link'}}{{/link-to}}
 </section>
 
diff --git a/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs b/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
index 6fe586b226a..1fbfa3f9797 100644
--- a/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
+++ b/app/assets/javascripts/discourse/templates/components/edit-topic-timer-form.hbs
@@ -1,39 +1,52 @@
 <form>
   <div class="control-group">
-    {{combo-box class="timer-type" allowInitialValueMutation=true content=timerTypes value=selection}}
+    {{combo-box
+      class="timer-type"
+      onChange=onChangeStatusType
+      content=timerTypes
+      value=selection
+    }}
   </div>
 
   <div>
     {{#if showTimeOnly}}
       {{future-date-input
-          input=topicTimer.updateTime
-          label="topic.topic_status_update.when"
-          statusType=selection
-          includeWeekend=true
-          basedOnLastPost=topicTimer.based_on_last_post}}
+        input=(readonly topicTimer.updateTime)
+        label="topic.topic_status_update.when"
+        statusType=selection
+        includeWeekend=true
+        basedOnLastPost=topicTimer.based_on_last_post
+        onChangeInput=onChangeUpdateTime
+      }}
     {{else if publishToCategory}}
       <div class="control-group">
         <label>{{i18n 'topic.topic_status_update.publish_to'}}</label>
         {{category-chooser
           value=topicTimer.category_id
-          excludeCategoryId=excludeCategoryId}}
+          excludeCategoryId=excludeCategoryId
+          onChange=(action (mut topicTimer.category_id))
+        }}
       </div>
 
       {{future-date-input
-          input=topicTimer.updateTime
-          label="topic.topic_status_update.when"
-          statusType=selection
-          includeWeekend=true
-          categoryId=topicTimer.category_id
-          basedOnLastPost=topicTimer.based_on_last_post}}
+        input=(readonly topicTimer.updateTime)
+        label="topic.topic_status_update.when"
+        statusType=selection
+        includeWeekend=true
+        categoryId=topicTimer.category_id
+        basedOnLastPost=topicTimer.based_on_last_post
+        onChangeInput=onChangeUpdateTime
+      }}
     {{else if autoClose}}
       {{future-date-input
-          input=topicTimer.updateTime
-          label="topic.topic_status_update.when"
-          statusType=selection
-          includeWeekend=true
-          basedOnLastPost=topicTimer.based_on_last_post
-          lastPostedAt=model.last_posted_at}}
+        input=topicTimer.updateTime
+        label="topic.topic_status_update.when"
+        statusType=selection
+        includeWeekend=true
+        basedOnLastPost=topicTimer.based_on_last_post
+        lastPostedAt=model.last_posted_at
+        onChangeInput=onChangeUpdateTime
+      }}
     {{/if}}
   </div>
 </form>
diff --git a/app/assets/javascripts/discourse/templates/components/future-date-input.hbs b/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
index fc27997d5dc..c1571ad9c58 100644
--- a/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
+++ b/app/assets/javascripts/discourse/templates/components/future-date-input.hbs
@@ -2,21 +2,29 @@
   <div class="control-group">
     <label>{{displayLabel}}</label>
     {{future-date-input-selector
-        minimumResultsForSearch=-1
-        statusType=statusType
-        value=selection
-        input=input
-        includeDateTime=includeDateTime
-        includeWeekend=includeWeekend
-        includeFarFuture=includeFarFuture
-        includeMidFuture=includeMidFuture
-        clearable=clearable
-        none="topic.auto_update_input.none"}}
+      minimumResultsForSearch=-1
+      statusType=statusType
+      value=(readonly selection)
+      input=(readonly input)
+      includeDateTime=includeDateTime
+      includeWeekend=includeWeekend
+      includeFarFuture=includeFarFuture
+      includeMidFuture=includeMidFuture
+      clearable=clearable
+      none="topic.auto_update_input.none"
+      onChangeInput=onChangeInput
+      onChange=(action (mut selection))
+    }}
   </div>
 
   {{#if displayDateAndTimePicker}}
     <div class="control-group">
-      {{d-icon "calendar-alt"}} {{date-picker-future value=date defaultDate=date}}
+      {{d-icon "calendar-alt"}}
+      {{date-picker-future
+        value=date
+        defaultDate=date
+        onSelect=(action (mut date))
+      }}
     </div>
 
     <div class="control-group">
@@ -44,11 +52,12 @@
   {{#if showTopicStatusInfo}}
     <div class="alert alert-info">
       {{topic-timer-info
-          statusType=statusType
-          executeAt=executeAt
-          basedOnLastPost=basedOnLastPost
-          duration=duration
-          categoryId=categoryId}}
+        statusType=statusType
+        executeAt=executeAt
+        basedOnLastPost=basedOnLastPost
+        duration=duration
+        categoryId=categoryId
+      }}
     </div>
   {{/if}}
 </div>
diff --git a/app/assets/javascripts/discourse/templates/components/group-navigation.hbs b/app/assets/javascripts/discourse/templates/components/group-navigation.hbs
index 60fcbfda937..eb9c9140cb7 100644
--- a/app/assets/javascripts/discourse/templates/components/group-navigation.hbs
+++ b/app/assets/javascripts/discourse/templates/components/group-navigation.hbs
@@ -6,7 +6,10 @@
       {{/link-to}}
     </li>
   {{else}}
-    {{group-dropdown content=group.extras.visible_group_names value=group.name}}
+    {{group-dropdown
+      groups=group.extras.visible_group_names
+      value=group.name
+    }}
   {{/if}}
 
   {{#each tabs as |tab|}}
diff --git a/app/assets/javascripts/discourse/templates/components/groups-form-interaction-fields.hbs b/app/assets/javascripts/discourse/templates/components/groups-form-interaction-fields.hbs
index 959e2e12d13..9185adfdead 100644
--- a/app/assets/javascripts/discourse/templates/components/groups-form-interaction-fields.hbs
+++ b/app/assets/javascripts/discourse/templates/components/groups-form-interaction-fields.hbs
@@ -3,12 +3,15 @@
     <label class="control-label">{{i18n 'admin.groups.manage.interaction.visibility'}}</label>
     <label for="visiblity">{{i18n 'admin.groups.manage.interaction.visibility_levels.title'}}</label>
 
-    {{combo-box name="alias"
-        valueAttribute="value"
-        value=model.visibility_level
-        content=visibilityLevelOptions
-        castInteger=true
-        class="groups-form-visibility-level"}}
+    {{combo-box
+      name="alias"
+      valueProperty="value"
+      value=model.visibility_level
+      content=visibilityLevelOptions
+      castInteger=true
+      class="groups-form-visibility-level"
+      onChange=(action (mut model.visibility_level))
+    }}
 
     <div class="control-instructions">
       {{i18n 'admin.groups.manage.interaction.visibility_levels.description'}}
@@ -19,7 +22,7 @@
     <label for="visiblity">{{i18n 'admin.groups.manage.interaction.members_visibility_levels.title'}}</label>
 
     {{combo-box name="alias"
-        valueAttribute="value"
+        valueProperty="value"
         value=model.members_visibility_level
         content=visibilityLevelOptions
         castInteger=true
@@ -35,21 +38,27 @@
   <label class="control-label">{{i18n 'groups.manage.interaction.posting'}}</label>
   <label for="alias">{{i18n 'groups.alias_levels.mentionable'}}</label>
 
-  {{combo-box name="alias"
-      valueAttribute="value"
-      value=model.mentionable_level
-      content=aliasLevelOptions
-      class="groups-form-mentionable-level"}}
+  {{combo-box
+    name="alias"
+    valueProperty="value"
+    value=model.mentionable_level
+    content=aliasLevelOptions
+    class="groups-form-mentionable-level"
+    onChange=(action (mut model.mentionable_level))
+  }}
 </div>
 
 <div class="control-group">
   <label for="alias">{{i18n 'groups.alias_levels.messageable'}}</label>
 
-  {{combo-box name="alias"
-      valueAttribute="value"
-      value=model.messageable_level
-      content=aliasLevelOptions
-      class="groups-form-messageable-level"}}
+  {{combo-box
+    name="alias"
+    valueProperty="value"
+    value=model.messageable_level
+    content=aliasLevelOptions
+    class="groups-form-messageable-level"
+    onChange=(action (mut model.messageable_level))
+  }}
 </div>
 
 <div class="control-group">
diff --git a/app/assets/javascripts/discourse/templates/components/groups-form-membership-fields.hbs b/app/assets/javascripts/discourse/templates/components/groups-form-membership-fields.hbs
index 757c14c40a2..7d1e05cb58d 100644
--- a/app/assets/javascripts/discourse/templates/components/groups-form-membership-fields.hbs
+++ b/app/assets/javascripts/discourse/templates/components/groups-form-membership-fields.hbs
@@ -6,9 +6,12 @@
       {{i18n 'admin.groups.manage.membership.automatic_membership_email_domains'}}
     </label>
 
-    {{list-setting name="automatic_membership"
-        settingValue=model.emailDomains
-        class="group-form-automatic-membership-automatic"}}
+    {{list-setting
+      name="automatic_membership"
+      settingValue=model.emailDomains
+      class="group-form-automatic-membership-automatic"
+      onChange=(action "onChangeEmailDomainsSetting")
+    }}
 
     <label>
       {{input type="checkbox"
@@ -26,12 +29,14 @@
     <label class="control-label">{{i18n "admin.groups.manage.membership.effects"}}</label>
     <label for="grant_trust_level">{{i18n 'admin.groups.manage.membership.trust_levels_title'}}</label>
 
-    {{combo-box name="grant_trust_level"
-        valueAttribute="value"
-        value=model.grant_trust_level
-        content=trustLevelOptions
-        class="groups-form-grant-trust-level"}}
-
+    {{combo-box
+      name="grant_trust_level"
+      valueProperty="value"
+      value=groupTrustLevel
+      content=trustLevelOptions
+      class="groups-form-grant-trust-level"
+      onChange=(action (mut model.grant_trust_level))
+    }}
     <label>
       {{input type="checkbox"
           checked=model.primary_group
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-bundled-action.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-bundled-action.hbs
index 21bd7efbdf0..1455e3f4e01 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-bundled-action.hbs
+++ b/app/assets/javascripts/discourse/templates/components/reviewable-bundled-action.hbs
@@ -1,12 +1,15 @@
 {{#if multiple}}
   {{dropdown-select-box
-    headerIcon=bundle.icon
     class="reviewable-action-dropdown"
     nameProperty="label"
     title=bundle.label
     content=bundle.actions
-    onSelect=(action "performById")
-    disabled=reviewableUpdating}}
+    onChange=(action "performById")
+    options=(hash
+      icon=bundle.icon
+      disabled=reviewableUpdating
+    )
+  }}
 {{else}}
   {{d-button
     class=(concat "reviewable-action " (dasherize first.id) " " first.button_class)
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-field-category.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-field-category.hbs
index 4ecdea1f6d8..f77783036cd 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-field-category.hbs
+++ b/app/assets/javascripts/discourse/templates/components/reviewable-field-category.hbs
@@ -1 +1,4 @@
-{{category-chooser value=value onChooseCategory=categoryChanged}}
+{{category-chooser
+  value=value
+  onChange=categoryChanged
+}}
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-field-tags.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-field-tags.hbs
index 6175da44a3c..82f112d5c19 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-field-tags.hbs
+++ b/app/assets/javascripts/discourse/templates/components/reviewable-field-tags.hbs
@@ -1 +1,4 @@
-{{mini-tag-chooser tags=value onChangeTags=valueChanged}}
+{{mini-tag-chooser
+  value=value
+  onChange=(action "onChange")
+}}
diff --git a/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs b/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs
index abd106a474a..de34e55b582 100644
--- a/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs
+++ b/app/assets/javascripts/discourse/templates/components/reviewable-item.hbs
@@ -27,13 +27,13 @@
 
         {{#each reviewable.editable_fields as |f|}}
           <div class='editable-field {{dasherize f.id}}'>
-            {{component
-              (concat "reviewable-field-" f.type)
+            {{component (concat "reviewable-field-" f.type)
               tagName=''
               value=(editable-value reviewable f.id)
               tagCategoryId=reviewable.category.id
               valueChanged=(action "valueChanged" f.id)
-              categoryChanged=(action "categoryChanged")}}
+              categoryChanged=(action "categoryChanged")
+            }}
           </div>
         {{/each}}
       </div>
diff --git a/app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs b/app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs
index 05cc82a2c3e..1250e0a0e40 100644
--- a/app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs
+++ b/app/assets/javascripts/discourse/templates/components/search-advanced-options.hbs
@@ -15,7 +15,10 @@
   <div class="control-group pull-left">
     <label class="control-label" for="search-in-category">{{i18n "search.advanced.in_category.label"}}</label>
     <div class="controls">
-      {{search-advanced-category-chooser value=searchedTerms.category}}
+      {{search-advanced-category-chooser
+        value=searchedTerms.category.id
+        onChange=(action "onChangeCategory")
+      }}
     </div>
   </div>
 </div>
@@ -47,7 +50,9 @@
           allowCreate=false
           filterPlaceholder=null
           everyTag=true
-          unlimitedTagCount=true}}
+          unlimitedTagCount=true
+          onChange=(action (mut searchedTerms.tags))
+        }}
       <section class="field">
           <label>{{ input type="checkbox" class="all-tags" checked=searchedTerms.special.all_tags}} {{i18n "search.advanced.filters.all_tags"}} </label>
       </section>
@@ -68,13 +73,27 @@
           <label>{{input type="checkbox" class="in-seen" checked=searchedTerms.special.in.seen}} {{i18n "search.advanced.filters.seen"}}</label>
         </section>
       {{/if}}
-      {{combo-box id="in" valueAttribute="value" content=inOptions value=searchedTerms.in none="user.locale.any"}}
+      {{combo-box
+        id="in"
+        valueProperty="value"
+        content=inOptions
+        value=searchedTerms.in
+        none="user.locale.any"
+        onChange=(action (mut searchedTerms.in))
+      }}
     </div>
   </div>
   <div class="control-group pull-left">
     <label class="control-label" for="search-status-options">{{i18n "search.advanced.statuses.label"}}</label>
     <div class="controls">
-      {{combo-box id="status" valueAttribute="value" content=statusOptions value=searchedTerms.status none="user.locale.any"}}
+      {{combo-box
+        id="status"
+        valueProperty="value"
+        content=statusOptions
+        value=searchedTerms.status
+        none="user.locale.any"
+        onChange=(action (mut searchedTerms.status))
+      }}
     </div>
   </div>
 </div>
@@ -83,8 +102,18 @@
   <div class="control-group pull-left">
     <label class="control-label" for="search-post-date">{{i18n "search.advanced.post.time.label"}}</label>
     <div class="controls full-search-dates">
-      {{combo-box id="postTime" valueAttribute="value" content=postTimeOptions value=searchedTerms.time.when}}
-      {{date-picker value=searchedTerms.time.days id="search-post-date"}}
+      {{combo-box
+        id="postTime"
+        valueProperty="value"
+        content=postTimeOptions
+        value=searchedTerms.time.when
+        onChange=(action "onChangeWhenTime")
+      }}
+      {{date-input
+        date=searchedTerms.time.days
+        onChange=(action "onChangeWhenDate")
+        id="search-post-date"
+      }}
     </div>
   </div>
   <div class="control-group pull-left">
diff --git a/app/assets/javascripts/discourse/templates/components/shared-draft-controls.hbs b/app/assets/javascripts/discourse/templates/components/shared-draft-controls.hbs
index 0f458144831..23b2d45ae28 100644
--- a/app/assets/javascripts/discourse/templates/components/shared-draft-controls.hbs
+++ b/app/assets/javascripts/discourse/templates/components/shared-draft-controls.hbs
@@ -8,7 +8,8 @@
       <label>{{i18n "shared_drafts.destination_category"}}</label>
       {{category-chooser
         value=topic.destination_category_id
-        onChooseCategory=(action "updateDestinationCategory")}}
+        onChange=(action "updateDestinationCategory")
+      }}
     </div>
 
     <div class='publish-field'>
diff --git a/app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs b/app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs
index 32483ceb611..67f890abd2a 100644
--- a/app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs
+++ b/app/assets/javascripts/discourse/templates/components/topic-footer-buttons.hbs
@@ -54,7 +54,10 @@
 </div>
 
 {{#if showNotificationsButton}}
-  {{topic-notifications-button notificationLevel=topic.details.notification_level topic=topic}}
+  {{topic-notifications-button
+    notificationLevel=topic.details.notification_level
+    topic=topic
+  }}
 {{/if}}
 
 {{plugin-outlet name="after-topic-footer-buttons"
diff --git a/app/assets/javascripts/discourse/templates/components/user-fields/dropdown.hbs b/app/assets/javascripts/discourse/templates/components/user-fields/dropdown.hbs
index 7544439e479..81edab075f8 100644
--- a/app/assets/javascripts/discourse/templates/components/user-fields/dropdown.hbs
+++ b/app/assets/javascripts/discourse/templates/components/user-fields/dropdown.hbs
@@ -1,6 +1,12 @@
 <label class="control-label" for="{{concat 'user-' elementId}}">{{{field.name}}} {{#if field.required}}<span class='required'>*</span>{{/if}}
 </label>
 <div class='controls'>
-  {{combo-box id=(concat 'user-' elementId) content=field.options value=value none=noneLabel}}
+  {{combo-box
+    id=(concat 'user-' elementId)
+    content=field.options
+    value=value
+    none=noneLabel
+    onChange=(action (mut value))
+  }}
   <div class="instructions">{{{field.description}}}</div>
 </div>
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 4a5a1789462..0f11a312cd3 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -73,16 +73,28 @@
                   {{#if model.showCategoryChooser}}
                     <div class="category-input">
                       {{category-chooser
-                        fullWidthOnMobile=true
                         value=model.categoryId
-                        scopedCategoryId=scopedCategoryId
+                        tabindex="3"
+                        onChange=(action (mut model.categoryId))
                         isDisabled=disableCategoryChooser
-                        tabindex="3"}}
+                        options=(hash
+                          scopedCategoryId=scopedCategoryId
+                        )
+                      }}
                       {{popup-input-tip validation=categoryValidation}}
                     </div>
                   {{/if}}
                   {{#if canEditTags}}
-                    {{mini-tag-chooser tags=model.tags tabindex="4" categoryId=model.categoryId minimum=model.minimumRequiredTags isDisabled=disableTagsChooser}}
+                    {{mini-tag-chooser
+                      value=model.tags
+                      tabindex=4
+                      isDisabled=disableTagsChooser
+                      onChange=(action (mut model.tags))
+                      options=(hash
+                        categoryId=model.categoryId
+                        minimum=model.minimumRequiredTags
+                      )
+                    }}
                     {{popup-input-tip validation=tagValidation}}
                   {{/if}}
                 </div>
diff --git a/app/assets/javascripts/discourse/templates/full-page-search.hbs b/app/assets/javascripts/discourse/templates/full-page-search.hbs
index 9d5e739cab3..56082d42ce9 100644
--- a/app/assets/javascripts/discourse/templates/full-page-search.hbs
+++ b/app/assets/javascripts/discourse/templates/full-page-search.hbs
@@ -55,7 +55,12 @@
           <span class='desc'>
             {{i18n "search.sort_by"}}
           </span>
-          {{combo-box value=sortOrder content=sortOrders castInteger=true}}
+          {{combo-box
+            value=sortOrder
+            content=sortOrders
+            castInteger=true
+            onChange=(action (mut sortOrder))
+          }}
         </div>
       </div>
     {{/if}}
@@ -194,12 +199,18 @@
     {{#if site.mobileView}}
       {{#if expanded}}
         <div class="search-advanced-filters">
-          {{search-advanced-options searchTerm=searchTerm isExpanded=expanded}}
+          {{search-advanced-options
+            searchTerm=searchTerm
+            isExpanded=expanded
+          }}
         </div>
       {{/if}}
     {{else}}
       <div class="search-advanced-filters">
-        {{search-advanced-options searchTerm=searchTerm isExpanded=true}}
+        {{search-advanced-options
+          searchTerm=searchTerm
+          isExpanded=true
+        }}
 
         {{d-button
           label="submit"
diff --git a/app/assets/javascripts/discourse/templates/group-index.hbs b/app/assets/javascripts/discourse/templates/group-index.hbs
index a29fc281b6f..01393c0dfa1 100644
--- a/app/assets/javascripts/discourse/templates/group-index.hbs
+++ b/app/assets/javascripts/discourse/templates/group-index.hbs
@@ -63,11 +63,13 @@
             <td>
               {{#if canManageGroup}}
                 {{group-member-dropdown
-                    removeMember=(action "removeMember")
-                    makeOwner=(action "makeOwner")
-                    removeOwner=(action "removeOwner")
-                    member=m
-                    group=model}}
+                  removeMember=(action "removeMember")
+                  makeOwner=(action "makeOwner")
+                  removeOwner=(action "removeOwner")
+                  member=m
+                  group=model
+                  onChange=(action "actOnGroup" m)
+                }}
               {{/if}}
               {{!-- group parameter is used by plugins --}}
             </td>
diff --git a/app/assets/javascripts/discourse/templates/groups/index.hbs b/app/assets/javascripts/discourse/templates/groups/index.hbs
index 64893e5c326..21cbe557a91 100644
--- a/app/assets/javascripts/discourse/templates/groups/index.hbs
+++ b/app/assets/javascripts/discourse/templates/groups/index.hbs
@@ -12,12 +12,16 @@
           placeholderKey="groups.index.all"
           class="groups-header-filters-name no-blur"}}
 
-      {{combo-box value=type
-                  content=types
-                  clearable=true
-                  allowAutoSelectFirst=false
-                  noneLabel="groups.index.filter"
-                  class="groups-header-filters-type"}}
+      {{combo-box
+        value=type
+        content=types
+        class="groups-header-filters-type"
+        onChange=(action (mut type))
+        options=(hash
+          clearable=true
+          none="groups.index.filter"
+        )
+      }}
     </div>
   </div>
 
diff --git a/app/assets/javascripts/discourse/templates/mobile/group-index.hbs b/app/assets/javascripts/discourse/templates/mobile/group-index.hbs
index 8bf3d5207c7..3101a84429f 100644
--- a/app/assets/javascripts/discourse/templates/mobile/group-index.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/group-index.hbs
@@ -7,9 +7,7 @@
 <div class="group-members-manage">
   {{#if canManageGroup}}
     {{#if currentUser.admin}}
-      {{group-members-dropdown
-        showAddMembersModal=(route-action "showAddMembersModal")
-        showBulkAddModal=(route-action "showBulkAddModal")}}
+      {{group-members-dropdown onChange=(action "groupMembersDropdown")}}
     {{else}}
       {{d-button
           icon="plus"
diff --git a/app/assets/javascripts/discourse/templates/mobile/users.hbs b/app/assets/javascripts/discourse/templates/mobile/users.hbs
index 8cdd3fc7a1c..776409d6b52 100644
--- a/app/assets/javascripts/discourse/templates/mobile/users.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/users.hbs
@@ -4,7 +4,7 @@
       {{plugin-outlet name="users-top" connectorTagName='div' args=(hash model=model)}}
 
       <div class='clearfix user-controls'>
-        {{period-chooser period=period}}
+        {{period-chooser period=period onChange=(action (mut period))}}
         {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
       </div>
 
diff --git a/app/assets/javascripts/discourse/templates/modal/bookmark.hbs b/app/assets/javascripts/discourse/templates/modal/bookmark.hbs
index ff1800cdcd3..c975f699c84 100644
--- a/app/assets/javascripts/discourse/templates/modal/bookmark.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/bookmark.hbs
@@ -24,17 +24,17 @@
       {{#if userHasTimezoneSet}}
         {{#tap-tile-grid activeTile=selectedReminderType as |grid|}}
           {{#if usingMobileDevice}}
-            <!-- {{tap-tile icon="desktop" text=(i18n "bookmarks.reminders.at_desktop") tileId=reminderTypes.AT_DESKTOP activeTile=grid.activeTile onSelect=(action "selectReminderType")}} -->
+            <!-- {{tap-tile icon="desktop" text=(i18n "bookmarks.reminders.at_desktop") tileId=reminderTypes.AT_DESKTOP activeTile=grid.activeTile onChange=(action "selectReminderType")}} -->
           {{/if}}
 
           {{#if showLaterToday}}
-            {{tap-tile icon="far-moon" text=laterTodayFormatted tileId=reminderTypes.LATER_TODAY activeTile=grid.activeTile onSelect=(action "selectReminderType")}}
+            {{tap-tile icon="far-moon" text=laterTodayFormatted tileId=reminderTypes.LATER_TODAY activeTile=grid.activeTile onChange=(action "selectReminderType")}}
           {{/if}}
-          {{tap-tile icon="briefcase" text=nextBusinessDayFormatted tileId=reminderTypes.NEXT_BUSINESS_DAY activeTile=grid.activeTile onSelect=(action "selectReminderType")}}
-          {{tap-tile icon="far-sun" text=tomorrowFormatted tileId=reminderTypes.TOMORROW activeTile=grid.activeTile onSelect=(action "selectReminderType")}}
-          {{tap-tile icon="far-clock" text=nextWeekFormatted tileId=reminderTypes.NEXT_WEEK activeTile=grid.activeTile onSelect=(action "selectReminderType")}}
-          {{tap-tile icon="far-calendar-plus" text=nextMonthFormatted tileId=reminderTypes.NEXT_MONTH activeTile=grid.activeTile onSelect=(action "selectReminderType")}}
-          <!-- {{tap-tile icon="calendar-alt" text=(I18n "bookmarks.reminders.custom") tileId=reminderTypes.CUSTOM activeTile=grid.activeTile onSelect=(action "selectReminderType")}} -->
+          {{tap-tile icon="briefcase" text=nextBusinessDayFormatted tileId=reminderTypes.NEXT_BUSINESS_DAY activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+          {{tap-tile icon="far-sun" text=tomorrowFormatted tileId=reminderTypes.TOMORROW activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+          {{tap-tile icon="far-clock" text=nextWeekFormatted tileId=reminderTypes.NEXT_WEEK activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+          {{tap-tile icon="far-calendar-plus" text=nextMonthFormatted tileId=reminderTypes.NEXT_MONTH activeTile=grid.activeTile onChange=(action "selectReminderType")}}
+          <!-- {{tap-tile icon="calendar-alt" text=(I18n "bookmarks.reminders.custom") tileId=reminderTypes.CUSTOM activeTile=grid.activeTile onChange=(action "selectReminderType")}} -->
         {{/tap-tile-grid}}
       {{else}}
         <div class="alert alert-info">{{{i18n "bookmarks.no_timezone" basePath=basePath }}}</div>
diff --git a/app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs b/app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs
index 8726b3ff001..005b266389a 100644
--- a/app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/bulk-change-category.hbs
@@ -1,6 +1,11 @@
 <p>{{i18n "topics.bulk.choose_new_category"}}</p>
 
-<p>{{category-chooser value=newCategoryId}}</p>
+<p>
+  {{category-chooser
+    value=newCategoryId
+    onChange=(action (mut newCategoryId))
+  }}
+</p>
 
 {{#conditional-loading-spinner condition=loading}}
   {{d-button action=(action "changeCategory") label="topics.bulk.change_category"}}
diff --git a/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs b/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs
index f9e542574e2..d49178a6b49 100644
--- a/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs
@@ -11,7 +11,7 @@
     {{date-picker-past
       value=(unbound date)
       containerId="date-container"
-      onSelect=(action (mut date))}}
+      onChange=(action (mut date))}}
 
     {{input type="time" value=time}}
   </form>
diff --git a/app/assets/javascripts/discourse/templates/modal/convert-to-public-topic.hbs b/app/assets/javascripts/discourse/templates/modal/convert-to-public-topic.hbs
index b13804bb0b4..66d01ec2b42 100644
--- a/app/assets/javascripts/discourse/templates/modal/convert-to-public-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/convert-to-public-topic.hbs
@@ -3,7 +3,10 @@
   <div class='instructions'>
     {{i18n "topic.make_public.choose_category"}}
   </div>
-  {{category-chooser value=publicCategoryId}}
+  {{category-chooser
+    value=publicCategoryId
+    onChange=(action (mut publicCategoryId))
+  }}
 
 {{/d-modal-body}}
 
diff --git a/app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs b/app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs
index 95fee49f5b3..71d74321139 100644
--- a/app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/edit-topic-timer.hbs
@@ -15,7 +15,10 @@
     topic=model
     topicTimer=topicTimer
     timerTypes=selections
-    updateTime=updateTime}}
+    updateTime=updateTime
+    onChangeStatusType=(action "onChangeStatusType")
+    onChangeUpdateTime=(action "onChangeUpdateTime")
+  }}
 {{/d-modal-body}}
 
 <div class="modal-footer">
diff --git a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
index 2423725abfb..1e798af2860 100644
--- a/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/feature-topic.hbs
@@ -45,7 +45,9 @@
               class="pin-until"
               includeFarFuture=true
               clearable=true
-              input=model.pinnedInCategoryUntil}}
+              input=model.pinnedInCategoryUntil
+              onChangeInput=(action (mut model.pinnedInCategoryUntil))
+            }}
             {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
           </p>
         {{else}}
@@ -56,7 +58,9 @@
               class="pin-until"
               includeFarFuture=true
               clearable=true
-              input=model.pinnedInCategoryUntil}}
+              input=model.pinnedInCategoryUntil
+              onChangeInput=(action (mut model.pinnedInCategoryUntil))
+            }}
             {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
           </p>
         {{/if}}
@@ -89,7 +93,9 @@
               class="pin-until"
               includeFarFuture=true
               clearable=true
-              input=model.pinnedGloballyUntil}}
+              input=model.pinnedGloballyUntil
+              onChangeInput=(action (mut model.pinnedGloballyUntil))
+            }}
             {{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
           </p>
         {{else}}
@@ -100,7 +106,9 @@
               class="pin-until"
               includeFarFuture=true
               clearable=true
-              input=model.pinnedGloballyUntil}}
+              input=model.pinnedGloballyUntil
+              onChangeInput=(action (mut model.pinnedGloballyUntil))
+            }}
             {{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
           </p>
         {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/modal/grant-badge.hbs b/app/assets/javascripts/discourse/templates/modal/grant-badge.hbs
index 1f27bc5c346..985c7fe1f15 100644
--- a/app/assets/javascripts/discourse/templates/modal/grant-badge.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/grant-badge.hbs
@@ -3,7 +3,15 @@
     {{#if noGrantableBadges}}
       <p>{{i18n 'admin.badges.no_badges'}}</p>
     {{else}}
-      <p>{{combo-box filterable=true value=selectedBadgeId content=grantableBadges none="badges.none"}}</p>
+      <p>
+        {{combo-box
+          filterable=true
+          value=selectedBadgeId
+          content=grantableBadges
+          none="badges.none"
+          onChange=(action (mut selectedBadgeId))
+        }}
+      </p>
     {{/if}}
   {{/conditional-loading-spinner}}
 {{/d-modal-body}}
diff --git a/app/assets/javascripts/discourse/templates/modal/ignore-duration-with-username.hbs b/app/assets/javascripts/discourse/templates/modal/ignore-duration-with-username.hbs
index 9d3dadbd711..cb1ef4d903a 100644
--- a/app/assets/javascripts/discourse/templates/modal/ignore-duration-with-username.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/ignore-duration-with-username.hbs
@@ -8,11 +8,13 @@
   </div>
   {{future-date-input
     label="user.user_notifications.ignore_duration_when"
-    input=ignoredUntil
+    input=(readonly ignoredUntil)
     includeWeekend=true
     includeDateTime=false
     includeMidFuture=true
-    includeFarFuture=false}}
+    includeFarFuture=false
+    onChangeInput=(action (mut ignoredUntil))
+  }}
   <p>{{i18n "user.user_notifications.ignore_duration_note"}}</p>
 {{/d-modal-body}}
 
diff --git a/app/assets/javascripts/discourse/templates/modal/ignore-duration.hbs b/app/assets/javascripts/discourse/templates/modal/ignore-duration.hbs
index 79cd89aca7b..33db2479db7 100644
--- a/app/assets/javascripts/discourse/templates/modal/ignore-duration.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/ignore-duration.hbs
@@ -5,7 +5,9 @@
     includeWeekend=true
     includeDateTime=false
     includeMidFuture=true
-    includeFarFuture=false}}
+    includeFarFuture=false
+    onChangeInput=(action (mut ignoredUntil))
+  }}
   <p>{{i18n "user.user_notifications.ignore_duration_note"}}</p>
 {{/d-modal-body}}
 
diff --git a/app/assets/javascripts/discourse/templates/modal/move-to-topic.hbs b/app/assets/javascripts/discourse/templates/modal/move-to-topic.hbs
index 0574ff843f1..893d9342460 100644
--- a/app/assets/javascripts/discourse/templates/modal/move-to-topic.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/move-to-topic.hbs
@@ -78,7 +78,11 @@
           {{text-field value=topicName placeholderKey="composer.title_placeholder" elementId='split-topic-name'}}
 
           <label>{{i18n 'categories.category'}}</label>
-          {{category-chooser value=categoryId class="small"}}
+          {{category-chooser
+            value=categoryId
+            class="small"
+            onChange=(action (mut categoryId))
+          }}
           {{#if canAddTags}}
             <label>{{i18n 'tagging.tags'}}</label>
             {{tag-chooser tags=tags filterable=true categoryId=categoryId}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/account.hbs b/app/assets/javascripts/discourse/templates/preferences/account.hbs
index 292af19e4d4..1e7ea80d959 100644
--- a/app/assets/javascripts/discourse/templates/preferences/account.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/account.hbs
@@ -144,7 +144,9 @@
       {{combo-box
         value=newTitleInput
         content=model.availableTitles
-        none="user.title.none"}}
+        none="user.title.none"
+        onChange=(action (mut newTitleInput))
+      }}
     </div>
   </div>
 {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/categories.hbs b/app/assets/javascripts/discourse/templates/preferences/categories.hbs
index 671242a16a9..d9a2dbf913a 100644
--- a/app/assets/javascripts/discourse/templates/preferences/categories.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/categories.hbs
@@ -6,7 +6,11 @@
     {{#if canSee}}
       <a class="show-tracking" href="{{unbound model.watchingTopicsPath}}">{{i18n 'user.tracked_topics_link'}}</a>
     {{/if}}
-    {{category-selector categories=model.watchedCategories blacklist=selectedCategories}}
+    {{category-selector
+      categories=model.watchedCategories
+      blacklist=selectedCategories
+      onChange=(action (mut model.watchedCategories))
+    }}
   </div>
   <div class="instructions">{{i18n 'user.watched_categories_instructions'}}</div>
 
@@ -16,14 +20,22 @@
     {{#if canSee}}
       <a class="show-tracking" href="{{unbound model.trackingTopicsPath}}">{{i18n 'user.tracked_topics_link'}}</a>
     {{/if}}
-    {{category-selector categories=model.trackedCategories blacklist=selectedCategories}}
+    {{category-selector
+      categories=model.trackedCategories
+      blacklist=selectedCategories
+      onChange=(action (mut model.trackedCategories))
+    }}
   </div>
   <div class="instructions">{{i18n 'user.tracked_categories_instructions'}}</div>
 
 
   <div class="controls tracking-controls">
     <label>{{d-icon "d-watching-first"}} {{i18n 'user.watched_first_post_categories'}}</label>
-    {{category-selector categories=model.watchedFirstPostCategories blacklist=selectedCategories}}
+    {{category-selector
+      categories=model.watchedFirstPostCategories
+      blacklist=selectedCategories
+      onChange=(action (mut model.watchedFirstPostCategories))
+    }}
   </div>
   <div class="instructions">{{i18n 'user.watched_first_post_categories_instructions'}}</div>
 
@@ -33,7 +45,11 @@
       {{#if canSee}}
         <a class="show-tracking" href="{{unbound model.mutedTopicsPath}}">{{i18n 'user.tracked_topics_link'}}</a>
       {{/if}}
-      {{category-selector categories=model.mutedCategories blacklist=selectedCategories}}
+      {{category-selector
+        categories=model.mutedCategories
+        blacklist=selectedCategories
+        onChange=(action (mut model.mutedCategories))
+      }}
     </div>
     <div class="instructions">{{i18n (if hideMutedTags 'user.muted_categories_instructions' 'user.muted_categories_instructions_dont_hide')}}</div>
   {{/unless}}
diff --git a/app/assets/javascripts/discourse/templates/preferences/emails.hbs b/app/assets/javascripts/discourse/templates/preferences/emails.hbs
index 780a64dd2ce..568aa093a6b 100644
--- a/app/assets/javascripts/discourse/templates/preferences/emails.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/emails.hbs
@@ -10,10 +10,13 @@
 
   <div class='controls controls-dropdown'>
     <label for="user-email-messages-level">{{i18n 'user.email_messages_level'}}</label>
-    {{combo-box valueAttribute="value"
-                content=emailLevelOptions
-                value=model.user_option.email_messages_level
-                id="user-email-messages-level"}}
+    {{combo-box
+      valueProperty="value"
+      content=emailLevelOptions
+      value=model.user_option.email_messages_level
+      id="user-email-messages-level"
+      onChange=(action (mut model.user_option.email_messages_level))
+    }}
     {{#if emailMessagesLevelAway}}
       <div class='instructions'>{{emailFrequencyInstructions}}</div>
     {{/if}}
@@ -21,10 +24,13 @@
 
   <div class='controls controls-dropdown'>
     <label for="user-email-level">{{i18n 'user.email_level.title'}}</label>
-    {{combo-box valueAttribute="value"
-                content=emailLevelOptions
-                value=model.user_option.email_level
-                id="user-email-level"}}
+    {{combo-box
+      valueProperty="value"
+      content=emailLevelOptions
+      value=model.user_option.email_level
+      id="user-email-level"
+      onChange=(action (mut model.user_option.email_level))
+    }}
     {{#if emailLevelAway}}
       <div class='instructions'>{{emailFrequencyInstructions}}</div>
     {{/if}}
@@ -32,7 +38,12 @@
 
   <div class='controls controls-dropdown'>
     <label>{{i18n 'user.email_previous_replies.title'}}</label>
-    {{combo-box valueAttribute="value" content=previousRepliesOptions value=model.user_option.email_previous_replies}}
+    {{combo-box
+      valueProperty="value"
+      content=previousRepliesOptions
+      value=model.user_option.email_previous_replies
+      onChange=(action (mut model.user_option.email_previous_replies))
+    }}
   </div>
   {{preference-checkbox labelKey="user.email_in_reply_to" checked=model.user_option.email_in_reply_to}}
 
@@ -45,7 +56,13 @@
     {{preference-checkbox labelKey="user.email_digests.title" disabled=model.user_option.mailing_list_mode checked=model.user_option.email_digests}}
     {{#if model.user_option.email_digests}}
       <div class='controls controls-dropdown'>
-        {{combo-box valueAttribute="value" filterable=true content=digestFrequencies value=model.user_option.digest_after_minutes}}
+        {{combo-box
+          valueProperty="value"
+          filterable=true
+          content=digestFrequencies
+          value=model.user_option.digest_after_minutes
+          onChange=(action (mut model.user_option.digest_after_minutes))
+        }}
       </div>
       {{preference-checkbox labelKey="user.include_tl0_in_digests" disabled=model.user_option.mailing_list_mode checked=model.user_option.include_tl0_in_digests}}
     {{/if}}
@@ -59,7 +76,12 @@
     <div class='instructions'>{{{i18n 'user.mailing_list_mode.instructions'}}}</div>
     {{#if model.user_option.mailing_list_mode}}
       <div class='controls controls-dropdown'>
-        {{combo-box valueAttribute="value" content=mailingListModeOptions value=model.user_option.mailing_list_mode_frequency}}
+        {{combo-box
+          valueProperty="value"
+          content=mailingListModeOptions
+          value=model.user_option.mailing_list_mode_frequency
+          onChange=(action (mut model.user_option.mailing_list_mode_frequency))
+        }}
       </div>
     {{/if}}
   </div>
diff --git a/app/assets/javascripts/discourse/templates/preferences/interface.hbs b/app/assets/javascripts/discourse/templates/preferences/interface.hbs
index 24d245b8c0b..7549831fb40 100644
--- a/app/assets/javascripts/discourse/templates/preferences/interface.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/interface.hbs
@@ -2,7 +2,11 @@
 <div class="control-group theme">
   <label class="control-label">{{i18n 'user.theme'}}</label>
   <div class="controls">
-    {{combo-box content=userSelectableThemes value=themeId}}
+    {{combo-box
+      content=userSelectableThemes
+      value=themeId
+      onChange=(action (mut themeId))
+    }}
   </div>
   {{#if showThemeSetDefault}}
     <div class="controls">
@@ -15,7 +19,12 @@
 <div class="control-group text-size">
   <label class="control-label">{{i18n 'user.text_size.title'}}</label>
   <div class="controls">
-    {{combo-box valueAttribute="value" content=textSizes value=textSize onSelect=(action "selectTextSize")}}
+    {{combo-box
+      valueProperty="value"
+      content=textSizes
+      value=textSize
+      onChange=(action "selectTextSize")
+    }}
   </div>
   {{#if showTextSetDefault}}
     <div class="controls">
@@ -28,7 +37,16 @@
   <div class="control-group pref-locale">
     <label class="control-label">{{i18n 'user.locale.title'}}</label>
     <div class="controls">
-      {{combo-box filterable=true valueAttribute="value" content=availableLocales value=model.locale none="user.locale.default"}}
+      {{combo-box
+        valueProperty="value"
+        content=availableLocales
+        value=model.locale
+        onChange=(action (mut model.locale))
+        options=(hash
+          filterable=true
+          none="user.locale.default"
+        )
+      }}
     </div>
     <div class='instructions'>
       {{i18n 'user.locale.instructions'}}
@@ -40,7 +58,12 @@
 <div class="control-group home">
   <label class="control-label">{{i18n 'user.home'}}</label>
   <div class="controls">
-    {{combo-box content=userSelectableHome valueAttribute="value" value=model.user_option.homepage_id}}
+    {{combo-box
+      content=userSelectableHome
+      valueProperty="value"
+      value=homepageId
+      onChange=(action (mut model.user_option.homepage_id))
+    }}
   </div>
 </div>
 
@@ -60,10 +83,13 @@
   {{preference-checkbox labelKey="user.dynamic_favicon" checked=model.user_option.dynamic_favicon  class="pref-dynamic-favicon"}}
   <div class='controls controls-dropdown pref-page-title'>
     <label for="user-email-level">{{i18n 'user.title_count_mode.title'}}</label>
-    {{combo-box valueAttribute="value"
-                content=titleCountModes
-                value=model.user_option.title_count_mode
-                id="user-title-count-mode"}}
+    {{combo-box
+      valueProperty="value"
+      content=titleCountModes
+      value=model.user_option.title_count_mode
+      id="user-title-count-mode"
+      onChange=(action (mut model.user_option.title_count_mode))
+    }}
   </div>
 </div>
 
diff --git a/app/assets/javascripts/discourse/templates/preferences/notifications.hbs b/app/assets/javascripts/discourse/templates/preferences/notifications.hbs
index e97b28d901b..089c5a01621 100644
--- a/app/assets/javascripts/discourse/templates/preferences/notifications.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/notifications.hbs
@@ -3,22 +3,43 @@
 
   <div class="controls controls-dropdown">
     <label>{{i18n 'user.new_topic_duration.label'}}</label>
-    {{combo-box class="duration" valueAttribute="value" content=considerNewTopicOptions value=model.user_option.new_topic_duration_minutes}}
+    {{combo-box
+      class="duration"
+      valueProperty="value"
+      content=considerNewTopicOptions
+      value=model.user_option.new_topic_duration_minutes
+      onChange=(action (mut model.user_option.new_topic_duration_minutes))
+    }}
   </div>
 
   <div class="controls controls-dropdown">
     <label>{{i18n 'user.auto_track_topics'}}</label>
-    {{combo-box valueAttribute="value" content=autoTrackDurations value=model.user_option.auto_track_topics_after_msecs}}
+    {{combo-box
+      valueProperty="value"
+      content=autoTrackDurations
+      value=model.user_option.auto_track_topics_after_msecs
+      onChange=(action (mut model.user_option.auto_track_topics_after_msecs))
+    }}
   </div>
 
   <div class="controls controls-dropdown">
     <label>{{i18n 'user.notification_level_when_replying'}}</label>
-    {{combo-box valueAttribute="value" content=notificationLevelsForReplying value=model.user_option.notification_level_when_replying}}
+    {{combo-box
+      valueProperty="value"
+      content=notificationLevelsForReplying
+      value=model.user_option.notification_level_when_replying
+      onChange=(action (mut model.user_option.notification_level_when_replying))
+    }}
   </div>
 
   <div class="controls controls-dropdown">
     <label>{{i18n 'user.like_notification_frequency.title'}}</label>
-    {{combo-box valueAttribute="value" content=likeNotificationFrequencies value=model.user_option.like_notification_frequency}}
+    {{combo-box
+      valueProperty="value"
+      content=likeNotificationFrequencies
+      value=model.user_option.like_notification_frequency
+      onChange=(action (mut model.user_option.like_notification_frequency))
+    }}
   </div>
 </div>
 
diff --git a/app/assets/javascripts/discourse/templates/preferences/profile.hbs b/app/assets/javascripts/discourse/templates/preferences/profile.hbs
index 47dbc7a143b..8db3932ba3d 100644
--- a/app/assets/javascripts/discourse/templates/preferences/profile.hbs
+++ b/app/assets/javascripts/discourse/templates/preferences/profile.hbs
@@ -9,7 +9,11 @@
 
 <div class="control-group pref-timezone">
   <label class="control-label">{{i18n 'user.timezone'}}</label>
-  {{timezone-input value=model.user_option.timezone onSelect=(action (mut model.user_option.timezone)) class="input-xxlarge"}}
+  {{timezone-input
+    value=model.user_option.timezone
+    onChange=(action (mut model.user_option.timezone))
+    class="input-xxlarge"
+  }}
 </div>
 
 <div class="control-group pref-location">
diff --git a/app/assets/javascripts/discourse/templates/review-index.hbs b/app/assets/javascripts/discourse/templates/review-index.hbs
index 277c7723f89..54f138f217f 100644
--- a/app/assets/javascripts/discourse/templates/review-index.hbs
+++ b/app/assets/javascripts/discourse/templates/review-index.hbs
@@ -19,7 +19,11 @@
   <div class='reviewable-filters'>
     <div class='reviewable-filter'>
       <label class='filter-label'>{{i18n "review.filters.status"}}</label>
-      {{combo-box value=filterStatus content=statuses}}
+      {{combo-box
+        value=filterStatus
+        content=statuses
+        onChange=(action (mut filterStatus))
+      }}
     </div>
 
     {{#if filtersExpanded}}
@@ -28,17 +32,30 @@
 
       <div class='reviewable-filter'>
         <label class='filter-label'>{{i18n "review.filters.type.title"}}</label>
-        {{combo-box value=filterType content=allTypes none="review.filters.type.all"}}
+        {{combo-box
+          value=filterType
+          content=allTypes
+          none="review.filters.type.all"
+          onChange=(action (mut filterType))
+        }}
       </div>
 
       <div class='reviewable-filter'>
         <label class='filter-label'>{{i18n "review.filters.priority.title"}}</label>
-        {{combo-box value=filterPriority content=priorities}}
+        {{combo-box
+          value=filterPriority
+          content=priorities
+          onChange=(action (mut filterPriority))
+        }}
       </div>
 
       <div class='reviewable-filter'>
         <label class='filter-label'>{{i18n "review.filters.category"}}</label>
-        {{category-chooser none="review.filters.all_categories" value=filterCategoryId}}
+        {{category-chooser
+          none="review.filters.all_categories"
+          value=filterCategoryId
+          onChange=(action (mut filterCategoryId))
+        }}
       </div>
 
       <div class='reviewable-filter topic-filter'>
@@ -65,7 +82,11 @@
 
       <div class='reviewable-filter sort-order'>
         {{i18n "review.order_by"}}
-        {{combo-box value=filterSortOrder content=sortOrders}}
+        {{combo-box
+          value=filterSortOrder
+          content=sortOrders
+          onChange=(action (mut filterSortOrder))
+        }}
       </div>
     {{/if}}
 
@@ -73,8 +94,8 @@
       {{d-button
         icon="sync"
         label="review.filters.refresh"
-
-        class="btn-primary refresh" action=(action "refresh")}}
+        class="btn-primary refresh"
+        action=(action "refresh")}}
 
       {{#if site.mobileView}}
         {{d-button
diff --git a/app/assets/javascripts/discourse/templates/review-settings.hbs b/app/assets/javascripts/discourse/templates/review-settings.hbs
index 2669a442d89..f798ca59c64 100644
--- a/app/assets/javascripts/discourse/templates/review-settings.hbs
+++ b/app/assets/javascripts/discourse/templates/review-settings.hbs
@@ -5,7 +5,11 @@
     <div class='reviewable-score-type'>
       <div class='title'>{{rst.title}}</div>
       <div class='field'>
-        {{combo-box value=rst.reviewable_priority content=settings.reviewable_priorities}}
+        {{combo-box
+          value=rst.reviewable_priority
+          content=settings.reviewable_priorities
+          onChange=(action (mut rst.reviewable_priority))
+        }}
       </div>
     </div>
   {{/each}}
diff --git a/app/assets/javascripts/discourse/templates/tags/show.hbs b/app/assets/javascripts/discourse/templates/tags/show.hbs
index 09a6722ce83..923dfb991f5 100644
--- a/app/assets/javascripts/discourse/templates/tags/show.hbs
+++ b/app/assets/javascripts/discourse/templates/tags/show.hbs
@@ -25,11 +25,12 @@
       </h2>
     {{/if}}
 
-
     {{#if tagNotification}}
       {{#unless additionalTags}}
-        {{tag-notifications-button action=(action "changeTagNotification")
-                                   notificationLevel=tagNotification.notification_level}}
+        {{tag-notifications-button
+          onChange=(action "changeTagNotificationLevel")
+          value=tagNotification.notification_level
+        }}
       {{/unless}}
     {{/if}}
 
diff --git a/app/assets/javascripts/discourse/templates/topic.hbs b/app/assets/javascripts/discourse/templates/topic.hbs
index bcc3184d82f..1bd7d80f974 100644
--- a/app/assets/javascripts/discourse/templates/topic.hbs
+++ b/app/assets/javascripts/discourse/templates/topic.hbs
@@ -24,16 +24,21 @@
             {{#if showCategoryChooser}}
               {{category-chooser
                 class="small"
-                value=(unbound buffered.category_id)
-                onSelectAny=(action "topicCategoryChanged")}}
+                value=buffered.category_id
+                onChange=(action "topicCategoryChanged")
+              }}
             {{/if}}
 
             {{#if canEditTags}}
               {{mini-tag-chooser
-                filterable=true
-                tags=(unbound buffered.tags)
-                categoryId=(unbound buffered.category_id)
-                onChangeTags=(action "topicTagsChanged")}}
+                value=buffered.tags
+                onChange=(action "topicTagsChanged")
+                options=(hash
+                  filterable=true
+                  categoryId=buffered.category_id
+                  filterable=true
+                )
+              }}
             {{/if}}
 
             {{plugin-outlet name="edit-topic" args=(hash model=model buffered=buffered)}}
diff --git a/app/assets/javascripts/discourse/templates/user.hbs b/app/assets/javascripts/discourse/templates/user.hbs
index 27409f093b3..4261b2ccef5 100644
--- a/app/assets/javascripts/discourse/templates/user.hbs
+++ b/app/assets/javascripts/discourse/templates/user.hbs
@@ -52,7 +52,11 @@
                 </li>
                 {{#if canMuteOrIgnoreUser}}
                   <li>
-                    {{user-notifications-dropdown user=model updateNotificationLevel=(action "updateNotificationLevel")}}
+                    {{user-notifications-dropdown
+                      user=model
+                      value=userNotificationLevel
+                      updateNotificationLevel=(action "updateNotificationLevel")
+                    }}
                   </li>
                 {{/if}}
               {{/if}}
diff --git a/app/assets/javascripts/discourse/templates/user/messages.hbs b/app/assets/javascripts/discourse/templates/user/messages.hbs
index 158e1fac299..3dc34f67a15 100644
--- a/app/assets/javascripts/discourse/templates/user/messages.hbs
+++ b/app/assets/javascripts/discourse/templates/user/messages.hbs
@@ -101,7 +101,10 @@
     {{/if}}
 
     {{#if isGroup}}
-      {{group-notifications-button value=group.group_user.notification_level group=group user=model}}
+      {{group-notifications-button
+        value=group.group_user.notification_level
+        onChange=(action "changeGroupNotificationLevel")
+      }}
     {{/if}}
 </div>
 
diff --git a/app/assets/javascripts/discourse/templates/users.hbs b/app/assets/javascripts/discourse/templates/users.hbs
index f384e8a580c..6a44c7ce1b0 100644
--- a/app/assets/javascripts/discourse/templates/users.hbs
+++ b/app/assets/javascripts/discourse/templates/users.hbs
@@ -4,7 +4,7 @@
       <div class='directory'>
         {{plugin-outlet name="users-top" connectorTagName='div' args=(hash model=model)}}
         <div class='clearfix'>
-          {{period-chooser period=period}}
+          {{period-chooser period=period onChange=(action (mut period))}}
           {{text-field value=nameInput placeholderKey="directory.filter_name" class="filter-name no-blur"}}
         </div>
 
diff --git a/app/assets/javascripts/discourse/widgets/component-connector.js.es6 b/app/assets/javascripts/discourse/widgets/component-connector.js.es6
index db53cc314f2..6221d61f97d 100644
--- a/app/assets/javascripts/discourse/widgets/component-connector.js.es6
+++ b/app/assets/javascripts/discourse/widgets/component-connector.js.es6
@@ -23,16 +23,16 @@ export default class ComponentConnector {
         .lookupFactory(`component:${componentName}`)
         .create(opts);
 
-      // component connector is not triggering didReceiveAttrs
-      // so we make sure to compute the component attrs
-      if (view.selectKitComponent) {
-        view._compute();
-      }
-
       if (setOwner) {
         setOwner(view, getOwner(mounted));
       }
 
+      // component connector is not triggering didReceiveAttrs
+      // we force it for selectKit components
+      if (view.selectKit) {
+        view.didReceiveAttrs();
+      }
+
       mounted._connected.push(view);
       view.renderer.appendTo(view, $elem[0]);
     });
diff --git a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6 b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
index 1455e5cc098..7342e8f9557 100644
--- a/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
+++ b/app/assets/javascripts/discourse/widgets/topic-timeline.js.es6
@@ -386,7 +386,15 @@ createWidget("timeline-footer-controls", {
           {
             value: notificationLevel,
             topic,
-            showFullTitle: false
+            options: {
+              showFullTitle: false,
+              placement: "bottom-end"
+            },
+            onChange: newNotificationLevel => {
+              if (newNotificationLevel !== notificationLevel) {
+                topic.details.updateNotifications(newNotificationLevel);
+              }
+            }
           },
           ["value"]
         )
diff --git a/app/assets/javascripts/select-kit/components/admin-group-selector.js.es6 b/app/assets/javascripts/select-kit/components/admin-group-selector.js.es6
index 2d99404c0af..1b02a45d280 100644
--- a/app/assets/javascripts/select-kit/components/admin-group-selector.js.es6
+++ b/app/assets/javascripts/select-kit/components/admin-group-selector.js.es6
@@ -1,34 +1,9 @@
 import MultiSelectComponent from "select-kit/components/multi-select";
-import discourseComputed from "discourse-common/utils/decorators";
-
-const { makeArray } = Ember;
 
 export default MultiSelectComponent.extend({
   pluginApiIdentifiers: ["admin-group-selector"],
-  classNames: "admin-group-selector",
-  selected: null,
-  available: null,
-  allowAny: false,
-  buffer: null,
-
-  @discourseComputed("buffer")
-  values(buffer) {
-    return buffer === null
-      ? makeArray(this.selected).map(s => this.valueForContentItem(s))
-      : buffer;
-  },
-
-  computeContent() {
-    return makeArray(this.available);
-  },
-
-  computeContentItem(contentItem, name) {
-    let computedContentItem = this._super(contentItem, name);
-    computedContentItem.locked = contentItem.automatic;
-    return computedContentItem;
-  },
-
-  mutateValues(values) {
-    this.set("buffer", values);
+  classNames: ["admin-group-selector"],
+  selectKitOptions: {
+    allowAny: false
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/categories-admin-dropdown.js.es6 b/app/assets/javascripts/select-kit/components/categories-admin-dropdown.js.es6
index 5b1dc108e07..f56b2705239 100644
--- a/app/assets/javascripts/select-kit/components/categories-admin-dropdown.js.es6
+++ b/app/assets/javascripts/select-kit/components/categories-admin-dropdown.js.es6
@@ -1,20 +1,20 @@
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { computed } from "@ember/object";
+import { setting } from "discourse/lib/computed";
 
 export default DropdownSelectBoxComponent.extend({
   pluginApiIdentifiers: ["categories-admin-dropdown"],
-  classNames: "categories-admin-dropdown",
-  showFullTitle: false,
-  allowInitialValueMutation: false,
+  classNames: ["categories-admin-dropdown"],
+  fixedCateoryPositions: setting("fixed_category_positions"),
 
-  init() {
-    this._super(...arguments);
-
-    this.headerIcon = ["bars"];
+  selectKitOptions: {
+    icon: "bars",
+    showFullTitle: false,
+    autoFilterable: false,
+    filterable: false
   },
 
-  autoHighlight() {},
-
-  computeContent() {
+  content: computed(function() {
     const items = [
       {
         id: "create",
@@ -24,8 +24,7 @@ export default DropdownSelectBoxComponent.extend({
       }
     ];
 
-    const includeReorder = this.get("siteSettings.fixed_category_positions");
-    if (includeReorder) {
+    if (this.fixedCateoryPositions) {
       items.push({
         id: "reorder",
         name: I18n.t("categories.reorder.title"),
@@ -35,9 +34,5 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return items;
-  },
-
-  mutateValue(value) {
-    this.get(value)();
-  }
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/category-chooser.js.es6 b/app/assets/javascripts/select-kit/components/category-chooser.js.es6
index 07872a02ce5..9b475bc5749 100644
--- a/app/assets/javascripts/select-kit/components/category-chooser.js.es6
+++ b/app/assets/javascripts/select-kit/components/category-chooser.js.es6
@@ -1,145 +1,150 @@
 import ComboBoxComponent from "select-kit/components/combo-box";
-import discourseComputed from "discourse-common/utils/decorators";
 import PermissionType from "discourse/models/permission-type";
 import Category from "discourse/models/category";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
-const { get, isPresent, isEmpty } = Ember;
+import { computed, set } from "@ember/object";
+import { isNone } from "@ember/utils";
+import { setting } from "discourse/lib/computed";
 
 export default ComboBoxComponent.extend({
   pluginApiIdentifiers: ["category-chooser"],
-  classNames: "category-chooser",
-  filterable: true,
-  castInteger: true,
-  allowUncategorized: false,
-  rowComponent: "category-row",
-  noneRowComponent: "none-category-row",
-  allowSubCategories: true,
-  permissionType: PermissionType.FULL,
+  classNames: ["category-chooser"],
+  allowUncategorizedTopics: setting("allow_uncategorized_topics"),
+  fixedCategoryPositionsOnCreate: setting("fixed_category_positions_on_create"),
 
-  init() {
-    this._super(...arguments);
-
-    this.rowComponentOptions.setProperties({
-      allowUncategorized: this.allowUncategorized
-    });
+  selectKitOptions: {
+    filterable: true,
+    allowUncategorized: false,
+    allowSubCategories: true,
+    permissionType: PermissionType.FULL,
+    excludeCategoryId: null,
+    scopedCategoryId: null
   },
 
-  filterComputedContent(computedContent, computedValue, filter) {
-    if (isEmpty(filter)) {
-      return computedContent;
-    }
+  modifyComponentForRow() {
+    return "category-row";
+  },
 
-    if (this.scopedCategoryId) {
-      computedContent = this.categoriesByScope(this.scopedCategoryId).map(c =>
-        this.computeContentItem(c)
+  modifyNoSelection() {
+    if (!isNone(this.selectKit.options.none)) {
+      const none = this.selectKit.options.none;
+      const isString = typeof none === "string";
+      return this.defaultItem(
+        null,
+        I18n.t(
+          isString ? this.selectKit.options.none : "category.none"
+        ).htmlSafe()
       );
-    }
-
-    const _matchFunction = (f, text) => {
-      return this._normalize(text).indexOf(f) > -1;
-    };
-
-    return computedContent.filter(c => {
-      const category = Category.findById(get(c, "value"));
-      const text = get(c, "name");
-      if (category && category.get("parentCategory")) {
-        const categoryName = category.get("parentCategory.name");
-        return (
-          _matchFunction(filter, text) || _matchFunction(filter, categoryName)
-        );
-      } else {
-        return _matchFunction(filter, text);
-      }
-    });
-  },
-
-  @discourseComputed("rootNone", "rootNoneLabel")
-  none(rootNone, rootNoneLabel) {
-    if (isPresent(rootNone)) {
-      return rootNoneLabel || "category.none";
     } else if (
-      this.siteSettings.allow_uncategorized_topics ||
-      this.allowUncategorized
+      this.allowUncategorizedTopics ||
+      this.selectKit.options.allowUncategorized
     ) {
       return Category.findUncategorized();
     } else {
-      return "category.choose";
+      return this.defaultItem(null, I18n.t("category.choose").htmlSafe());
     }
   },
 
-  computeHeaderContent() {
-    let content = this._super(...arguments);
+  modifySelection(content) {
+    if (this.selectKit.hasSelection) {
+      const category = Category.findById(this.value);
 
-    if (this.hasSelection) {
-      const category = Category.findById(content.value);
-      content.label = categoryBadgeHTML(category, {
-        link: false,
-        hideParent: !!category.parent_category_id,
-        allowUncategorized: true,
-        recursive: true
-      }).htmlSafe();
+      set(
+        content,
+        "label",
+        categoryBadgeHTML(category, {
+          link: false,
+          hideParent: !!category.parent_category_id,
+          allowUncategorized: true,
+          recursive: true
+        }).htmlSafe()
+      );
     }
 
     return content;
   },
 
-  didSelect(computedContentItem) {
-    if (this.attrs.onChooseCategory) {
-      this.attrs.onChooseCategory(computedContentItem.originalContent);
+  search(filter) {
+    if (filter) {
+      let content = this.content;
+
+      if (this.selectKit.options.scopedCategoryId) {
+        content = this.categoriesByScope(
+          this.selectKit.options.scopedCategoryId
+        );
+      }
+
+      return content.filter(item => {
+        const category = Category.findById(this.getValue(item));
+        const categoryName = this.getName(item);
+
+        if (category && category.parentCategory) {
+          const parentCategoryName = this.getName(category.parentCategory);
+          return (
+            this._matchCategory(filter, categoryName) ||
+            this._matchCategory(filter, parentCategoryName)
+          );
+        } else {
+          return this._matchCategory(filter, categoryName);
+        }
+      });
+    } else {
+      return this.content;
     }
   },
 
-  didClearSelection() {
-    if (this.attrs.onChooseCategory) {
-      this.attrs.onChooseCategory(null);
-    }
-  },
-
-  computeContent() {
-    return this.categoriesByScope(this.scopedCategoryId);
-  },
+  content: computed("selectKit.options.scopedCategoryId", function() {
+    return this.categoriesByScope(this.selectKit.options.scopedCategoryId);
+  }),
 
   categoriesByScope(scopedCategoryId = null) {
-    const categories = Discourse.SiteSettings.fixed_category_positions_on_create
+    const categories = this.fixedCategoryPositionsOnCreate
       ? Category.list()
       : Category.listByActivity();
 
     if (scopedCategoryId) {
       const scopedCat = Category.findById(scopedCategoryId);
-      scopedCategoryId =
-        scopedCat.get("parent_category_id") || scopedCat.get("id");
+      scopedCategoryId = scopedCat.parent_category_id || scopedCat.id;
     }
 
-    const excludeCategoryId = this.excludeCategoryId;
+    const excludeCategoryId = this.selectKit.options.excludeCategoryId;
 
-    return categories.filter(c => {
-      const categoryId = this.valueForContentItem(c);
+    return categories.filter(category => {
+      const categoryId = this.getValue(category);
 
       if (
         scopedCategoryId &&
         categoryId !== scopedCategoryId &&
-        get(c, "parent_category_id") !== scopedCategoryId
+        category.parent_category_id !== scopedCategoryId
       ) {
         return false;
       }
 
-      if (this.allowSubCategories === false && c.get("parentCategory")) {
+      if (
+        this.selectKit.options.allowSubCategories === false &&
+        category.parentCategory
+      ) {
         return false;
       }
 
       if (
-        (this.allowUncategorized === false &&
-          get(c, "isUncategorizedCategory")) ||
+        (this.selectKit.options.allowUncategorized === false &&
+          category.isUncategorizedCategory) ||
         excludeCategoryId === categoryId
       ) {
         return false;
       }
 
-      if (this.permissionType) {
-        return this.permissionType === get(c, "permission");
+      const permissionType = this.selectKit.options.permissionType;
+      if (permissionType) {
+        return permissionType === category.permission;
       }
 
       return true;
     });
+  },
+
+  _matchCategory(filter, categoryName) {
+    return this._normalize(categoryName).indexOf(filter) > -1;
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/category-drop.js.es6 b/app/assets/javascripts/select-kit/components/category-drop.js.es6
index f2ad904d3e8..b5dcb7162a9 100644
--- a/app/assets/javascripts/select-kit/components/category-drop.js.es6
+++ b/app/assets/javascripts/select-kit/components/category-drop.js.es6
@@ -1,180 +1,145 @@
-import { alias, not } from "@ember/object/computed";
+import { readOnly } from "@ember/object/computed";
+import { computed } from "@ember/object";
 import ComboBoxComponent from "select-kit/components/combo-box";
 import DiscourseURL from "discourse/lib/url";
-import discourseComputed from "discourse-common/utils/decorators";
 import Category from "discourse/models/category";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
-import Site from "discourse/models/site";
 
-const { isEmpty } = Ember;
+export const NO_CATEGORIES_ID = "no-categories";
+export const ALL_CATEGORIES_ID = "all-categories";
 
 export default ComboBoxComponent.extend({
   pluginApiIdentifiers: ["category-drop"],
   classNameBindings: ["categoryStyle"],
-  classNames: "category-drop",
-  verticalOffset: 3,
-  content: alias("categoriesWithShortcuts"),
-  rowComponent: "category-row",
-  headerComponent: "category-drop/category-drop-header",
-  allowAutoSelectFirst: false,
+  classNames: ["category-drop"],
+  value: readOnly("category.id"),
+  content: readOnly("categoriesWithShortcuts.[]"),
   tagName: "li",
-  categoryStyle: alias("siteSettings.category_style"),
+  categoryStyle: readOnly("siteSettings.category_style"),
   noCategoriesLabel: I18n.t("categories.no_subcategory"),
-  fullWidthOnMobile: true,
-  caretDownIcon: "caret-right",
-  caretUpIcon: "caret-down",
-  subCategory: false,
-  isAsync: not("subCategory"),
 
-  @discourseComputed(
-    "categories",
-    "hasSelection",
-    "subCategory",
-    "noSubcategories"
-  )
-  categoriesWithShortcuts(
-    categories,
-    hasSelection,
-    subCategory,
-    noSubcategories
-  ) {
-    const shortcuts = [];
-
-    if (hasSelection || (noSubcategories && subCategory)) {
-      shortcuts.push({
-        name: this.allCategoriesLabel,
-        __sk_row_type: "noopRow",
-        id: "all-categories"
-      });
-    }
-
-    if (subCategory && (hasSelection || !noSubcategories)) {
-      shortcuts.push({
-        name: this.noCategoriesLabel,
-        __sk_row_type: "noopRow",
-        id: "no-categories"
-      });
-    }
-
-    return shortcuts.concat(categories);
+  selectKitOptions: {
+    filterable: true,
+    none: "category.all",
+    caretDownIcon: "caret-right",
+    caretUpIcon: "caret-down",
+    fullWidthOnMobile: true,
+    noSubcategories: false,
+    subCategory: false,
+    clearable: false,
+    hideParentCategory: "hideParentCategory",
+    allowUncategorized: true,
+    countSubcategories: false,
+    autoInsertNoneItem: false,
+    displayCategoryDescription: "displayCategoryDescription",
+    headerComponent: "category-drop/category-drop-header"
   },
 
-  init() {
-    this._super(...arguments);
-
-    this.rowComponentOptions.setProperties({
-      hideParentCategory: this.subCategory,
-      allowUncategorized: true,
-      countSubcategories: this.countSubcategories,
-      displayCategoryDescription: !(
-        this.currentUser &&
-        (this.currentUser.get("staff") || this.currentUser.trust_level > 0)
-      )
-    });
+  modifyComponentForRow() {
+    return "category-row";
   },
 
-  didReceiveAttrs() {
-    if (!this.categories) this.set("categories", []);
-    this.forceValue(this.get("category.id"));
-  },
-
-  @discourseComputed("content")
-  filterable(content) {
-    const contentLength = (content && content.length) || 0;
-    return (
-      contentLength >= 15 ||
-      (this.isAsync && contentLength < Category.list().length)
+  displayCategoryDescription: computed(function() {
+    return !(
+      this.get("currentUser.staff") || this.get("currentUser.trust_level") > 0
     );
+  }),
+
+  hideParentCategory: computed(function() {
+    return this.options.subCategory || false;
+  }),
+
+  categoriesWithShortcuts: computed(
+    "categories.[]",
+    "value",
+    "selectKit.options.{subCategory,noSubcategories}",
+    function() {
+      const shortcuts = [];
+
+      if (
+        this.value ||
+        (this.selectKit.options.noSubcategories &&
+          this.selectKit.options.subCategory)
+      ) {
+        shortcuts.push({
+          id: ALL_CATEGORIES_ID,
+          name: this.allCategoriesLabel
+        });
+      }
+
+      if (
+        this.selectKit.options.subCategory &&
+        (this.value || !this.selectKit.options.noSubcategories)
+      ) {
+        shortcuts.push({
+          id: NO_CATEGORIES_ID,
+          name: this.noCategoriesLabel
+        });
+      }
+
+      const results = this._filterUncategorized(this.categories || []);
+      return shortcuts.concat(results);
+    }
+  ),
+
+  modifyNoSelection() {
+    if (this.selectKit.options.noSubcategories) {
+      return this.defaultItem(NO_CATEGORIES_ID, this.noCategoriesLabel);
+    } else {
+      return this.defaultItem(ALL_CATEGORIES_ID, this.allCategoriesLabel);
+    }
   },
 
-  computeHeaderContent() {
-    let content = this._super(...arguments);
-
-    if (this.hasSelection) {
-      const category = Category.findById(content.value);
+  modifySelection(content) {
+    if (this.value) {
+      const category = Category.findById(this.value);
       content.title = category.title;
       content.label = categoryBadgeHTML(category, {
         link: false,
-        allowUncategorized: true,
+        allowUncategorized: this.selectKit.options.allowUncategorized,
         hideParent: true
       }).htmlSafe();
-    } else {
-      if (this.noSubcategories) {
-        content.label = `<span class="category-name">${this.get(
-          "noCategoriesLabel"
-        )}</span>`;
-        content.title = this.noCategoriesLabel;
-      } else {
-        content.label = `<span class="category-name">${this.get(
-          "allCategoriesLabel"
-        )}</span>`;
-        content.title = this.allCategoriesLabel;
-      }
     }
 
     return content;
   },
 
-  @discourseComputed("parentCategory.name", "subCategory")
-  allCategoriesLabel(categoryName, subCategory) {
-    if (subCategory) {
-      return I18n.t("categories.all_subcategories", { categoryName });
-    }
-    return I18n.t("categories.all");
-  },
+  parentCategoryName: readOnly("selectKit.options.parentCategory.name"),
 
-  @discourseComputed("parentCategory.url", "subCategory")
-  allCategoriesUrl(parentCategoryUrl, subCategory) {
-    return Discourse.getURL(subCategory ? parentCategoryUrl || "/" : "/");
-  },
+  parentCategoryUrl: readOnly("selectKit.options.parentCategory.url"),
 
-  @discourseComputed("parentCategory.url")
-  noCategoriesUrl(parentCategoryUrl) {
-    return Discourse.getURL(`${parentCategoryUrl}/none`);
-  },
-
-  actions: {
-    onSelect(categoryId) {
-      let categoryURL;
-
-      if (categoryId === "all-categories") {
-        categoryURL = Discourse.getURL(this.allCategoriesUrl);
-      } else if (categoryId === "no-categories") {
-        categoryURL = Discourse.getURL(this.noCategoriesUrl);
-      } else {
-        const category = Category.findById(parseInt(categoryId, 10));
-        const slug = Category.slugFor(category);
-        categoryURL = Discourse.getURL(`/c/${slug}/${categoryId}`);
-      }
-
-      DiscourseURL.routeTo(categoryURL);
-    },
-
-    onExpand() {
-      if (this.isAsync && isEmpty(this.asyncContent)) {
-        this.set("asyncContent", this.content);
-      }
-    },
-
-    onFilter(filter) {
-      if (!this.isAsync) {
-        return;
-      }
-
-      if (isEmpty(filter)) {
-        this.set("asyncContent", this.content);
-        return;
-      }
-
-      let results = Category.search(filter);
-
-      if (!this.siteSettings.allow_uncategorized_topics) {
-        results = results.filter(result => {
-          return result.id !== Site.currentProp("uncategorized_category_id");
+  allCategoriesLabel: computed(
+    "parentCategoryName",
+    "selectKit.options.subCategory",
+    function() {
+      if (this.selectKit.options.subCategory) {
+        return I18n.t("categories.all_subcategories", {
+          categoryName: this.parentCategoryName
         });
       }
 
-      results = results.sort((a, b) => {
+      return I18n.t("categories.all");
+    }
+  ),
+
+  allCategoriesUrl: computed(
+    "parentCategoryUrl",
+    "selectKit.options.subCategory",
+    function() {
+      return Discourse.getURL(
+        this.selectKit.options.subCategory ? this.parentCategoryUrl || "/" : "/"
+      );
+    }
+  ),
+
+  noCategoriesUrl: computed("parentCategoryUrl", function() {
+    return Discourse.getURL(`${this.parentCategoryUrl}/none`);
+  }),
+
+  search(filter) {
+    if (filter) {
+      let results = Discourse.Category.search(filter);
+      results = this._filterUncategorized(results).sort((a, b) => {
         if (a.parent_category_id && !b.parent_category_id) {
           return 1;
         } else if (!a.parent_category_id && b.parent_category_id) {
@@ -183,9 +148,43 @@ export default ComboBoxComponent.extend({
           return 0;
         }
       });
-
-      this.set("asyncContent", results);
-      this.autoHighlight();
+      return results;
+    } else {
+      return this._filterUncategorized(this.content);
     }
+  },
+
+  actions: {
+    onChange(value) {
+      let categoryURL;
+
+      if (value === ALL_CATEGORIES_ID) {
+        categoryURL = this.allCategoriesUrl;
+      } else if (value === NO_CATEGORIES_ID) {
+        categoryURL = this.noCategoriesUrl;
+      } else {
+        const categoryId = parseInt(value, 10);
+        const category = Category.findById(categoryId);
+        const slug = Discourse.Category.slugFor(category);
+        categoryURL = `/c/${slug}`;
+      }
+
+      DiscourseURL.routeToUrl(categoryURL);
+
+      return false;
+    }
+  },
+
+  _filterUncategorized(content) {
+    if (
+      !this.siteSettings.allow_uncategorized_topics ||
+      !this.selectKit.options.allowUncategorized
+    ) {
+      content = content.filter(
+        c => c.id !== this.site.uncategorized_category_id
+      );
+    }
+
+    return content;
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/category-drop/category-drop-header.js.es6 b/app/assets/javascripts/select-kit/components/category-drop/category-drop-header.js.es6
index c84b7189d0d..7f641fb14fd 100644
--- a/app/assets/javascripts/select-kit/components/category-drop/category-drop-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/category-drop/category-drop-header.js.es6
@@ -1,40 +1,30 @@
-import { alias } from "@ember/object/computed";
-import { isEmpty } from "@ember/utils";
+import { readOnly } from "@ember/object/computed";
+import { schedule } from "@ember/runloop";
 import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
 import discourseComputed from "discourse-common/utils/decorators";
-import Category from "discourse/models/category";
 
 export default ComboBoxSelectBoxHeaderComponent.extend({
   layoutName:
     "select-kit/templates/components/category-drop/category-drop-header",
-  classNames: "category-drop-header",
-
+  classNames: ["category-drop-header"],
   classNameBindings: ["categoryStyleClass"],
-  categoryStyleClass: alias("site.category_style"),
+  categoryStyleClass: readOnly("site.category_style"),
 
-  @discourseComputed("computedContent.value", "computedContent.name")
-  category(value, name) {
-    if (isEmpty(value)) {
-      const uncat = Category.findUncategorized();
-      if (uncat && uncat.get("name") === name) {
-        return uncat;
-      }
-    } else {
-      return Category.findById(parseInt(value, 10));
-    }
-  },
-
-  @discourseComputed("category.color")
+  @discourseComputed("selectedContent.color")
   categoryBackgroundColor(categoryColor) {
     return categoryColor || "#e9e9e9";
   },
 
-  @discourseComputed("category.text_color")
+  @discourseComputed("selectedContent.text_color")
   categoryTextColor(categoryTextColor) {
     return categoryTextColor || "#333";
   },
 
-  @discourseComputed("category", "categoryBackgroundColor", "categoryTextColor")
+  @discourseComputed(
+    "selectedContent",
+    "categoryBackgroundColor",
+    "categoryTextColor"
+  )
   categoryStyle(category, categoryBackgroundColor, categoryTextColor) {
     const categoryStyle = this.siteSettings.category_style;
 
@@ -56,12 +46,16 @@ export default ComboBoxSelectBoxHeaderComponent.extend({
     }
   },
 
-  didRender() {
+  didInsertElement() {
     this._super(...arguments);
 
-    this.element.setAttribute("style", this.categoryStyle);
-    this.element
-      .querySelector(".caret-icon")
-      .setAttribute("style", this.categoryStyle);
+    schedule("afterRender", () => {
+      if (this.categoryStyle) {
+        this.element.setAttribute("style", this.categoryStyle);
+        this.element
+          .querySelector(".caret-icon")
+          .setAttribute("style", this.categoryStyle);
+      }
+    });
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/category-notifications-button.js.es6 b/app/assets/javascripts/select-kit/components/category-notifications-button.js.es6
index ecc000d8bdb..b9e959f7b5b 100644
--- a/app/assets/javascripts/select-kit/components/category-notifications-button.js.es6
+++ b/app/assets/javascripts/select-kit/components/category-notifications-button.js.es6
@@ -1,18 +1,15 @@
-import { or, alias } from "@ember/object/computed";
+import { or } from "@ember/object/computed";
 import NotificationOptionsComponent from "select-kit/components/notifications-button";
 
 export default NotificationOptionsComponent.extend({
   pluginApiIdentifiers: ["category-notifications-button"],
-  classNames: "category-notifications-button",
+  classNames: ["category-notifications-button"],
   isHidden: or("category.deleted"),
-  headerIcon: alias("iconForSelectedDetails"),
-  i18nPrefix: "category.notifications",
-  showFullTitle: false,
-  allowInitialValueMutation: false,
 
-  mutateValue(value) {
-    this.category.setNotification(value);
+  selectKitOptions: {
+    i18nPrefix: "i18nPrefix",
+    showFullTitle: false
   },
 
-  deselect() {}
+  i18nPrefix: "category.notifications"
 });
diff --git a/app/assets/javascripts/select-kit/components/category-row.js.es6 b/app/assets/javascripts/select-kit/components/category-row.js.es6
index 452aad22d53..fe3639e20e7 100644
--- a/app/assets/javascripts/select-kit/components/category-row.js.es6
+++ b/app/assets/javascripts/select-kit/components/category-row.js.es6
@@ -1,109 +1,122 @@
-import { bool } from "@ember/object/computed";
-import { isEmpty } from "@ember/utils";
+import { reads, bool } from "@ember/object/computed";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
-import discourseComputed from "discourse-common/utils/decorators";
 import Category from "discourse/models/category";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
-import { isNone } from "@ember/utils";
+import { isEmpty, isNone } from "@ember/utils";
+import { computed } from "@ember/object";
+import { setting } from "discourse/lib/computed";
 
 export default SelectKitRowComponent.extend({
   layoutName: "select-kit/templates/components/category-row",
-  classNames: "category-row",
+  classNames: ["category-row"],
+  hideParentCategory: bool("selectKit.options.hideParentCategory"),
+  allowUncategorized: bool("selectKit.options.allowUncategorized"),
+  categoryLink: bool("selectKit.options.categoryLink"),
+  countSubcategories: bool("selectKit.options.countSubcategories"),
+  allowUncategorizedTopics: setting("allow_uncategorized_topics"),
 
-  hideParentCategory: bool("options.hideParentCategory"),
-  allowUncategorized: bool("options.allowUncategorized"),
-  categoryLink: bool("options.categoryLink"),
+  displayCategoryDescription: computed(
+    "selectKit.options.displayCategoryDescription",
+    function() {
+      const option = this.selectKit.options.displayCategoryDescription;
+      if (isNone(option)) {
+        return true;
+      }
 
-  @discourseComputed("options.displayCategoryDescription")
-  displayCategoryDescription(displayCategoryDescription) {
-    if (isNone(displayCategoryDescription)) {
-      return true;
+      return option;
     }
+  ),
 
-    return displayCategoryDescription;
-  },
+  title: computed("descriptionText", "description", "categoryName", function() {
+    return this.descriptionText || this.description || this.categoryName;
+  }),
 
-  @discourseComputed("descriptionText", "description", "category.name")
-  title(descriptionText, description, name) {
-    return descriptionText || description || name;
-  },
+  categoryName: reads("category.name"),
 
-  @discourseComputed("computedContent.value", "computedContent.name")
-  category(value, name) {
-    if (isEmpty(value)) {
+  categoryDescription: reads("category.description"),
+
+  categoryDescriptionText: reads("category.description_text"),
+
+  category: computed("rowValue", "rowName", function() {
+    if (isEmpty(this.rowValue)) {
       const uncat = Category.findUncategorized();
-      if (uncat && uncat.get("name") === name) {
+      if (uncat && uncat.name === this.rowName) {
         return uncat;
       }
     } else {
-      return Category.findById(parseInt(value, 10));
+      return Category.findById(parseInt(this.rowValue, 10));
     }
-  },
+  }),
 
-  @discourseComputed("category", "parentCategory")
-  badgeForCategory(category, parentCategory) {
-    return categoryBadgeHTML(category, {
+  badgeForCategory: computed("category", "parentCategory", function() {
+    return categoryBadgeHTML(this.category, {
       link: this.categoryLink,
-      allowUncategorized: this.allowUncategorized,
-      hideParent: !!parentCategory
+      allowUncategorized:
+        this.allowUncategorizedTopics || this.allowUncategorized,
+      hideParent: !!this.parentCategory
     }).htmlSafe();
-  },
+  }),
 
-  @discourseComputed("parentCategory")
-  badgeForParentCategory(parentCategory) {
-    return categoryBadgeHTML(parentCategory, {
+  badgeForParentCategory: computed("parentCategory", function() {
+    return categoryBadgeHTML(this.parentCategory, {
       link: this.categoryLink,
-      allowUncategorized: this.allowUncategorized,
+      allowUncategorized:
+        this.allowUncategorizedTopics || this.allowUncategorized,
       recursive: true
     }).htmlSafe();
-  },
+  }),
 
-  @discourseComputed("parentCategoryid")
-  parentCategory(parentCategoryId) {
-    return Category.findById(parentCategoryId);
-  },
+  parentCategory: computed("parentCategoryId", function() {
+    return Category.findById(this.parentCategoryId);
+  }),
 
-  @discourseComputed("parentCategoryid")
-  hasParentCategory(parentCategoryid) {
-    return !isNone(parentCategoryid);
-  },
+  hasParentCategory: bool("parentCategoryId"),
 
-  @discourseComputed("category")
-  parentCategoryid(category) {
-    return category.get("parent_category_id");
-  },
+  parentCategoryId: reads("category.parent_category_id"),
 
-  @discourseComputed(
-    "category.totalTopicCount",
-    "category.topic_count",
-    "options.countSubcategories"
-  )
-  topicCount(totalCount, topicCount, countSubcats) {
-    return countSubcats ? totalCount : topicCount;
-  },
+  categoryTotalTopicCount: reads("category.totalTopicCount"),
 
-  @discourseComputed("displayCategoryDescription", "category.description")
-  shouldDisplayDescription(displayCategoryDescription, description) {
-    return displayCategoryDescription && description && description !== "null";
-  },
+  categoryTopicCount: reads("category.topic_count"),
 
-  @discourseComputed("category.description_text")
-  descriptionText(descriptionText) {
-    if (descriptionText) {
-      return this._formatCategoryDescription(descriptionText);
+  topicCount: computed(
+    "categoryTotalTopicCount",
+    "categoryTopicCount",
+    "countSubcategories",
+    function() {
+      return this.countSubcategories
+        ? this.categoryTotalTopicCount
+        : this.categoryTopicCount;
     }
-  },
+  ),
 
-  @discourseComputed("category.description")
-  description(description) {
-    if (description) {
-      return this._formatCategoryDescription(description);
+  shouldDisplayDescription: computed(
+    "displayCategoryDescription",
+    "categoryDescription",
+    function() {
+      return (
+        this.displayCategoryDescription &&
+        this.categoryDescription &&
+        this.categoryDescription !== "null"
+      );
     }
-  },
+  ),
 
-  _formatCategoryDescription(description) {
-    return `${description.substr(0, 200)}${
-      description.length > 200 ? "&hellip;" : ""
+  descriptionText: computed("categoryDescriptionText", function() {
+    if (this.categoryDescriptionText) {
+      return this._formatDescription(this.categoryDescriptionText);
+    }
+  }),
+
+  description: computed("categoryDescription", function() {
+    if (this.categoryDescription) {
+      return this._formatDescription(this.categoryDescription);
+    }
+  }),
+
+  _formatDescription(description) {
+    const limit = 200;
+    return `${description.substr(0, limit)}${
+      description.length > limit ? "&hellip;" : ""
     }`;
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/category-selector.js.es6 b/app/assets/javascripts/select-kit/components/category-selector.js.es6
index 11ed11bacd5..20475d7570c 100644
--- a/app/assets/javascripts/select-kit/components/category-selector.js.es6
+++ b/app/assets/javascripts/select-kit/components/category-selector.js.es6
@@ -1,58 +1,54 @@
-import { get } from "@ember/object";
+import { get, computed } from "@ember/object";
+import { mapBy } from "@ember/object/computed";
 import { makeArray } from "discourse-common/lib/helpers";
 import MultiSelectComponent from "select-kit/components/multi-select";
 import Category from "discourse/models/category";
 
 export default MultiSelectComponent.extend({
   pluginApiIdentifiers: ["category-selector"],
-  classNames: "category-selector",
-  filterable: true,
-  allowAny: false,
-  rowComponent: "category-row",
+  classNames: ["category-selector"],
   categories: null,
   blacklist: null,
-  allowUncategorized: true,
+
+  selectKitOptions: {
+    filterable: true,
+    allowAny: false,
+    allowUncategorized: "allowUncategorized",
+    displayCategoryDescription: false,
+    selectedNameComponent: "multi-select/selected-category"
+  },
 
   init() {
     this._super(...arguments);
 
     if (!this.categories) this.set("categories", []);
     if (!this.blacklist) this.set("blacklist", []);
-
-    this.headerComponentOptions.setProperties({
-      selectedNameComponent: "multi-select/selected-category"
-    });
-
-    this.rowComponentOptions.setProperties({
-      allowUncategorized: this.allowUncategorized,
-      displayCategoryDescription: false
-    });
   },
 
-  computeValues() {
-    return makeArray(this.categories).map(c => c.id);
-  },
-
-  mutateValues(values) {
-    this.set(
-      "categories",
-      values.map(v => Category.findById(v))
-    );
-  },
-
-  filterComputedContent(computedContent, computedValues, filter) {
-    const regex = new RegExp(filter, "i");
-    return computedContent.filter(category =>
-      this._normalize(get(category, "name")).match(regex)
-    );
-  },
-
-  computeContent() {
+  content: computed("categories.[]", "blacklist.[]", function() {
     const blacklist = makeArray(this.blacklist);
     return Category.list().filter(category => {
       return (
         this.categories.includes(category) || !blacklist.includes(category)
       );
     });
+  }),
+
+  value: mapBy("categories", "id"),
+
+  filterComputedContent(computedContent, filter) {
+    const regex = new RegExp(filter, "i");
+    return computedContent.filter(category =>
+      this._normalize(get(category, "name")).match(regex)
+    );
+  },
+
+  actions: {
+    onChange(values) {
+      this.attrs.onChange(
+        values.map(v => Category.findById(v)).filter(Boolean)
+      );
+      return false;
+    }
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/combo-box.js.es6 b/app/assets/javascripts/select-kit/components/combo-box.js.es6
index e68dab3c5fc..af20aa8c119 100644
--- a/app/assets/javascripts/select-kit/components/combo-box.js.es6
+++ b/app/assets/javascripts/select-kit/components/combo-box.js.es6
@@ -1,31 +1,17 @@
 import SingleSelectComponent from "select-kit/components/single-select";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import { computed } from "@ember/object";
 
 export default SingleSelectComponent.extend({
   pluginApiIdentifiers: ["combo-box"],
-  classNames: "combobox combo-box",
-  autoFilterable: true,
-  headerComponent: "combo-box/combo-box-header",
+  classNames: ["combobox", "combo-box"],
 
-  caretUpIcon: "caret-up",
-  caretDownIcon: "caret-down",
-  clearable: false,
-
-  computeHeaderContent() {
-    let content = this._super(...arguments);
-    content.hasSelection = this.hasSelection;
-    return content;
+  selectKitOptions: {
+    caretUpIcon: "caret-up",
+    caretDownIcon: "caret-down",
+    autoFilterable: "autoFilterable",
+    clearable: false,
+    headerComponent: "combo-box/combo-box-header"
   },
 
-  @discourseComputed("isExpanded", "caretUpIcon", "caretDownIcon")
-  caretIcon(isExpanded, caretUpIcon, caretDownIcon) {
-    return isExpanded ? caretUpIcon : caretDownIcon;
-  },
-
-  @on("didUpdateAttrs", "init")
-  _setComboBoxOptions() {
-    this.headerComponentOptions.setProperties({
-      clearable: this.clearable
-    });
-  }
+  autoFilterable: computed.gte("content.length", 5)
 });
diff --git a/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6 b/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
index 4dbe7d22c51..3c7472d5258 100644
--- a/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/combo-box/combo-box-header.js.es6
@@ -1,12 +1,21 @@
-import { alias, and } from "@ember/object/computed";
-import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
+import { reads, and } from "@ember/object/computed";
+import SingleSelectHeaderComponent from "select-kit/components/select-kit/single-select-header";
+import { computed } from "@ember/object";
 
-export default SelectKitHeaderComponent.extend({
+export default SingleSelectHeaderComponent.extend({
   layoutName: "select-kit/templates/components/combo-box/combo-box-header",
-  classNames: "combo-box-header",
+  classNames: ["combo-box-header"],
+  clearable: reads("selectKit.options.clearable"),
+  caretUpIcon: reads("selectKit.options.caretUpIcon"),
+  caretDownIcon: reads("selectKit.options.caretDownIcon"),
+  shouldDisplayClearableButton: and("clearable", "value"),
 
-  clearable: alias("options.clearable"),
-  caretUpIcon: alias("options.caretUpIcon"),
-  caretDownIcon: alias("options.caretDownIcon"),
-  shouldDisplayClearableButton: and("clearable", "computedContent.hasSelection")
+  caretIcon: computed(
+    "selectKit.isExpanded",
+    "caretUpIcon",
+    "caretDownIcon",
+    function() {
+      return this.selectKit.isExpanded ? this.caretUpIcon : this.caretDownIcon;
+    }
+  )
 });
diff --git a/app/assets/javascripts/select-kit/components/composer-actions.js.es6 b/app/assets/javascripts/select-kit/components/composer-actions.js.es6
index f42643f03c0..7b8b461d35f 100644
--- a/app/assets/javascripts/select-kit/components/composer-actions.js.es6
+++ b/app/assets/javascripts/select-kit/components/composer-actions.js.es6
@@ -1,14 +1,12 @@
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
-import discourseComputed from "discourse-common/utils/decorators";
 import {
   PRIVATE_MESSAGE,
   CREATE_TOPIC,
   CREATE_SHARED_DRAFT,
-  REPLY,
-  EDIT
+  REPLY
 } from "discourse/models/composer";
+import { computed } from "@ember/object";
 import { camelize } from "@ember/string";
-import { empty } from "@ember/object/computed";
 
 // Component can get destroyed and lose state
 let _topicSnapshot = null;
@@ -21,14 +19,13 @@ export function _clearSnapshots() {
 
 export default DropdownSelectBoxComponent.extend({
   pluginApiIdentifiers: ["composer-actions"],
-  classNames: "composer-actions",
-  fullWidthOnMobile: true,
-  autofilterable: false,
-  filterable: false,
-  allowInitialValueMutation: false,
-  allowAutoSelectFirst: false,
-  showFullTitle: false,
-  isHidden: empty("content"),
+  classNames: ["composer-actions"],
+
+  selectKitOptions: {
+    icon: "share",
+    filterable: false,
+    showFullTitle: false
+  },
 
   didReceiveAttrs() {
     this._super(...arguments);
@@ -37,7 +34,7 @@ export default DropdownSelectBoxComponent.extend({
     if (
       this.get("composerModel.topic") &&
       (!_topicSnapshot ||
-        this.get("composerModel.topic.id") !== _topicSnapshot.get("id"))
+        this.get("composerModel.topic.id") !== _topicSnapshot.id)
     ) {
       _topicSnapshot = this.get("composerModel.topic");
       _postSnapshot = this.get("composerModel.post");
@@ -46,43 +43,26 @@ export default DropdownSelectBoxComponent.extend({
     // if we hit reply on a different post we want to change postSnapshot
     if (
       this.get("composerModel.post") &&
-      (!_postSnapshot ||
-        this.get("composerModel.post.id") !== _postSnapshot.get("id"))
+      (!_postSnapshot || this.get("composerModel.post.id") !== _postSnapshot.id)
     ) {
       _postSnapshot = this.get("composerModel.post");
     }
-  },
 
-  computeHeaderContent() {
-    let content = this._super(...arguments);
-
-    switch (this.action) {
-      case PRIVATE_MESSAGE:
-      case CREATE_TOPIC:
-      case REPLY:
-        content.icon = "share";
-        content.title = I18n.t("composer.composer_actions.reply");
-        break;
-      case EDIT:
-        content.icon = "pencil-alt";
-        content.title = I18n.t("composer.composer_actions.edit");
-        break;
-      case CREATE_SHARED_DRAFT:
-        content.icon = "far-clipboard";
-        content.title = I18n.t("composer.composer_actions.draft");
-        break;
+    if (Ember.isEmpty(this.content)) {
+      this.set("selectKit.isHidden", true);
     }
-
-    return content;
   },
 
-  @discourseComputed("options", "canWhisper", "action")
-  content(options, canWhisper, action) {
+  modifySelection() {
+    return {};
+  },
+
+  content: computed(function() {
     let items = [];
 
     if (
-      action !== CREATE_TOPIC &&
-      action !== CREATE_SHARED_DRAFT &&
+      this.action !== CREATE_TOPIC &&
+      this.action !== CREATE_SHARED_DRAFT &&
       _topicSnapshot
     ) {
       items.push({
@@ -96,15 +76,15 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     if (
-      (action !== REPLY && _postSnapshot) ||
-      (action === REPLY &&
+      (this.action !== REPLY && _postSnapshot) ||
+      (this.action === REPLY &&
         _postSnapshot &&
-        !(options.userAvatar && options.userLink))
+        !(this.replyOptions.userAvatar && this.replyOptions.userLink))
     ) {
       items.push({
         name: I18n.t("composer.composer_actions.reply_to_post.label", {
-          postNumber: _postSnapshot.get("post_number"),
-          postUsername: _postSnapshot.get("username")
+          postNumber: _postSnapshot.post_number,
+          postUsername: _postSnapshot.username
         }),
         description: I18n.t("composer.composer_actions.reply_to_post.desc"),
         icon: "share",
@@ -114,7 +94,7 @@ export default DropdownSelectBoxComponent.extend({
 
     if (
       this.siteSettings.enable_personal_messages &&
-      action !== PRIVATE_MESSAGE
+      this.action !== PRIVATE_MESSAGE
     ) {
       items.push({
         name: I18n.t(
@@ -129,12 +109,12 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     if (
-      (action !== REPLY && _topicSnapshot) ||
-      (action === REPLY &&
+      (this.action !== REPLY && _topicSnapshot) ||
+      (this.action === REPLY &&
         _topicSnapshot &&
-        options.userAvatar &&
-        options.userLink &&
-        options.topicLink)
+        this.replyOptions.userAvatar &&
+        this.replyOptions.userLink &&
+        this.replyOptions.topicLink)
     ) {
       items.push({
         name: I18n.t("composer.composer_actions.reply_to_topic.label"),
@@ -146,7 +126,7 @@ export default DropdownSelectBoxComponent.extend({
 
     // if answered post is a whisper, we can only answer with a whisper so no need for toggle
     if (
-      canWhisper &&
+      this.canWhisper &&
       (!_postSnapshot ||
         (_postSnapshot &&
           _postSnapshot.post_type !== this.site.post_types.whisper))
@@ -160,11 +140,11 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     let showCreateTopic = false;
-    if (action === CREATE_SHARED_DRAFT) {
+    if (this.action === CREATE_SHARED_DRAFT) {
       showCreateTopic = true;
     }
 
-    if (action === CREATE_TOPIC) {
+    if (this.action === CREATE_TOPIC) {
       if (this.site.shared_drafts_category_id) {
         // Shared Drafts Choice
         items.push({
@@ -198,7 +178,7 @@ export default DropdownSelectBoxComponent.extend({
       this.get("currentUser.staff") ||
       this.get("currentUser.trust_level") === 4;
 
-    if (action === REPLY && showToggleTopicBump) {
+    if (this.action === REPLY && showToggleTopicBump) {
       items.push({
         name: I18n.t("composer.composer_actions.toggle_topic_bump.label"),
         description: I18n.t("composer.composer_actions.toggle_topic_bump.desc"),
@@ -208,7 +188,7 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return items;
-  },
+  }),
 
   _replyFromExisting(options, post, topic) {
     this.closeComposer();
@@ -295,18 +275,17 @@ export default DropdownSelectBoxComponent.extend({
   },
 
   actions: {
-    onSelect(value) {
-      let action = `${camelize(value)}Selected`;
+    onChange(value) {
+      const action = `${camelize(value)}Selected`;
       if (this[action]) {
-        let model = this.composerModel;
         this[action](
-          model.getProperties(
+          this.composerModel.getProperties(
             "draftKey",
             "draftSequence",
             "reply",
             "disableScopedCategory"
           ),
-          model
+          this.composerModel
         );
       } else {
         // eslint-disable-next-line no-console
diff --git a/app/assets/javascripts/select-kit/components/create-color-row.js.es6 b/app/assets/javascripts/select-kit/components/create-color-row.js.es6
new file mode 100644
index 00000000000..9c4f5aac070
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/create-color-row.js.es6
@@ -0,0 +1,17 @@
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+import { escapeExpression } from "discourse/lib/utilities";
+import { schedule } from "@ember/runloop";
+
+export default SelectKitRowComponent.extend({
+  layoutName: "select-kit/templates/components/create-color-row",
+  classNames: ["create-color-row"],
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+
+    schedule("afterRender", () => {
+      const color = escapeExpression(this.rowValue);
+      this.element.style.borderLeftColor = `#${color}`;
+    });
+  }
+});
diff --git a/app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6 b/app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6
index 77c1927e96c..171215aac8f 100644
--- a/app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6
+++ b/app/assets/javascripts/select-kit/components/dropdown-select-box.js.es6
@@ -1,32 +1,17 @@
 import SingleSelectComponent from "select-kit/components/single-select";
-import { on } from "discourse-common/utils/decorators";
 
 export default SingleSelectComponent.extend({
   pluginApiIdentifiers: ["dropdown-select-box"],
-  classNames: "dropdown-select-box",
-  verticalOffset: 3,
-  fullWidthOnMobile: true,
-  filterable: false,
-  autoFilterable: false,
-  headerComponent: "dropdown-select-box/dropdown-select-box-header",
-  rowComponent: "dropdown-select-box/dropdown-select-box-row",
-  showFullTitle: true,
-  allowInitialValueMutation: false,
+  classNames: ["dropdown-select-box"],
 
-  @on("didUpdateAttrs", "init")
-  _setDropdownSelectBoxComponentOptions() {
-    this.headerComponentOptions.setProperties({
-      showFullTitle: this.showFullTitle
-    });
+  selectKitOptions: {
+    autoFilterable: false,
+    filterable: false,
+    showFullTitle: true,
+    headerComponent: "dropdown-select-box/dropdown-select-box-header"
   },
 
-  didClickOutside() {
-    if (!this.isExpanded) return;
-    this.close();
-  },
-
-  didSelect() {
-    this._super(...arguments);
-    this.close();
+  modifyComponentForRow() {
+    return "dropdown-select-box/dropdown-select-box-row";
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/dropdown-select-box/dropdown-select-box-header.js.es6 b/app/assets/javascripts/select-kit/components/dropdown-select-box/dropdown-select-box-header.js.es6
index d83156c0185..2b04e4094ad 100644
--- a/app/assets/javascripts/select-kit/components/dropdown-select-box/dropdown-select-box-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/dropdown-select-box/dropdown-select-box-header.js.es6
@@ -1,16 +1,18 @@
-import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
-import discourseComputed from "discourse-common/utils/decorators";
+import SingleSelectHeaderComponent from "select-kit/components/select-kit/single-select-header";
+import { computed } from "@ember/object";
+import { readOnly } from "@ember/object/computed";
 
-export default SelectKitHeaderComponent.extend({
+export default SingleSelectHeaderComponent.extend({
   layoutName:
     "select-kit/templates/components/dropdown-select-box/dropdown-select-box-header",
-  classNames: "btn-default dropdown-select-box-header",
+  classNames: ["btn-default", "dropdown-select-box-header"],
   tagName: "button",
-
   classNameBindings: ["btnClassName"],
+  showFullTitle: readOnly("selectKit.options.showFullTitle"),
+  attributeBindings: ["buttonType:type"],
+  buttonType: "button",
 
-  @discourseComputed("options.showFullTitle")
-  btnClassName(showFullTitle) {
-    return `btn ${showFullTitle ? "btn-icon-text" : "no-text btn-icon"}`;
-  }
+  btnClassName: computed("showFullTitle", function() {
+    return `btn ${this.showFullTitle ? "btn-icon-text" : "no-text btn-icon"}`;
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/dropdown-select-box/dropdown-select-box-row.js.es6 b/app/assets/javascripts/select-kit/components/dropdown-select-box/dropdown-select-box-row.js.es6
index 8169762e9a2..0944404e08b 100644
--- a/app/assets/javascripts/select-kit/components/dropdown-select-box/dropdown-select-box-row.js.es6
+++ b/app/assets/javascripts/select-kit/components/dropdown-select-box/dropdown-select-box-row.js.es6
@@ -1,10 +1,10 @@
-import { alias } from "@ember/object/computed";
+import { readOnly } from "@ember/object/computed";
 import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
 
 export default SelectKitRowComponent.extend({
   layoutName:
     "select-kit/templates/components/dropdown-select-box/dropdown-select-box-row",
-  classNames: "dropdown-select-box-row",
+  classNames: ["dropdown-select-box-row"],
 
-  description: alias("computedContent.originalContent.description")
+  description: readOnly("item.description")
 });
diff --git a/app/assets/javascripts/select-kit/components/future-date-input-selector.js.es6 b/app/assets/javascripts/select-kit/components/future-date-input-selector.js.es6
index 9fec1611c14..0c588dbdfed 100644
--- a/app/assets/javascripts/select-kit/components/future-date-input-selector.js.es6
+++ b/app/assets/javascripts/select-kit/components/future-date-input-selector.js.es6
@@ -1,3 +1,4 @@
+import { computed } from "@ember/object";
 import { equal } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
 import ComboBoxComponent from "select-kit/components/combo-box";
@@ -191,31 +192,20 @@ export default ComboBoxComponent.extend(DatetimeMixin, {
   classNames: ["future-date-input-selector"],
   isCustom: equal("value", "pick_date_and_time"),
   isBasedOnLastPost: equal("value", "set_based_on_last_post"),
-  rowComponent: "future-date-input-selector/future-date-input-selector-row",
-  headerComponent:
-    "future-date-input-selector/future-date-input-selector-header",
 
-  computeHeaderContent() {
-    let content = this._super(...arguments);
-    content.datetime = this._computeDatetimeForValue(this.computedValue);
-    content.name = this.get("selection.name") || content.name;
-    content.hasSelection = this.hasSelection;
-    content.icons = this._computeIconsForValue(this.computedValue);
-    return content;
+  selectKitOptions: {
+    autoInsertNoneItem: false,
+    headerComponent:
+      "future-date-input-selector/future-date-input-selector-header"
   },
 
-  computeContentItem(contentItem, name) {
-    let computedContentItem = this._super(contentItem, name);
-    computedContentItem.datetime = this._computeDatetimeForValue(
-      contentItem.id
-    );
-    computedContentItem.icons = this._computeIconsForValue(contentItem.id);
-    return computedContentItem;
+  modifyComponentForRow() {
+    return "future-date-input-selector/future-date-input-selector-row";
   },
 
-  computeContent() {
-    let now = moment();
-    let opts = {
+  content: computed(function() {
+    const now = moment();
+    const opts = {
       now,
       day: now.day(),
       includeWeekend: this.includeWeekend,
@@ -229,23 +219,24 @@ export default ComboBoxComponent.extend(DatetimeMixin, {
     return TIMEFRAMES.filter(tf => tf.enabled(opts)).map(tf => {
       return {
         id: tf.id,
-        name: I18n.t(`topic.auto_update_input.${tf.id}`)
+        name: I18n.t(`topic.auto_update_input.${tf.id}`),
+        datetime: this._computeDatetimeForValue(tf.id),
+        icons: this._computeIconsForValue(tf.id)
       };
     });
-  },
+  }),
 
-  mutateValue(value) {
-    if (value === "pick_date_and_time" || this.isBasedOnLastPost) {
-      this.set("value", value);
-    } else {
-      let input = null;
-      const { time } = this._updateAt(value);
-
-      if (time && !isEmpty(value)) {
-        input = time.locale("en").format(FORMAT);
+  actions: {
+    onChange(value) {
+      if (value !== "pick_date_and_time" || !this.isBasedOnLastPost) {
+        const { time } = this._updateAt(value);
+        if (time && !isEmpty(value)) {
+          this.attrs.onChangeInput &&
+            this.attrs.onChangeInput(time.locale("en").format(FORMAT));
+        }
       }
 
-      this.setProperties({ input, value });
+      this.attrs.onChange && this.attrs.onChange(value);
     }
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/future-date-input-selector/future-date-input-selector-row.js.es6 b/app/assets/javascripts/select-kit/components/future-date-input-selector/future-date-input-selector-row.js.es6
index 0438dff50ca..69836359d73 100644
--- a/app/assets/javascripts/select-kit/components/future-date-input-selector/future-date-input-selector-row.js.es6
+++ b/app/assets/javascripts/select-kit/components/future-date-input-selector/future-date-input-selector-row.js.es6
@@ -3,5 +3,5 @@ import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-r
 export default SelectKitRowComponent.extend({
   layoutName:
     "select-kit/templates/components/future-date-input-selector/future-date-input-selector-row",
-  classNames: "future-date-input-selector-row"
+  classNames: ["future-date-input-selector-row"]
 });
diff --git a/app/assets/javascripts/select-kit/components/future-date-input-selector/mixin.js.es6 b/app/assets/javascripts/select-kit/components/future-date-input-selector/mixin.js.es6
index 9aa6cf56fe2..705e8081ab4 100644
--- a/app/assets/javascripts/select-kit/components/future-date-input-selector/mixin.js.es6
+++ b/app/assets/javascripts/select-kit/components/future-date-input-selector/mixin.js.es6
@@ -33,7 +33,7 @@ export default Mixin.create({
   },
 
   _updateAt(selection) {
-    let details = timeframeDetails(selection);
+    const details = timeframeDetails(selection);
 
     if (details) {
       return {
diff --git a/app/assets/javascripts/select-kit/components/group-dropdown.js.es6 b/app/assets/javascripts/select-kit/components/group-dropdown.js.es6
index 2abd0a0bb9d..57f7a8ff748 100644
--- a/app/assets/javascripts/select-kit/components/group-dropdown.js.es6
+++ b/app/assets/javascripts/select-kit/components/group-dropdown.js.es6
@@ -1,50 +1,42 @@
-import { alias } from "@ember/object/computed";
+import { reads, gte } from "@ember/object/computed";
 import ComboBoxComponent from "select-kit/components/combo-box";
 import DiscourseURL from "discourse/lib/url";
-import discourseComputed from "discourse-common/utils/decorators";
+import { computed } from "@ember/object";
+import { setting } from "discourse/lib/computed";
 
 export default ComboBoxComponent.extend({
   pluginApiIdentifiers: ["group-dropdown"],
-  classNames: "group-dropdown",
-  content: alias("groups"),
+  classNames: ["group-dropdown"],
+  content: reads("groupsWithShortcut"),
   tagName: "li",
-  caretDownIcon: "caret-right",
-  caretUpIcon: "caret-down",
-  allowAutoSelectFirst: false,
-  valueAttribute: "name",
+  valueProperty: null,
+  nameProperty: null,
+  hasManyGroups: gte("content.length", 10),
+  enableGroupDirectory: setting("enable_group_directory"),
 
-  @discourseComputed("content")
-  filterable(content) {
-    return content && content.length >= 10;
+  selectKitOptions: {
+    caretDownIcon: "caret-right",
+    caretUpIcon: "caret-down",
+    filterable: "hasManyGroups"
   },
 
-  computeHeaderContent() {
-    let content = this._super(...arguments);
+  groupsWithShortcut: computed("groups.[]", function() {
+    const shortcuts = [];
 
-    if (!this.hasSelection) {
-      content.label = `<span>${I18n.t("groups.index.all")}</span>`;
+    if (this.enableGroupDirectory || this.get("currentUser.staff")) {
+      shortcuts.push(I18n.t("groups.index.all").toLowerCase());
     }
 
-    return content;
-  },
-
-  @discourseComputed
-  collectionHeader() {
-    if (
-      this.siteSettings.enable_group_directory ||
-      (this.currentUser && this.currentUser.get("staff"))
-    ) {
-      return `
-        <a href="${Discourse.getURL("/g")}" class="group-dropdown-filter">
-          ${I18n.t("groups.index.all").toLowerCase()}
-        </a>
-      `.htmlSafe();
-    }
-  },
+    return shortcuts.concat(this.groups);
+  }),
 
   actions: {
-    onSelect(groupName) {
-      DiscourseURL.routeTo(Discourse.getURL(`/g/${groupName}`));
+    onChange(groupName) {
+      if ((this.groups || []).includes(groupName)) {
+        DiscourseURL.routeToUrl(`/g/${groupName}`);
+      } else {
+        DiscourseURL.routeToUrl(`/g`);
+      }
     }
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/group-members-dropdown.js.es6 b/app/assets/javascripts/select-kit/components/group-members-dropdown.js.es6
index 5dc5549c585..39d1e927537 100644
--- a/app/assets/javascripts/select-kit/components/group-members-dropdown.js.es6
+++ b/app/assets/javascripts/select-kit/components/group-members-dropdown.js.es6
@@ -1,19 +1,15 @@
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
+import { computed } from "@ember/object";
 
 export default DropdownSelectBoxComponent.extend({
-  classNames: "group-members-dropdown",
-  showFullTitle: false,
-  allowInitialValueMutation: false,
+  classNames: ["group-members-dropdown"],
 
-  init() {
-    this._super(...arguments);
-
-    this.headerIcon = ["bars"];
+  selectKitOptions: {
+    icon: "bars",
+    showFullTitle: false
   },
 
-  autoHighlight() {},
-
-  computeContent() {
+  content: computed(function() {
     const items = [
       {
         id: "showAddMembersModal",
@@ -31,9 +27,5 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     return items;
-  },
-
-  mutateValue(value) {
-    this.get(value)();
-  }
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/group-notifications-button.js.es6 b/app/assets/javascripts/select-kit/components/group-notifications-button.js.es6
index 7c94a73bae8..7e137afc950 100644
--- a/app/assets/javascripts/select-kit/components/group-notifications-button.js.es6
+++ b/app/assets/javascripts/select-kit/components/group-notifications-button.js.es6
@@ -1,12 +1,12 @@
 import NotificationOptionsComponent from "select-kit/components/notifications-button";
 
 export default NotificationOptionsComponent.extend({
-  pluginApiIdentifiers: ["grouo-notifications-button"],
+  pluginApiIdentifiers: ["group-notifications-button"],
   classNames: ["group-notifications-button"],
-  i18nPrefix: "groups.notifications",
-  allowInitialValueMutation: false,
 
-  mutateValue(value) {
-    this.group.setNotification(value, this.get("user.id"));
-  }
+  selectKitOptions: {
+    i18nPrefix: "i18nPrefix"
+  },
+
+  i18nPrefix: "groups.notifications"
 });
diff --git a/app/assets/javascripts/select-kit/components/list-setting.js.es6 b/app/assets/javascripts/select-kit/components/list-setting.js.es6
index 66b252bc488..b22f8dc535f 100644
--- a/app/assets/javascripts/select-kit/components/list-setting.js.es6
+++ b/app/assets/javascripts/select-kit/components/list-setting.js.es6
@@ -1,53 +1,44 @@
 import MultiSelectComponent from "select-kit/components/multi-select";
-const { isNone, makeArray } = Ember;
+import { MAIN_COLLECTION } from "select-kit/components/select-kit";
+import { computed } from "@ember/object";
+import { readOnly } from "@ember/object/computed";
+import { makeArray } from "discourse-common/lib/helpers";
 
 export default MultiSelectComponent.extend({
   pluginApiIdentifiers: ["list-setting"],
-  classNames: "list-setting",
-  tokenSeparator: "|",
-  settingValue: "",
+  classNames: ["list-setting"],
   choices: null,
-  filterable: true,
+  nameProperty: null,
+  valueProperty: null,
+  content: readOnly("choices"),
+
+  selectKitOptions: {
+    filterable: true,
+    selectedNameComponent: "selectedNameComponent"
+  },
+
+  modifyComponentForRow(collection) {
+    if (
+      collection === MAIN_COLLECTION &&
+      this.settingName &&
+      this.settingName.indexOf("color") > -1
+    ) {
+      return "create-color-row";
+    }
+  },
+
+  selectedNameComponent: computed("settingName", function() {
+    if (this.settingName && this.settingName.indexOf("color") > -1) {
+      return "selected-color";
+    } else {
+      return "selected-name";
+    }
+  }),
+
+  deselect(value) {
+    this.onChangeChoices &&
+      this.onChangeChoices([...new Set([value, ...makeArray(this.choices)])]);
 
-  init() {
     this._super(...arguments);
-
-    if (!isNone(this.settingName)) {
-      this.set("nameProperty", this.settingName);
-    }
-
-    if (this.nameProperty.indexOf("color") > -1) {
-      this.headerComponentOptions.setProperties({
-        selectedNameComponent: "multi-select/selected-color"
-      });
-    }
-  },
-
-  computeContent() {
-    let content;
-    if (isNone(this.choices)) {
-      content = this.settingValue.split(this.tokenSeparator);
-    } else {
-      content = this.choices;
-    }
-
-    return makeArray(content).filter(c => c);
-  },
-
-  mutateValues(values) {
-    this.set("settingValue", values.join(this.tokenSeparator));
-  },
-
-  computeValues() {
-    return this.settingValue.split(this.tokenSeparator).filter(c => c);
-  },
-
-  _handleTabOnKeyDown(event) {
-    if (this.$highlightedRow().length === 1) {
-      this._super(event);
-    } else {
-      this.close();
-      return false;
-    }
   }
 });
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 dc8518edb98..6284181bbeb 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
@@ -1,294 +1,186 @@
-import { empty, alias } from "@ember/object/computed";
-import Category from "discourse/models/category";
+import { empty, or } from "@ember/object/computed";
 import ComboBox from "select-kit/components/combo-box";
 import TagsMixin from "select-kit/mixins/tags";
-import discourseComputed from "discourse-common/utils/decorators";
-import renderTag from "discourse/lib/render-tag";
-import { escapeExpression } from "discourse/lib/utilities";
 import { makeArray } from "discourse-common/lib/helpers";
-import { iconHTML } from "discourse-common/lib/icon-library";
-import { get } from "@ember/object";
-import { isEmpty } from "@ember/utils";
-import { debounce } from "@ember/runloop";
+import { computed } from "@ember/object";
+import { setting } from "discourse/lib/computed";
+
+const SELECTED_TAGS_COLLECTION = "MINI_TAG_CHOOSER_SELECTED_TAGS";
+import { ERRORS_COLLECTION } from "select-kit/components/select-kit";
 
 export default ComboBox.extend(TagsMixin, {
-  allowContentReplacement: true,
   headerComponent: "mini-tag-chooser/mini-tag-chooser-header",
   pluginApiIdentifiers: ["mini-tag-chooser"],
-  attributeBindings: ["categoryId"],
+  attributeBindings: ["selectKit.options.categoryId:category-id"],
   classNames: ["mini-tag-chooser"],
   classNameBindings: ["noTags"],
-  verticalOffset: 3,
-  filterable: true,
-  noTags: empty("selection"),
-  allowCreate: null,
-  allowAny: alias("allowCreate"),
-  caretUpIcon: alias("caretIcon"),
-  caretDownIcon: alias("caretIcon"),
-  isAsync: true,
-  fullWidthOnMobile: true,
+  noTags: empty("value"),
+  maxTagSearchResults: setting("max_tag_search_results"),
+  maxTagsPerTopic: setting("max_tags_per_topic"),
+  highlightedTag: null,
+
+  collections: computed(
+    "mainCollection.[]",
+    "errorsCollection.[]",
+    "highlightedTag",
+    function() {
+      return this._super(...arguments);
+    }
+  ),
+
+  selectKitOptions: {
+    fullWidthOnMobile: true,
+    filterable: true,
+    caretDownIcon: "caretIcon",
+    caretUpIcon: "caretIcon",
+    termMatchesForbidden: false,
+    categoryId: null,
+    everyTag: false,
+    none: "tagging.choose_for_topic",
+    closeOnChange: false,
+    maximum: 10,
+    autoInsertNoneItem: false
+  },
+
+  modifyComponentForRow(collection, item) {
+    if (this.getValue(item) === this.selectKit.filter) {
+      return "select-kit/select-kit-row";
+    }
+
+    return "tag-row";
+  },
+
+  modifyComponentForCollection(collection) {
+    if (collection === SELECTED_TAGS_COLLECTION) {
+      return "mini-tag-chooser/selected-collection";
+    }
+  },
+
+  modifyContentForCollection(collection) {
+    if (collection === SELECTED_TAGS_COLLECTION) {
+      return {
+        selectedTags: this.value,
+        highlightedTag: this.highlightedTag
+      };
+    }
+  },
+
+  allowAnyTag: or("allowCreate", "site.can_create_tag"),
+
+  maximumSelectedTags: computed(function() {
+    return parseInt(
+      this.options.limit || this.options.maximum || this.maxTagsPerTopic,
+      10
+    );
+  }),
 
   init() {
     this._super(...arguments);
 
-    this.set("termMatchesForbidden", false);
-    this.selectionSelector = ".selected-tag";
-
-    if (this.allowCreate !== false) {
-      this.set("allowCreate", this.site.get("can_create_tag"));
-    }
-
-    this.set("templateForRow", rowComponent => {
-      const tag = rowComponent.get("computedContent");
-      return renderTag(get(tag, "value"), {
-        count: get(tag, "originalContent.count"),
-        noHref: true
-      });
-    });
-
-    this.set(
-      "maximum",
-      parseInt(
-        this.limit ||
-          this.maximum ||
-          this.get("siteSettings.max_tags_per_topic"),
-        10
-      )
-    );
+    this.insertAfterCollection(ERRORS_COLLECTION, SELECTED_TAGS_COLLECTION);
   },
 
-  @discourseComputed(
-    "computedValue",
-    "filter",
-    "collectionComputedContent.[]",
-    "hasReachedMaximum",
-    "hasReachedMinimum",
-    "categoryId"
-  )
-  shouldDisplayCreateRow() {
-    if (this.categoryId) {
-      const category = Category.findById(this.categoryId);
-      if (
-        (category.allowed_tags && category.allowed_tags.length > 0) ||
-        (category.allowed_tag_groups && category.allowed_tag_groups.length > 0)
-      ) {
-        return category.allow_global_tags && this._super(...arguments);
-      }
-    }
-    return this._super(...arguments);
-  },
+  caretIcon: computed("selectKit.hasReachedMaximum", function() {
+    return this.selectKit.hasReachedMaximum ? null : "plus";
+  }),
 
-  didInsertElement() {
-    this._super(...arguments);
+  modifySelection(content) {
+    let joinedTags = this.value.join(", ");
 
-    $(this.element.querySelector(".select-kit-body")).on(
-      "mousedown touchstart",
-      ".selected-tag",
-      event => {
-        const $button = $(event.target).closest(".selected-tag");
-        this._destroyEvent(event);
-        this.destroyTags(this.computeContentItem($button.attr("data-value")));
-      }
-    );
-  },
-
-  willDestroyElement() {
-    this._super(...arguments);
-
-    $(this.element.querySelector(".select-kit-body")).off(
-      "mousedown touchstart"
-    );
-  },
-
-  @discourseComputed("hasReachedMaximum")
-  caretIcon(hasReachedMaximum) {
-    return hasReachedMaximum ? null : "plus";
-  },
-
-  @discourseComputed("tags")
-  selection(tags) {
-    return makeArray(tags).map(c => this.computeContentItem(c));
-  },
-
-  filterComputedContent(computedContent) {
-    return computedContent;
-  },
-
-  // we are directly mutatings tags to define the current selection
-  mutateValue() {},
-
-  didPressTab(event) {
-    if (this.isLoading) {
-      this._destroyEvent(event);
-      return false;
-    }
-
-    if (isEmpty(this.filter) && !this.highlighted) {
-      this.$header().focus();
-      this.close(event);
-      return true;
-    }
-
-    if (this.highlighted && this.isExpanded) {
-      this._destroyEvent(event);
-      this.focus();
-      this.select(this.highlighted);
-      return false;
-    } else {
-      this.close(event);
-    }
-
-    return true;
-  },
-
-  @discourseComputed("tags.[]", "filter", "highlightedSelection.[]")
-  collectionHeader(tags, filter, highlightedSelection) {
-    if (!isEmpty(tags)) {
-      let output = "";
-
-      // if we have more than x tags we will also filter the selection
-      if (tags.length >= 20) {
-        tags = tags.filter(t => t.indexOf(filter) >= 0);
-      }
-
-      tags.map(tag => {
-        tag = escapeExpression(tag);
-        const isHighlighted = highlightedSelection
-          .map(s => get(s, "value"))
-          .includes(tag);
-        output += `
-          <button aria-label="${tag}" title="${tag}" class="selected-tag ${
-          isHighlighted ? "is-highlighted" : ""
-        }" data-value="${tag}">
-            ${tag} ${iconHTML("times")}
-          </button>
-        `;
-      });
-
-      return `<div class="selected-tags">${output}</div>`;
-    }
-  },
-
-  computeHeaderContent() {
-    let content = this._super(...arguments);
-
-    const joinedTags = this.selection
-      .map(s => Ember.get(s, "value"))
-      .join(", ");
-
-    if (isEmpty(this.selection)) {
-      content.label = I18n.t("tagging.choose_for_topic");
-    } else {
-      content.label = joinedTags;
-    }
-
-    if (!this.hasReachedMinimum && isEmpty(this.selection)) {
-      const key = this.minimumLabel || "select_kit.min_content_not_reached";
-      const label = I18n.t(key, { count: this.minimum });
+    if (!this.selectKit.hasReachedMinimum) {
+      const key =
+        this.selectKit.options.minimumLabel ||
+        "select_kit.min_content_not_reached";
+      const label = I18n.t(key, { count: this.selectKit.options.minimum });
       content.title = content.name = content.label = label;
     }
 
-    content.title = content.name = content.value = joinedTags;
+    content.title = content.name = content.value = content.label = joinedTags;
+
+    if (content.label.length > 32) {
+      content.label = `${content.label.slice(0, 32)}...`;
+    }
 
     return content;
   },
 
-  _prepareSearch(query, options) {
+  search(filter) {
     const data = {
-      q: query,
-      limit: this.get("siteSettings.max_tag_search_results"),
-      categoryId: this.categoryId
+      q: filter || "",
+      limit: this.maxTagSearchResults,
+      categoryId: this.selectKit.options.categoryId
     };
 
-    if (this.selection) {
-      data.selected_tags = this.selection
-        .map(s => Ember.get(s, "value"))
-        .slice(0, 100);
+    if (this.value) {
+      data.selected_tags = this.value.slice(0, 100);
     }
 
-    if (!this.everyTag) data.filterForInput = true;
+    if (!this.selectKit.options.everyTag) data.filterForInput = true;
 
-    this.searchTags("/tags/filter/search", data, this._transformJson, options);
+    return this.searchTags("/tags/filter/search", data, this._transformJson);
   },
 
   _transformJson(context, json) {
     let results = json.results;
 
-    context.set("termMatchesForbidden", json.forbidden ? true : false);
-    context.set("termMatchErrorMessage", json.forbidden_message);
+    context.setProperties({
+      termMatchesForbidden: json.forbidden ? true : false,
+      termMatchErrorMessage: json.forbidden_message
+    });
 
     if (context.get("siteSettings.tags_sort_alphabetically")) {
       results = results.sort((a, b) => a.text.localeCompare(b.text));
     }
 
-    results = results.filter(r => !context.get("selection").includes(r.id));
-
-    results = results.map(result => {
-      return { id: result.text, name: result.text, count: result.count };
-    });
+    results = results
+      .filter(r => !makeArray(context.tags).includes(r.id))
+      .map(result => {
+        return { id: result.text, name: result.text, count: result.count };
+      });
 
     return results;
   },
 
-  destroyTags(tags) {
-    tags = makeArray(tags).map(c => get(c, "value"));
+  select(value) {
+    this._reset();
 
-    // work around usage with buffered proxy
-    // it does not listen on array changes, similar hack already on select
-    // TODO: FIX buffered-proxy.js to support arrays
-    this.tags.removeObjects(tags);
-    this.set("tags", this.tags.slice(0));
-    this._tagsChanged();
-
-    this.set(
-      "searchDebounce",
-      debounce(this, this._prepareSearch, this.filter, 350)
-    );
-  },
-
-  didDeselect(tags) {
-    this.destroyTags(tags);
-  },
-
-  didUpdateAttrs() {
-    this._super(...arguments);
-
-    this._prepareSearch(this.filter, { background: true });
-  },
-
-  _tagsChanged() {
-    if (this.attrs.onChangeTags) {
-      this.attrs.onChangeTags({ target: { value: this.tags } });
+    if (!this.validateSelect(value)) {
+      return;
     }
+
+    const tags = [...new Set(makeArray(this.value).concat(value))];
+    this.selectKit.change(tags, tags);
   },
 
-  actions: {
-    onSelect(tag) {
-      this.set("tags", makeArray(this.tags).concat(tag));
-      this._tagsChanged();
+  deselect(value) {
+    this._reset();
 
-      this._prepareSearch(this.filter);
-      this.autoHighlight();
-    },
+    const tags = [...new Set(makeArray(this.value).removeObject(value))];
+    this.selectKit.change(tags, tags);
+  },
 
-    onExpand() {
-      if (isEmpty(this.collectionComputedContent)) {
-        this.set(
-          "searchDebounce",
-          debounce(this, this._prepareSearch, this.filter, 350)
-        );
+  _reset() {
+    this.clearErrors();
+    this.set("highlightedTag", null);
+  },
+
+  _onKeydown(event) {
+    if (event.keyCode === 8) {
+      this._onBackspace(this.value, this.highlightedTag);
+    } else {
+      this.set("highlightedTag", null);
+    }
+
+    return true;
+  },
+
+  _onBackspace(value, highlightedTag) {
+    if (value && value.length) {
+      if (!highlightedTag) {
+        this.set("highlightedTag", value.lastObject);
+      } else {
+        this.deselect(highlightedTag);
       }
-    },
-
-    onFilter(filter) {
-      // we start loading right away so we avoid updating createRow multiple times
-      this.startLoading();
-
-      filter = isEmpty(filter) ? null : filter;
-      this.set(
-        "searchDebounce",
-        debounce(this, this._prepareSearch, filter, 350)
-      );
     }
   }
 });
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
index 38ef91b9a83..5c634dba571 100644
--- 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
@@ -1,7 +1,7 @@
-import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
+import ComboBoxSelectBoxHeaderComponent from "select-kit/components/combo-box/combo-box-header";
 
-export default SelectKitHeaderComponent.extend({
+export default ComboBoxSelectBoxHeaderComponent.extend({
   layoutName:
     "select-kit/templates/components/mini-tag-chooser/mini-tag-chooser-header",
-  classNames: "mini-tag-chooser-header"
+  classNames: ["mini-tag-chooser-header"]
 });
diff --git a/app/assets/javascripts/select-kit/components/mini-tag-chooser/selected-collection.js.es6 b/app/assets/javascripts/select-kit/components/mini-tag-chooser/selected-collection.js.es6
new file mode 100644
index 00000000000..7b4ebf9259c
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/mini-tag-chooser/selected-collection.js.es6
@@ -0,0 +1,50 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+import { reads, notEmpty } from "@ember/object/computed";
+
+export default Component.extend({
+  layoutName:
+    "select-kit/templates/components/mini-tag-chooser/selected-collection",
+  classNames: ["mini-tag-chooser-selected-collection", "selected-tags"],
+  isVisible: notEmpty("selectedTags.[]"),
+  selectedTags: reads("collection.content.selectedTags.[]"),
+  highlightedTag: reads("collection.content.highlightedTag"),
+
+  tags: computed(
+    "selectedTags.[]",
+    "highlightedTag",
+    "selectKit.filter",
+    function() {
+      if (!this.selectedTags) {
+        return [];
+      }
+
+      let tags = this.selectedTags;
+      if (tags.length >= 20 && this.selectKit.filter) {
+        tags = tags.filter(t => t.indexOf(this.selectKit.filter) >= 0);
+      } else if (tags.length >= 20) {
+        tags = tags.slice(0, 20);
+      }
+
+      tags = tags.map(selectedTag => {
+        const classNames = ["selected-tag"];
+        if (selectedTag === this.highlightedTag) {
+          classNames.push("is-highlighted");
+        }
+
+        return {
+          value: selectedTag,
+          classNames: classNames.join(" ")
+        };
+      });
+
+      return tags;
+    }
+  ),
+
+  actions: {
+    deselectTag(tag) {
+      return this.selectKit.deselect(tag);
+    }
+  }
+});
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 9a28a53cbc2..3b82012cab7 100644
--- a/app/assets/javascripts/select-kit/components/multi-select.js.es6
+++ b/app/assets/javascripts/select-kit/components/multi-select.js.es6
@@ -1,363 +1,157 @@
+import deprecated from "discourse-common/lib/deprecated";
 import SelectKitComponent from "select-kit/components/select-kit";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
-const { get, isNone, isEmpty, makeArray, run } = Ember;
-import {
-  applyOnSelectPluginApiCallbacks,
-  applyOnSelectNonePluginApiCallbacks
-} from "select-kit/mixins/plugin-api";
+import { computed } from "@ember/object";
+const { makeArray } = Ember;
 
 export default SelectKitComponent.extend({
   pluginApiIdentifiers: ["multi-select"],
   layoutName: "select-kit/templates/components/multi-select",
-  classNames: "multi-select",
-  headerComponent: "multi-select/multi-select-header",
-  headerText: "select_kit.default_header_text",
-  allowAny: true,
-  allowInitialValueMutation: false,
-  autoFilterable: true,
-  selectedNameComponent: "multi-select/selected-name",
-  filterIcon: null,
-  filterComponent: "multi-select/multi-select-filter",
-  computedValues: null,
-  values: null,
+  classNames: ["multi-select"],
+  multiSelect: true,
 
-  init() {
-    this._super(...arguments);
-
-    this.set("computedValues", []);
-
-    if (isNone(this.values)) {
-      this.set("values", []);
-    }
-
-    this.headerComponentOptions.setProperties({
-      selectedNameComponent: this.selectedNameComponent
-    });
+  selectKitOptions: {
+    none: "select_kit.default_header_text",
+    clearable: true,
+    filterable: true,
+    filterIcon: null,
+    clearOnClick: true,
+    closeOnChange: false,
+    autoInsertNoneItem: false,
+    headerComponent: "multi-select/multi-select-header",
+    filterComponent: "multi-select/multi-select-filter"
   },
 
-  @on("didRender")
-  _setChoicesMaxWidth() {
-    const width = this.$body().outerWidth(false);
-    if (width > 0) {
-      this.element.querySelector(".choices").style.maxWidth = `${width}px`;
-    }
+  search(filter) {
+    return this._super(filter).filter(
+      content => !makeArray(this.selectedContent).includes(content)
+    );
   },
 
-  @on("didUpdateAttrs", "init")
-  _compute() {
-    run.scheduleOnce("afterRender", () => {
-      this.willComputeAttributes();
-      let content = this.content || [];
-      let asyncContent = this.asyncContent || [];
-      content = this.willComputeContent(content);
-      asyncContent = this.willComputeAsyncContent(asyncContent);
-      let values = this._beforeWillComputeValues(this.values);
-      content = this.computeContent(content);
-      asyncContent = this.computeAsyncContent(asyncContent);
-      content = this._beforeDidComputeContent(content);
-      asyncContent = this._beforeDidComputeAsyncContent(asyncContent);
-      values = this.willComputeValues(values);
-      values = this.computeValues(values);
-      values = this._beforeDidComputeValues(values);
-      this.didComputeContent(content);
-      this.didComputeAsyncContent(asyncContent);
-      this.didComputeValues(values);
-      this.didComputeAttributes();
-    });
+  deselect(item) {
+    this.clearErrors();
+
+    const newContent = this.selectedContent.filter(
+      content => this.getValue(item) !== this.getValue(content)
+    );
+
+    this.selectKit.change(
+      this.valueProperty ? newContent.mapBy(this.valueProperty) : newContent,
+      newContent
+    );
   },
 
-  @discourseComputed("filter", "shouldDisplayCreateRow")
-  createRowComputedContent(filter, shouldDisplayCreateRow) {
-    if (shouldDisplayCreateRow) {
-      let content = this.createContentFromInput(filter);
-      return this.computeContentItem(content, { created: true });
-    }
-  },
+  select(value, item) {
+    if (!value || !value.length) {
+      if (!this.validateSelect(this.selectKit.highlighted)) {
+        return;
+      }
 
-  @discourseComputed("filter", "computedValues")
-  shouldDisplayCreateRow(filter, computedValues) {
-    return this._super() && !computedValues.includes(filter);
-  },
-
-  @discourseComputed
-  shouldDisplayFilter() {
-    return true;
-  },
-
-  _beforeWillComputeValues(values) {
-    return values.map(v => this._cast(v === "" ? null : v));
-  },
-  willComputeValues(values) {
-    return values;
-  },
-  computeValues(values) {
-    return values;
-  },
-  _beforeDidComputeValues(values) {
-    this.setProperties({ computedValues: values });
-    return values;
-  },
-  didComputeValues(values) {
-    return values;
-  },
-
-  mutateAttributes() {
-    run.next(() => {
-      if (this.isDestroyed || this.isDestroying) return;
-
-      this.mutateContent(this.computedContent);
-      this.mutateValues(this.computedValues);
-    });
-  },
-  mutateValues(computedValues) {
-    this.set("values", computedValues);
-  },
-  mutateContent() {},
-
-  forceValues(values) {
-    this.mutateValues(values);
-    this._compute();
-  },
-
-  filterComputedContent(computedContent, computedValues, filter) {
-    return computedContent.filter(c => {
-      return this._normalize(get(c, "name")).indexOf(filter) > -1;
-    });
-  },
-
-  @discourseComputed("computedAsyncContent.[]", "computedValues.[]")
-  filteredAsyncComputedContent(computedAsyncContent, computedValues) {
-    computedAsyncContent = computedAsyncContent.filter(c => {
-      return !computedValues.includes(get(c, "value"));
-    });
-
-    if (this.limitMatches) {
-      return computedAsyncContent.slice(0, this.limitMatches);
-    }
-
-    return computedAsyncContent;
-  },
-
-  @discourseComputed("computedContent.[]", "computedValues.[]", "filter")
-  filteredComputedContent(computedContent, computedValues, filter) {
-    computedContent = computedContent.filter(c => {
-      return !computedValues.includes(get(c, "value"));
-    });
-
-    if (this.shouldFilter) {
-      computedContent = this.filterComputedContent(
-        computedContent,
-        computedValues,
-        this._normalize(filter)
+      this.selectKit.change(
+        makeArray(this.value).concat(
+          makeArray(this.getValue(this.selectKit.highlighted))
+        ),
+        makeArray(this.selectedContent).concat(
+          makeArray(this.selectKit.highlighted)
+        )
       );
-    }
-
-    if (this.limitMatches) {
-      return computedContent.slice(0, this.limitMatches);
-    }
-
-    return computedContent;
-  },
-
-  computeHeaderContent() {
-    let content = {
-      title: this.title,
-      selection: this.selection
-    };
-
-    if (this.noneLabel) {
-      if (!this.hasSelection) {
-        content.title = content.name = content.label = I18n.t(this.noneLabel);
-      }
     } else {
-      if (!this.hasReachedMinimum) {
-        const key = this.minimumLabel || "select_kit.min_content_not_reached";
-        content.title = content.name = content.label = I18n.t(key, {
-          count: this.minimum
-        });
-      }
-    }
-
-    return content;
-  },
-
-  @discourseComputed("filter")
-  templateForCreateRow() {
-    return rowComponent => {
-      return I18n.t("select_kit.create", {
-        content: rowComponent.get("computedContent.name")
-      });
-    };
-  },
-
-  validateSelect() {
-    return this._super() && !this.hasReachedMaximum;
-  },
-
-  @discourseComputed("computedValues.[]", "computedContent.[]")
-  selection(computedValues, computedContent) {
-    const selected = [];
-
-    computedValues.forEach(v => {
-      const value = computedContent.findBy("value", v);
-      if (value) selected.push(value);
-    });
-
-    return selected;
-  },
-
-  @discourseComputed("selection.[]")
-  hasSelection(selection) {
-    return !isEmpty(selection);
-  },
-
-  didPressTab(event) {
-    if (isEmpty(this.filter) && !this.highlighted) {
-      this.$header().focus();
-      this.close(event);
-      return true;
-    }
-
-    if (this.highlighted && this.isExpanded) {
-      this._destroyEvent(event);
-      this.focus();
-      this.select(this.highlighted);
-      return false;
-    } else {
-      this.close(event);
-    }
-
-    return true;
-  },
-
-  autoHighlight() {
-    run.schedule("afterRender", () => {
-      if (!this.isExpanded) return;
-      if (!this.renderedBodyOnce) return;
-      if (this.highlighted) return;
-
-      if (isEmpty(this.collectionComputedContent)) {
-        if (this.createRowComputedContent) {
-          this.highlight(this.createRowComputedContent);
-        } else if (this.noneRowComputedContent && this.hasSelection) {
-          this.highlight(this.noneRowComputedContent);
+      const existingItem = this.findValue(
+        this.mainCollection,
+        this.selectKit.valueProperty ? item : value
+      );
+      if (existingItem) {
+        if (!this.validateSelect(item)) {
+          return;
         }
-      } else {
-        this.highlight(this.get("collectionComputedContent.firstObject"));
       }
-    });
-  },
 
-  select(computedContentItem) {
-    if (
-      !computedContentItem ||
-      computedContentItem.__sk_row_type === "noneRow"
-    ) {
-      applyOnSelectNonePluginApiCallbacks(this.pluginApiIdentifiers, this);
-      this._boundaryActionHandler("onSelectNone");
-      this.clearSelection();
-      return;
-    }
-
-    if (computedContentItem.__sk_row_type === "noopRow") {
-      applyOnSelectPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        computedContentItem.value,
-        this
+      const newValues = makeArray(this.value).concat(makeArray(value));
+      const newContent = makeArray(this.selectedContent).concat(
+        makeArray(item)
       );
 
-      this._boundaryActionHandler("onSelect", computedContentItem.value);
-      return;
+      this.selectKit.change(
+        newValues,
+        newContent.length
+          ? newContent
+          : makeArray(this.defaultItem(value, value))
+      );
     }
+  },
 
-    if (computedContentItem.__sk_row_type === "createRow") {
-      if (
-        !this.computedValues.includes(computedContentItem.value) &&
-        this.validateCreate(computedContentItem.value)
-      ) {
-        this.willCreate(computedContentItem);
+  selectedContent: computed("value.[]", "content.[]", function() {
+    if (this.value && this.value.length) {
+      let content = [];
 
-        computedContentItem.__sk_row_type = null;
-        this.computedContent.pushObject(computedContentItem);
+      this.value.forEach(v => {
+        if (this.selectKit.valueProperty) {
+          const c = makeArray(this.content).findBy(
+            this.selectKit.valueProperty,
+            v
+          );
+          if (c) {
+            content.push(c);
+          }
+        } else {
+          if (makeArray(this.content).includes(v)) {
+            content.push(v);
+          }
+        }
+      });
 
-        run.schedule("afterRender", () => {
-          this.didCreate(computedContentItem);
-          this._boundaryActionHandler("onCreate");
-        });
-
-        this.select(computedContentItem);
-        return;
-      } else {
-        this._boundaryActionHandler("onCreateFailure");
-        return;
-      }
+      return this.selectKit.modifySelection(content || []);
+    } else {
+      return this.selectKit.noneItem;
     }
+  }),
 
-    if (this.validateSelect(computedContentItem)) {
-      this.willSelect(computedContentItem);
-      this.clearFilter();
-      this.setProperties({ highlighted: null });
-      this.computedValues.pushObject(computedContentItem.value);
+  _onKeydown(event) {
+    if (event.keyCode === 8) {
+      event.stopPropagation();
 
-      run.next(() => this.mutateAttributes());
-
-      run.schedule("afterRender", () => {
-        this.didSelect(computedContentItem);
-
-        applyOnSelectPluginApiCallbacks(
-          this.pluginApiIdentifiers,
-          computedContentItem.value,
-          this
+      const input = this.getFilterInput();
+      if (input && !input.value.length >= 1) {
+        const selected = this.element.querySelectorAll(
+          ".select-kit-header .choice.select-kit-selected-name"
         );
 
-        this.autoHighlight();
-
-        this._boundaryActionHandler("onSelect", computedContentItem.value);
-      });
-    } else {
-      this._boundaryActionHandler("onSelectFailure");
-    }
-  },
-
-  deselect(rowComputedContentItems) {
-    this.willDeselect(rowComputedContentItems);
-
-    rowComputedContentItems = makeArray(rowComputedContentItems);
-    const generatedComputedContents = this._filterRemovableComputedContents(
-      makeArray(rowComputedContentItems)
-    );
-    this.setProperties({ highlighted: null, highlightedSelection: [] });
-    this.computedValues.removeObjects(
-      rowComputedContentItems.map(r => r.value)
-    );
-    this.computedContent.removeObjects([
-      ...rowComputedContentItems,
-      ...generatedComputedContents
-    ]);
-
-    run.next(() => {
-      this.mutateAttributes();
-
-      run.schedule("afterRender", () => {
-        this.didDeselect(rowComputedContentItems);
-        this.autoHighlight();
-
-        if (!this.isDestroying && !this.isDestroyed) {
-          this._positionWrapper();
+        if (selected.length) {
+          const lastSelected = selected[selected.length - 1];
+          if (lastSelected) {
+            if (lastSelected.classList.contains("is-highlighted")) {
+              this.deselect(this.selectedContent.lastObject);
+            } else {
+              lastSelected.classList.add("is-highlighted");
+            }
+          }
         }
-      });
-    });
+      }
+    } else {
+      const selected = this.element.querySelectorAll(
+        ".select-kit-header .choice.select-kit-selected-name"
+      );
+      selected.forEach(s => s.classList.remove("is-highlighted"));
+    }
+
+    return true;
   },
 
-  close(event) {
-    this.clearHighlightSelection();
+  handleDeprecations() {
+    this._super(...arguments);
 
-    this._super(event);
+    this._deprecateValues();
   },
 
-  unfocus(event) {
-    this.clearHighlightSelection();
+  _deprecateValues() {
+    if (this.values && !this.value) {
+      deprecated(
+        "The `values` property is deprecated for multi-select. Use `value` instead",
+        {
+          since: "v2.4.0"
+        }
+      );
 
-    this._super(event);
+      this.set("value", this.values);
+    }
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/multi-select/multi-select-filter.js.es6 b/app/assets/javascripts/select-kit/components/multi-select/multi-select-filter.js.es6
index 4224d8d6b42..aa514938166 100644
--- a/app/assets/javascripts/select-kit/components/multi-select/multi-select-filter.js.es6
+++ b/app/assets/javascripts/select-kit/components/multi-select/multi-select-filter.js.es6
@@ -6,7 +6,7 @@ export default SelectKitFilterComponent.extend({
   layoutName: "select-kit/templates/components/select-kit/select-kit-filter",
   classNames: ["multi-select-filter"],
 
-  @discourseComputed("placeholder", "hasSelection")
+  @discourseComputed("placeholder", "selectKit.hasSelection")
   computedPlaceholder(placeholder, hasSelection) {
     if (hasSelection) return "";
     return isEmpty(placeholder) ? "" : I18n.t(placeholder);
diff --git a/app/assets/javascripts/select-kit/components/multi-select/multi-select-header.js.es6 b/app/assets/javascripts/select-kit/components/multi-select/multi-select-header.js.es6
index 9b6c22f5274..b9c500dc07a 100644
--- a/app/assets/javascripts/select-kit/components/multi-select/multi-select-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/multi-select/multi-select-header.js.es6
@@ -1,55 +1,24 @@
-import { alias, or } from "@ember/object/computed";
-import { makeArray } from "discourse-common/lib/helpers";
-import { on } from "discourse-common/utils/decorators";
-import discourseComputed from "discourse-common/utils/decorators";
 import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
+import { computed } from "@ember/object";
 
 export default SelectKitHeaderComponent.extend({
-  attributeBindings: [
-    "label:title",
-    "label:aria-label",
-    "names:data-name",
-    "values:data-value"
-  ],
-  classNames: "multi-select-header",
+  classNames: ["multi-select-header"],
   layoutName:
     "select-kit/templates/components/multi-select/multi-select-header",
-  selectedNameComponent: alias("options.selectedNameComponent"),
 
-  forceEscape: alias("options.forceEscape"),
+  selectedNames: computed("selectedContent", function() {
+    return Ember.makeArray(this.selectedContent).map(c => this.getName(c));
+  }),
 
-  ariaLabel: or("computedContent.ariaLabel", "title", "names"),
+  selectedValue: computed("selectedContent", function() {
+    return Ember.makeArray(this.selectedContent)
+      .map(c => {
+        if (this.getName(c) !== this.getName(this.selectKit.noneItem)) {
+          return this.getValue(c);
+        }
 
-  title: or("computedContent.title", "names"),
-
-  @on("didRender")
-  _positionFilter() {
-    if (!this.shouldDisplayFilter) return;
-
-    const $filter = $(this.element.querySelector(".filter"));
-    $filter.width(0);
-
-    const leftHeaderOffset = $(this.element).offset().left;
-    const leftFilterOffset = $filter.offset().left;
-    const offset = leftFilterOffset - leftHeaderOffset;
-    const width = $(this.element).outerWidth(false);
-    const availableSpace = width - offset;
-    const $choices = $filter.parent(".choices");
-    const parentRightPadding = parseInt($choices.css("padding-right"), 10);
-    $filter.width(availableSpace - parentRightPadding * 4);
-  },
-
-  @discourseComputed("computedContent.selection.[]")
-  names(selection) {
-    return makeArray(selection)
-      .map(s => s.name)
-      .join(",");
-  },
-
-  @discourseComputed("computedContent.selection.[]")
-  values(selection) {
-    return makeArray(selection)
-      .map(s => s.value)
-      .join(",");
-  }
+        return null;
+      })
+      .filter(Boolean);
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/multi-select/selected-category.js.es6 b/app/assets/javascripts/select-kit/components/multi-select/selected-category.js.es6
index 155506095b8..b3f3d4fb15e 100644
--- a/app/assets/javascripts/select-kit/components/multi-select/selected-category.js.es6
+++ b/app/assets/javascripts/select-kit/components/multi-select/selected-category.js.es6
@@ -1,16 +1,15 @@
-import SelectedNameComponent from "select-kit/components/multi-select/selected-name";
-import discourseComputed from "discourse-common/utils/decorators";
+import SelectedNameComponent from "select-kit/components/selected-name";
 import { categoryBadgeHTML } from "discourse/helpers/category-link";
+import { computed } from "@ember/object";
 
 export default SelectedNameComponent.extend({
-  classNames: "selected-category",
+  classNames: ["selected-category"],
   layoutName: "select-kit/templates/components/multi-select/selected-category",
 
-  @discourseComputed("computedContent.originalContent")
-  badge(category) {
-    return categoryBadgeHTML(category, {
+  badge: computed("item", function() {
+    return categoryBadgeHTML(this.item, {
       allowUncategorized: true,
       link: false
     }).htmlSafe();
-  }
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6 b/app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6
index 3574550c203..a109d3df2bf 100644
--- a/app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6
+++ b/app/assets/javascripts/select-kit/components/multi-select/selected-color.js.es6
@@ -1,8 +1,8 @@
-import SelectedNameComponent from "select-kit/components/multi-select/selected-name";
+import SelectedNameComponent from "select-kit/components/selected-name";
 import discourseComputed from "discourse-common/utils/decorators";
 
 export default SelectedNameComponent.extend({
-  classNames: "selected-color",
+  classNames: ["select-kit-selected-color"],
 
   @discourseComputed("name")
   footerContent(name) {
diff --git a/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6 b/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6
deleted file mode 100644
index ab6a36c36cd..00000000000
--- a/app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6
+++ /dev/null
@@ -1,56 +0,0 @@
-import { or, alias } from "@ember/object/computed";
-import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
-import { computed } from "@ember/object";
-
-export default Component.extend({
-  attributeBindings: [
-    "tabindex",
-    "ariaLabel:aria-label",
-    "title",
-    "name:data-name",
-    "value:data-value",
-    "guid:data-guid"
-  ],
-  classNames: ["selected-name", "choice"],
-  classNameBindings: ["isHighlighted", "isLocked"],
-  layoutName: "select-kit/templates/components/multi-select/selected-name",
-  tagName: "span",
-  tabindex: -1,
-
-  @discourseComputed("computedContent")
-  guid(computedContent) {
-    return Ember.guidFor(computedContent);
-  },
-
-  ariaLabel: or("computedContent.ariaLabel", "title"),
-
-  @discourseComputed("computedContent.title", "name")
-  title(computedContentTitle, name) {
-    if (computedContentTitle) return computedContentTitle;
-    if (name) return name;
-
-    return null;
-  },
-
-  label: or("computedContent.label", "title", "name"),
-
-  name: alias("computedContent.name"),
-
-  value: alias("computedContent.value"),
-
-  isLocked: computed("computedContent.locked", function() {
-    return this.getWithDefault("computedContent.locked", false);
-  }),
-
-  @discourseComputed("computedContent", "highlightedSelection.[]")
-  isHighlighted(computedContent, highlightedSelection) {
-    return highlightedSelection.includes(this.computedContent);
-  },
-
-  click() {
-    if (this.isLocked) return false;
-    this.onClickSelectionItem([this.computedContent]);
-    return false;
-  }
-});
diff --git a/app/assets/javascripts/select-kit/components/notifications-button.js.es6 b/app/assets/javascripts/select-kit/components/notifications-button.js.es6
index e6eeb542f64..f52b5446d30 100644
--- a/app/assets/javascripts/select-kit/components/notifications-button.js.es6
+++ b/app/assets/javascripts/select-kit/components/notifications-button.js.es6
@@ -1,54 +1,37 @@
-import { alias } from "@ember/object/computed";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
-import discourseComputed, {
-  observes,
-  on
-} from "discourse-common/utils/decorators";
-import { buttonDetails } from "discourse/lib/notification-levels";
-import { allLevels } from "discourse/lib/notification-levels";
+import { allLevels, buttonDetails } from "discourse/lib/notification-levels";
+import { computed, setProperties } from "@ember/object";
 
 export default DropdownSelectBoxComponent.extend({
-  classNames: "notifications-button",
-  nameProperty: "key",
-  fullWidthOnMobile: true,
+  pluginApiIdentifiers: ["notifications-button"],
+  classNames: ["notifications-button"],
   content: allLevels,
-  castInteger: true,
-  autofilterable: false,
-  filterable: false,
-  rowComponent: "notifications-button/notifications-button-row",
-  allowInitialValueMutation: false,
-  i18nPrefix: "",
-  i18nPostfix: "",
+  nameProperty: "key",
 
-  @discourseComputed("iconForSelectedDetails")
-  headerIcon(iconForSelectedDetails) {
-    return iconForSelectedDetails;
+  selectKitOptions: {
+    autoFilterable: false,
+    filterable: false,
+    i18nPrefix: "",
+    i18nPostfix: ""
   },
 
-  @on("init")
-  @observes("i18nPostfix")
-  _setNotificationsButtonComponentOptions() {
-    this.rowComponentOptions.setProperties({
-      i18nPrefix: this.i18nPrefix,
-      i18nPostfix: this.i18nPostfix
+  modifyComponentForRow() {
+    return "notifications-button/notifications-button-row";
+  },
+
+  modifySelection(content) {
+    content = content || {};
+    const { i18nPrefix, i18nPostfix } = this.selectKit.options;
+    setProperties(content, {
+      label: I18n.t(
+        `${i18nPrefix}.${this.buttonForValue.key}${i18nPostfix}.title`
+      ),
+      icon: this.buttonForValue.icon
     });
-  },
-
-  iconForSelectedDetails: alias("selectedDetails.icon"),
-
-  computeHeaderContent() {
-    let content = this._super(...arguments);
-    content.name = I18n.t(
-      `${this.i18nPrefix}.${this.get("selectedDetails.key")}${this.get(
-        "i18nPostfix"
-      )}.title`
-    );
-    content.hasSelection = this.hasSelection;
     return content;
   },
 
-  @discourseComputed("computedValue")
-  selectedDetails(computedValue) {
-    return buttonDetails(computedValue);
-  }
+  buttonForValue: computed("value", function() {
+    return buttonDetails(this.value);
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/notifications-button/notifications-button-row.js.es6 b/app/assets/javascripts/select-kit/components/notifications-button/notifications-button-row.js.es6
index 5d62a82e4bc..3638bb6169a 100644
--- a/app/assets/javascripts/select-kit/components/notifications-button/notifications-button-row.js.es6
+++ b/app/assets/javascripts/select-kit/components/notifications-button/notifications-button-row.js.es6
@@ -1,45 +1,32 @@
-import { alias } from "@ember/object/computed";
-import DropdownSelectBoxRoxComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-row";
-import { buttonDetails } from "discourse/lib/notification-levels";
-import discourseComputed from "discourse-common/utils/decorators";
-import { iconHTML } from "discourse-common/lib/icon-library";
+import { readOnly } from "@ember/object/computed";
+import { computed } from "@ember/object";
+import DropdownSelectBoxRowComponent from "select-kit/components/dropdown-select-box/dropdown-select-box-row";
+import { escapeExpression } from "discourse/lib/utilities";
 
-export default DropdownSelectBoxRoxComponent.extend({
-  classNames: "notifications-button-row",
+export default DropdownSelectBoxRowComponent.extend({
+  classNames: ["notifications-button-row"],
+  i18nPrefix: readOnly("selectKit.options.i18nPrefix"),
+  i18nPostfix: readOnly("selectKit.options.i18nPostfix"),
 
-  i18nPrefix: alias("options.i18nPrefix"),
-  i18nPostfix: alias("options.i18nPostfix"),
+  label: computed("_start", function() {
+    return escapeExpression(I18n.t(`${this._start}.title`));
+  }),
 
-  @discourseComputed("computedContent.value", "i18nPrefix", "i18nPostfix")
-  title(value, prefix, postfix) {
-    const key = buttonDetails(value).key;
-    return I18n.t(`${prefix}.${key}${postfix}.title`);
-  },
+  title: readOnly("label"),
 
-  @discourseComputed(
-    "computedContent.name",
-    "computedContent.originalContent.icon"
-  )
-  icon(contentName, icon) {
-    return iconHTML(icon, { class: contentName.dasherize() });
-  },
+  icons: computed("title", "item.icon", function() {
+    return [escapeExpression(this.item.icon)];
+  }),
 
-  @discourseComputed("_start")
-  description(_start) {
+  description: computed("_start", function() {
     if (this.site && this.site.mobileView) {
       return null;
     }
 
-    return Handlebars.escapeExpression(I18n.t(`${_start}.description`));
-  },
+    return escapeExpression(I18n.t(`${this._start}.description`));
+  }),
 
-  @discourseComputed("_start")
-  name(_start) {
-    return Handlebars.escapeExpression(I18n.t(`${_start}.title`));
-  },
-
-  @discourseComputed("i18nPrefix", "i18nPostfix", "computedContent.name")
-  _start(prefix, postfix, contentName) {
-    return `${prefix}.${contentName}${postfix}`;
-  }
+  _start: computed("i18nPrefix", "i18nPostfix", "rowName", function() {
+    return `${this.i18nPrefix}.${this.rowName}${this.i18nPostfix}`;
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/period-chooser.js.es6 b/app/assets/javascripts/select-kit/components/period-chooser.js.es6
index 60c6cd476a4..8431089252d 100644
--- a/app/assets/javascripts/select-kit/components/period-chooser.js.es6
+++ b/app/assets/javascripts/select-kit/components/period-chooser.js.es6
@@ -1,34 +1,37 @@
-import { oneWay, alias } from "@ember/object/computed";
+import { oneWay, readOnly } from "@ember/object/computed";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export default DropdownSelectBoxComponent.extend({
   classNames: ["period-chooser"],
-  rowComponent: "period-chooser/period-chooser-row",
-  headerComponent: "period-chooser/period-chooser-header",
   content: oneWay("site.periods"),
-  value: alias("period"),
-  isHidden: alias("showPeriods"),
+  value: readOnly("period"),
+  isVisible: readOnly("showPeriods"),
+  valueProperty: null,
+  nameProperty: null,
+
+  modifyComponentForRow() {
+    return "period-chooser/period-chooser-row";
+  },
 
   @discourseComputed("isExpanded")
   caretIcon(isExpanded) {
     return isExpanded ? "caret-up" : "caret-down";
   },
 
-  @on("didUpdateAttrs", "init")
-  _setFullDay() {
-    this.headerComponentOptions.setProperties({
-      fullDay: this.fullDay
-    });
-    this.rowComponentOptions.setProperties({
-      fullDay: this.fullDay
-    });
+  selectKitOptions: {
+    filterable: false,
+    autoFilterable: false,
+    fullDay: "fullDay",
+    headerComponent: "period-chooser/period-chooser-header"
   },
 
   actions: {
-    onSelect() {
+    onChange(value) {
       if (this.action) {
-        this.action(this.computedValue);
+        this.action(value);
+      } else {
+        this.attrs.onChange && this.attrs.onChange(value);
       }
     }
   }
diff --git a/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-header.js.es6 b/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-header.js.es6
index f1ee7712a25..0f553cd1569 100644
--- a/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-header.js.es6
@@ -3,5 +3,5 @@ import DropdownSelectBoxHeaderomponent from "select-kit/components/dropdown-sele
 export default DropdownSelectBoxHeaderomponent.extend({
   layoutName:
     "select-kit/templates/components/period-chooser/period-chooser-header",
-  classNames: "period-chooser-header"
+  classNames: ["period-chooser-header"]
 });
diff --git a/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-row.js.es6 b/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-row.js.es6
index 4cb25af58e7..4a2e42a0639 100644
--- a/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-row.js.es6
+++ b/app/assets/javascripts/select-kit/components/period-chooser/period-chooser-row.js.es6
@@ -4,10 +4,10 @@ import discourseComputed from "discourse-common/utils/decorators";
 export default DropdownSelectBoxRowComponent.extend({
   layoutName:
     "select-kit/templates/components/period-chooser/period-chooser-row",
-  classNames: "period-chooser-row",
+  classNames: ["period-chooser-row"],
 
-  @discourseComputed("computedContent")
-  title(computedContent) {
-    return I18n.t(`filters.top.${computedContent.name || "this_week"}`).title;
+  @discourseComputed("rowName")
+  title(rowName) {
+    return I18n.t(`filters.top.${rowName || "this_week"}`).title;
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/pinned-options.js.es6 b/app/assets/javascripts/select-kit/components/pinned-options.js.es6
index c96856a804a..3d88220e9ce 100644
--- a/app/assets/javascripts/select-kit/components/pinned-options.js.es6
+++ b/app/assets/javascripts/select-kit/components/pinned-options.js.es6
@@ -1,20 +1,16 @@
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
-import { on } from "discourse-common/utils/decorators";
 import { iconHTML } from "discourse-common/lib/icon-library";
+import { computed } from "@ember/object";
 
 export default DropdownSelectBoxComponent.extend({
   pluginApiIdentifiers: ["pinned-options"],
-  classNames: "pinned-options",
-  allowInitialValueMutation: false,
+  classNames: ["pinned-options"],
 
-  autoHighlight() {},
-
-  computeHeaderContent() {
-    let content = this._super(...arguments);
+  modifySelection(content) {
     const pinnedGlobally = this.get("topic.pinned_globally");
-    const pinned = this.computedValue;
+    const pinned = this.value;
     const globally = pinnedGlobally ? "_globally" : "";
-    const state = pinned ? `pinned${globally}` : "unpinned";
+    const state = pinned === "pinned" ? `pinned${globally}` : "unpinned";
     const title = I18n.t(`topic_statuses.${state}.title`);
 
     content.label = `${title}${iconHTML("caret-down")}`.htmlSafe();
@@ -24,15 +20,14 @@ export default DropdownSelectBoxComponent.extend({
     return content;
   },
 
-  @on("init")
-  _setContent() {
-    const globally = this.get("topic.pinned_globally") ? "_globally" : "";
+  content: computed(function() {
+    const globally = this.topic.pinned_globally ? "_globally" : "";
 
-    this.set("content", [
+    return [
       {
         id: "pinned",
-        name: I18n.t("topic_statuses.pinned" + globally + ".title"),
-        description: I18n.t("topic_statuses.pinned" + globally + ".help"),
+        name: I18n.t(`topic_statuses.pinned${globally}.title`),
+        description: I18n.t(`topic_statuses.pinned${globally}.help`),
         icon: "thumbtack"
       },
       {
@@ -41,14 +36,14 @@ export default DropdownSelectBoxComponent.extend({
         icon: "thumbtack unpinned",
         description: I18n.t("topic_statuses.unpinned.help")
       }
-    ]);
-  },
+    ];
+  }),
 
   actions: {
-    onSelect() {
+    onSelect(value) {
       const topic = this.topic;
 
-      if (this.computedValue === "unpinned") {
+      if (value === "unpinned") {
         topic.clearPin();
       } else {
         topic.rePin();
diff --git a/app/assets/javascripts/select-kit/components/search-advanced-category-chooser.js.es6 b/app/assets/javascripts/select-kit/components/search-advanced-category-chooser.js.es6
index 831507a3b8b..77e46499ba0 100644
--- a/app/assets/javascripts/select-kit/components/search-advanced-category-chooser.js.es6
+++ b/app/assets/javascripts/select-kit/components/search-advanced-category-chooser.js.es6
@@ -1,32 +1,14 @@
 import CategoryChooserComponent from "select-kit/components/category-chooser";
-import Category from "discourse/models/category";
 
 export default CategoryChooserComponent.extend({
   pluginApiIdentifiers: ["search-advanced-category-chooser"],
   classNames: ["search-advanced-category-chooser"],
-  rootNone: true,
-  rootNoneLabel: "category.all",
-  allowUncategorized: true,
-  clearable: true,
-  permissionType: null,
 
-  init() {
-    this._super(...arguments);
-
-    this.rowComponentOptions.setProperties({
-      displayCategoryDescription: false
-    });
-  },
-
-  mutateValue(value) {
-    if (value) {
-      this.set("value", Category.findById(value));
-    } else {
-      this.set("value", null);
-    }
-  },
-
-  computeValue(category) {
-    if (category) return category.id;
+  selectKitOptions: {
+    allowUncategorized: true,
+    clearable: true,
+    none: "category.all",
+    displayCategoryDescription: false,
+    permissionType: null
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/select-kit.js.es6 b/app/assets/javascripts/select-kit/components/select-kit.js.es6
index 6c2199a5b71..06d1ecf15df 100644
--- a/app/assets/javascripts/select-kit/components/select-kit.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit.js.es6
@@ -1,521 +1,988 @@
-import discourseComputed from "discourse-common/utils/decorators";
-import EmberObject from "@ember/object";
+import { computed, default as EmberObject } from "@ember/object";
 import Component from "@ember/component";
-const { get, isNone, run, isEmpty, makeArray } = Ember;
-
+import deprecated from "discourse-common/lib/deprecated";
+const { get, isNone, makeArray } = Ember;
 import UtilsMixin from "select-kit/mixins/utils";
-import DomHelpersMixin from "select-kit/mixins/dom-helpers";
-import EventsMixin from "select-kit/mixins/events";
 import PluginApiMixin from "select-kit/mixins/plugin-api";
 import {
-  applyContentPluginApiCallbacks,
+  next,
+  debounce,
+  cancel,
+  throttle,
+  bind,
+  schedule
+} from "@ember/runloop";
+import { Promise } from "rsvp";
+import {
   applyHeaderContentPluginApiCallbacks,
-  applyCollectionHeaderCallbacks
+  applyModifyNoSelectionPluginApiCallbacks,
+  applyContentPluginApiCallbacks,
+  applyOnOpenPluginApiCallbacks,
+  applyOnClosePluginApiCallbacks,
+  applyOnInputPluginApiCallbacks
 } from "select-kit/mixins/plugin-api";
 
+export const MAIN_COLLECTION = "MAIN_COLLECTION";
+export const ERRORS_COLLECTION = "ERRORS_COLLECTION";
+
+const EMPTY_OBJECT = Object.freeze({});
+const SELECT_KIT_OPTIONS = Ember.Mixin.create({
+  mergedProperties: ["selectKitOptions"],
+  selectKitOptions: EMPTY_OBJECT
+});
+
 export default Component.extend(
-  UtilsMixin,
+  SELECT_KIT_OPTIONS,
   PluginApiMixin,
-  DomHelpersMixin,
-  EventsMixin,
+  UtilsMixin,
   {
     pluginApiIdentifiers: ["select-kit"],
     layoutName: "select-kit/templates/components/select-kit",
     classNames: ["select-kit"],
     classNameBindings: [
-      "isLoading",
-      "isFocused",
-      "isExpanded",
-      "isDisabled",
-      "isHidden",
-      "hasSelection",
-      "hasReachedMaximum",
-      "hasReachedMinimum"
+      "selectKit.isLoading:is-loading",
+      "selectKit.isExpanded:is-expanded",
+      "selectKit.isDisabled:is-disabled",
+      "selectKit.isHidden:is-hidden",
+      "selectKit.hasSelection:has-selection",
+      "selectKit.hasReachedMaximum:has-reached-maximum",
+      "selectKit.hasReachedMinimum:has-reached-minimum"
     ],
-    isDisabled: false,
-    isExpanded: false,
-    isFocused: false,
-    isHidden: false,
-    isLoading: false,
-    isAsync: false,
-    renderedBodyOnce: false,
-    renderedFilterOnce: false,
     tabindex: 0,
-    none: null,
-    highlighted: null,
-    valueAttribute: "id",
-    nameProperty: "name",
-    autoFilterable: false,
-    filterable: false,
-    filter: "",
-    previousFilter: "",
-    filterIcon: "search",
-    headerIcon: null,
-    rowComponent: "select-kit/select-kit-row",
-    rowComponentOptions: null,
-    noneRowComponent: "select-kit/select-kit-none-row",
-    createRowComponent: "select-kit/select-kit-create-row",
-    filterComponent: "select-kit/select-kit-filter",
-    headerComponent: "select-kit/select-kit-header",
-    headerComponentOptions: null,
-    headerComputedContent: null,
-    collectionHeaderComputedContent: null,
-    collectionComponent: "select-kit/select-kit-collection",
-    verticalOffset: 0,
-    horizontalOffset: 0,
-    fullWidthOnMobile: false,
-    castInteger: false,
-    castBoolean: false,
-    allowAny: false,
-    allowInitialValueMutation: false,
     content: null,
-    computedContent: null,
-    limitMatches: null,
-    nameChanges: false,
-    allowContentReplacement: false,
-    collectionHeader: null,
-    allowAutoSelectFirst: true,
-    highlightedSelection: null,
-    maximum: null,
-    minimum: null,
-    minimumLabel: null,
-    maximumLabel: null,
-    forceEscape: false,
+    value: null,
+    selectKit: null,
+    mainCollection: null,
+    errorsCollection: null,
+    options: null,
+    valueProperty: "id",
+    nameProperty: "name",
 
     init() {
       this._super(...arguments);
 
-      this.selectKitComponent = true;
-      this.noneValue = "__none__";
+      this._searchPromise = null;
+
+      this.set("errorsCollection", []);
+      this._collections = [ERRORS_COLLECTION, MAIN_COLLECTION];
+
+      !this.options && this.set("options", EmberObject.create({}));
+
+      this.handleDeprecations();
+
       this.set(
-        "headerComponentOptions",
-        EmberObject.create({ forceEscape: this.forceEscape })
-      );
-      this.set(
-        "rowComponentOptions",
+        "selectKit",
         EmberObject.create({
-          forceEscape: this.forceEscape
+          uniqueID: Ember.guidFor(this),
+          valueProperty: this.valueProperty,
+          nameProperty: this.nameProperty,
+          options: EmberObject.create(),
+
+          isLoading: false,
+          isHidden: false,
+          isExpanded: false,
+          isFilterExpanded: false,
+          hasSelection: false,
+          hasNoContent: true,
+          highlighted: null,
+          noneItem: null,
+          filter: null,
+
+          modifyContent: bind(this, this._modifyContentWrapper),
+          modifySelection: bind(this, this._modifySelectionWrapper),
+          modifyComponentForRow: bind(this, this._modifyComponentForRowWrapper),
+          modifyContentForCollection: bind(
+            this,
+            this._modifyContentForCollectionWrapper
+          ),
+          modifyComponentForCollection: bind(
+            this,
+            this._modifyComponentForCollectionWrapper
+          ),
+
+          toggle: bind(this, this._toggle),
+          close: bind(this, this._close),
+          open: bind(this, this._open),
+          highlightNext: bind(this, this._highlightNext),
+          highlightPrevious: bind(this, this._highlightPrevious),
+          change: bind(this, this._onChangeWrapper),
+          select: bind(this, this.select),
+          deselect: bind(this, this.deselect),
+
+          onOpen: bind(this, this._onOpenWrapper),
+          onClose: bind(this, this._onCloseWrapper),
+          onInput: bind(this, this._onInput),
+          onClearSelection: bind(this, this._onClearSelection),
+          onHover: bind(this, this._onHover),
+          onKeydown: bind(this, this._onKeydownWrapper)
         })
       );
-      this.set("computedContent", []);
-      this.set("highlightedSelection", []);
-
-      if (this.nameChanges) {
-        this.addObserver(
-          `content.@each.${this.nameProperty}`,
-          this,
-          this._compute
-        );
-      }
-
-      if (this.allowContentReplacement) {
-        this.addObserver(`content.[]`, this, this._compute);
-      }
-
-      if (this.isAsync) {
-        this.addObserver(`asyncContent.[]`, this, this._compute);
-      }
     },
 
-    keyDown(event) {
-      if (!isEmpty(this.filter)) return true;
+    _modifyComponentForRowWrapper(collection, item) {
+      let component = this.modifyComponentForRow(collection, item);
+      return component || "select-kit/select-kit-row";
+    },
 
-      const keyCode = event.keyCode || event.which;
+    modifyComponentForRow() {},
 
-      if (event.metaKey === true && keyCode === this.keys.A) {
-        this.didPressSelectAll();
-        return false;
+    _modifyContentForCollectionWrapper(identifier) {
+      let collection = this.modifyContentForCollection(identifier);
+
+      if (!collection) {
+        switch (identifier) {
+          case ERRORS_COLLECTION:
+            collection = this.errorsCollection;
+            break;
+          default:
+            collection = this.mainCollection;
+            break;
+        }
       }
 
-      if (keyCode === this.keys.BACKSPACE) {
-        this.didPressBackspace();
-        return false;
+      return collection;
+    },
+
+    modifyContentForCollection() {},
+
+    _modifyComponentForCollectionWrapper(identifier) {
+      let component = this.modifyComponentForCollection(identifier);
+
+      if (!component) {
+        switch (identifier) {
+          case ERRORS_COLLECTION:
+            component = "select-kit/errors-collection";
+            break;
+          default:
+            component = "select-kit/select-kit-collection";
+            break;
+        }
       }
+
+      return component;
+    },
+
+    modifyComponentForCollection() {},
+
+    didUpdateAttrs() {
+      this._super(...arguments);
+
+      this.set("selectKit.isDisabled", this.isDisabled || false);
+
+      this.handleDeprecations();
     },
 
     willDestroyElement() {
-      this.removeObserver(
-        `content.@each.${this.nameProperty}`,
-        this,
-        "_compute"
-      );
-      this.removeObserver(`content.[]`, this, "_compute");
-      this.removeObserver(`asyncContent.[]`, this, "_compute");
+      this._super(...arguments);
+
+      this._searchPromise && cancel(this._searchPromise);
+
+      if (this.popper) {
+        this.popper.destroy();
+        this.popper = null;
+      }
     },
 
-    willComputeAttributes() {},
-    didComputeAttributes() {},
+    didReceiveAttrs() {
+      this._super(...arguments);
 
-    willComputeContent(content) {
-      return applyContentPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        content,
-        this
+      const computedOptions = {};
+      Object.keys(this.selectKitOptions).forEach(key => {
+        const value = this.selectKitOptions[key];
+
+        if (
+          key === "componentForRow" ||
+          key === "contentForCollection" ||
+          key === "componentForCollection"
+        ) {
+          if (typeof value === "string") {
+            computedOptions[key] = () => value;
+          } else {
+            computedOptions[key] = bind(this, value);
+          }
+
+          return;
+        }
+
+        if (
+          typeof value === "string" &&
+          value.indexOf(".") < 0 &&
+          value in this
+        ) {
+          const computedValue = get(this, value);
+          if (typeof computedValue !== "function") {
+            computedOptions[key] = get(this, value);
+            return;
+          }
+        }
+        computedOptions[key] = value;
+      });
+      this.selectKit.options.setProperties(
+        Object.assign(computedOptions, this.options || {})
       );
-    },
-    computeContent(content) {
-      return content;
-    },
-    _beforeDidComputeContent(content) {
-      let existingCreatedComputedContent = [];
-      if (!this.allowContentReplacement) {
-        existingCreatedComputedContent = this.computedContent.filterBy(
-          "created",
-          true
+
+      this.selectKit.setProperties({
+        hasSelection: !Ember.isEmpty(this.value),
+        noneItem: this._modifyNoSelectionWrapper()
+      });
+
+      if (this.selectKit.isExpanded) {
+        if (this._searchPromise) {
+          cancel(this._searchPromise);
+        }
+        this._searchPromise = this._searchWrapper(this.selectKit.filter);
+      }
+
+      if (this.computeContent) {
+        this._deprecated(
+          `The \`computeContent()\` function is deprecated pass a \`content\` attribute or define a \`content\` computed property in your component.`
         );
+
+        this.set("content", this.computeContent());
       }
+    },
 
-      this.setProperties({
-        computedContent: content
-          .map(c => this.computeContentItem(c))
-          .concat(existingCreatedComputedContent)
-      });
-      return content;
+    selectKitOptions: {
+      showFullTitle: true,
+      none: null,
+      translatedNone: null,
+      filterable: false,
+      autoFilterable: "autoFilterable",
+      filterIcon: "search",
+      filterPlaceholder: "filterPlaceholder",
+      translatedfilterPlaceholder: null,
+      icon: null,
+      icons: null,
+      maximum: null,
+      minimum: null,
+      minimumLabel: null,
+      maximumLabel: null,
+      autoInsertNoneItem: true,
+      clearOnClick: false,
+      closeOnChange: true,
+      limitMatches: null,
+      placement: "bottom-start",
+      filterComponent: "select-kit/select-kit-filter",
+      selectedNameComponent: "selected-name",
+      hasReachedMaximum: "hasReachedMaximum",
+      hasReachedMinimum: "hasReachedMinimum"
     },
-    didComputeContent() {},
 
-    willComputeAsyncContent(content) {
-      return content;
-    },
-    computeAsyncContent(content) {
-      return content;
-    },
-    _beforeDidComputeAsyncContent(content) {
-      content = applyContentPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        content,
-        this
+    autoFilterable: computed("content.[]", "selectKit.filter", function() {
+      return (
+        this.selectKit.filter &&
+        this.options.autoFilterable &&
+        this.content.length > 15
       );
-      this.setProperties({
-        computedAsyncContent: content.map(c => this.computeAsyncContentItem(c))
-      });
-      return content;
-    },
-    didComputeAsyncContent() {},
+    }),
 
-    computeContentItem(contentItem, options) {
-      let originalContent;
-      options = options || {};
-      const name = options.name;
-
-      if (typeof contentItem === "string" || typeof contentItem === "number") {
-        originalContent = {};
-        originalContent[this.valueAttribute] = contentItem;
-        originalContent[this.nameProperty] = name || contentItem;
-      } else {
-        originalContent = contentItem;
-      }
-
-      let computedContentItem = {
-        value: this._cast(this.valueForContentItem(contentItem)),
-        name: name || this._nameForContent(contentItem),
-        locked: false,
-        created: options.created || false,
-        __sk_row_type: options.created
-          ? "createRow"
-          : contentItem.__sk_row_type,
-        originalContent
-      };
-
-      return computedContentItem;
-    },
-
-    computeAsyncContentItem(contentItem, options) {
-      return this.computeContentItem(contentItem, options);
-    },
-
-    @discourseComputed(
-      "isAsync",
-      "isLoading",
-      "filteredAsyncComputedContent.[]",
-      "filteredComputedContent.[]"
-    )
-    collectionComputedContent(
-      isAsync,
-      isLoading,
-      filteredAsyncComputedContent,
-      filteredComputedContent
-    ) {
-      if (isAsync) {
-        return isLoading ? [] : filteredAsyncComputedContent;
-      } else {
-        return filteredComputedContent;
-      }
-    },
-
-    validateCreate(created) {
-      return !this.hasReachedMaximum && created.length > 0;
-    },
-
-    validateSelect() {
-      return !this.hasReachedMaximum;
-    },
-
-    @discourseComputed("maximum", "selection.[]")
-    hasReachedMaximum(maximum, selection) {
-      if (!maximum) return false;
-      selection = makeArray(selection);
-      return selection.length >= maximum;
-    },
-
-    @discourseComputed("minimum", "selection.[]")
-    hasReachedMinimum(minimum, selection) {
-      if (!minimum) return true;
-      selection = makeArray(selection);
-      return selection.length >= minimum;
-    },
-
-    @discourseComputed("shouldFilter", "allowAny")
-    shouldDisplayFilter(shouldFilter, allowAny) {
-      if (shouldFilter) return true;
-      if (allowAny) return true;
-      return false;
-    },
-
-    @discourseComputed("filter", "collectionComputedContent.[]", "isLoading")
-    noContentRow(filter, collectionComputedContent, isLoading) {
-      if (
-        filter.length > 0 &&
-        collectionComputedContent.length === 0 &&
-        !isLoading
-      ) {
-        return this.termMatchErrorMessage || I18n.t("select_kit.no_content");
-      }
-    },
-
-    @discourseComputed("hasReachedMaximum", "hasReachedMinimum", "isExpanded")
-    validationMessage(hasReachedMaximum, hasReachedMinimum) {
-      if (hasReachedMaximum && this.maximum) {
-        const key = this.maximumLabel || "select_kit.max_content_reached";
-        return I18n.t(key, { count: this.maximum });
-      }
-
-      if (!hasReachedMinimum && this.minimum) {
-        const key = this.minimumLabel || "select_kit.min_content_not_reached";
-        return I18n.t(key, { count: this.minimum });
-      }
-    },
-
-    @discourseComputed("allowAny")
-    filterPlaceholder(allowAny) {
-      return allowAny
+    filterPlaceholder: computed("options.allowAny", function() {
+      return this.options.allowAny
         ? "select_kit.filter_placeholder_with_any"
         : "select_kit.filter_placeholder";
-    },
+    }),
 
-    @discourseComputed(
-      "filter",
-      "filterable",
-      "autoFilterable",
-      "renderedFilterOnce"
-    )
-    shouldFilter(filter, filterable, autoFilterable, renderedFilterOnce) {
-      if (renderedFilterOnce && filterable) return true;
-      if (filterable) return true;
-      if (autoFilterable && filter.length > 0) return true;
-      return false;
-    },
+    collections: computed(
+      "selectedContent.[]",
+      "mainCollection.[]",
+      "errorsCollection.[]",
+      function() {
+        return this._collections.map(identifier => {
+          return {
+            identifier,
+            content: this.selectKit.modifyContentForCollection(identifier)
+          };
+        });
+      }
+    ),
+
+    hasReachedMaximum: computed(
+      "selectKit.options.maximum",
+      "value",
+      function() {
+        const maximum = parseInt(this.selectKit.options.maximum, 10);
+
+        if (maximum && makeArray(this.value).length >= maximum) {
+          return true;
+        }
 
-    @discourseComputed(
-      "computedValue",
-      "filter",
-      "collectionComputedContent.[]",
-      "hasReachedMaximum",
-      "isLoading"
-    )
-    shouldDisplayCreateRow(
-      computedValue,
-      filter,
-      collectionComputedContent,
-      hasReachedMaximum,
-      isLoading
-    ) {
-      if (isLoading || hasReachedMaximum) return false;
-      if (collectionComputedContent.map(c => c.value).includes(filter))
         return false;
-      if (this.allowAny && this.validateCreate(filter)) return true;
-      return false;
-    },
-
-    @discourseComputed("filter", "shouldDisplayCreateRow")
-    createRowComputedContent(filter, shouldDisplayCreateRow) {
-      if (shouldDisplayCreateRow) {
-        let content = this.createContentFromInput(filter);
-        let computedContentItem = this.computeContentItem(content, {
-          created: true
-        });
-        computedContentItem.__sk_row_type = "createRow";
-        return computedContentItem;
       }
-    },
+    ),
 
-    @discourseComputed
-    templateForRow() {
-      return () => null;
-    },
+    hasReachedMinimum: computed(
+      "selectKit.options.minimum",
+      "value",
+      function() {
+        const minimum = parseInt(this.selectKit.options.minimum, 10);
 
-    @discourseComputed
-    templateForNoneRow() {
-      return () => null;
-    },
+        if (!minimum || makeArray(this.value).length >= minimum) {
+          return true;
+        }
 
-    @discourseComputed("filter")
-    templateForCreateRow() {
-      return rowComponent => {
-        return I18n.t("select_kit.create", {
-          content: rowComponent.get("computedContent.name")
-        });
-      };
-    },
-
-    @discourseComputed("none")
-    noneRowComputedContent(none) {
-      if (isNone(none)) return null;
-
-      let noneRowComputedContent;
-
-      switch (typeof none) {
-        case "string":
-          noneRowComputedContent = this.computeContentItem(this.noneValue, {
-            name: (I18n.t(none) || "").htmlSafe()
-          });
-          break;
-        default:
-          noneRowComputedContent = this.computeContentItem(none);
+        return false;
       }
-
-      noneRowComputedContent.__sk_row_type = "noneRow";
-
-      return noneRowComputedContent;
-    },
+    ),
 
     createContentFromInput(input) {
       return input;
     },
 
-    highlightSelection(items) {
-      this.set("highlightedSelection", makeArray(items));
-      this.notifyPropertyChange("highlightedSelection");
+    validateCreate(filter, content) {
+      this.clearErrors();
+
+      return (
+        filter.length > 0 &&
+        content &&
+        !content.map(c => this.getValue(c)).includes(filter) &&
+        !makeArray(this.value).includes(filter)
+      );
     },
 
-    clearHighlightSelection() {
-      this.highlightSelection([]);
-    },
+    validateSelect() {
+      this.clearErrors();
 
-    willSelect() {},
-    didSelect() {},
+      const selection = Ember.makeArray(this.value);
 
-    didClearSelection() {},
+      const maximum = this.selectKit.options.maximum;
 
-    willCreate() {},
-    didCreate() {},
-
-    willDeselect() {},
-    didDeselect() {},
-
-    clearFilter() {
-      this.$filterInput().val("");
-      this.setProperties({ filter: "", previousFilter: "" });
-    },
-
-    startLoading() {
-      this.set("isLoading", true);
-      this.set("highlighted", null);
-      this._boundaryActionHandler("onStartLoading");
-    },
-
-    stopLoading() {
-      if (this.site && !this.site.isMobileDevice) {
-        this.focusFilterOrHeader();
+      if (maximum && selection.length >= maximum) {
+        const key =
+          this.selectKit.options.maximumLabel ||
+          "select_kit.max_content_reached";
+        this.addError(I18n.t(key, { count: maximum }));
+        return false;
       }
 
-      this.set("isLoading", false);
-      this._boundaryActionHandler("onStopLoading");
+      const minimum = this.selectKit.options.minimum;
+      if (minimum && selection.length <= minimum) {
+        const key =
+          this.selectKit.options.minimumLabel ||
+          "select_kit.min_content_not_reached";
+        this.addError(I18n.t(key, { count: minimum }));
+        return false;
+      }
+
+      return true;
     },
 
-    @discourseComputed(
-      "selection.[]",
-      "isExpanded",
-      "filter",
-      "highlightedSelection.[]"
-    )
-    collectionHeaderComputedContent() {
-      return applyCollectionHeaderCallbacks(
+    addError(error) {
+      this.errorsCollection.pushObject(error);
+
+      this._safeAfterRender(() => this.popper && this.popper.update());
+    },
+
+    clearErrors() {
+      if (!this.element || this.isDestroyed || this.isDestroying) {
+        return;
+      }
+
+      this.set("errorsCollection", []);
+    },
+
+    prependCollection(identifier) {
+      this._collections.unshift(identifier);
+    },
+
+    appendCollection(identifier) {
+      this._collections.push(identifier);
+    },
+
+    insertCollectionAtIndex(identifier, index) {
+      this._collections.insertAt(index, identifier);
+    },
+
+    insertBeforeCollection(identifier, insertedIdentifier) {
+      const index = this._collections.indexOf(identifier);
+      this.insertCollectionAtIndex(insertedIdentifier, index - 1);
+    },
+
+    insertAfterCollection(identifier, insertedIdentifier) {
+      const index = this._collections.indexOf(identifier);
+      this.insertCollectionAtIndex(insertedIdentifier, index + 1);
+    },
+
+    _onInput(event) {
+      this.popper && this.popper.update();
+
+      if (this._searchPromise) {
+        cancel(this._searchPromise);
+      }
+
+      const input = applyOnInputPluginApiCallbacks(
         this.pluginApiIdentifiers,
-        this.collectionHeader,
-        this
+        event,
+        this.selectKit
+      );
+
+      if (input) {
+        this.selectKit.set("isLoading", true);
+        debounce(this, this._debouncedInput, event.target.value, 200);
+      }
+    },
+
+    _debouncedInput(filter) {
+      this.selectKit.set("filter", filter);
+      this._searchPromise = this._searchWrapper(filter);
+    },
+
+    _onChangeWrapper(value, items) {
+      this.selectKit.set("filter", null);
+
+      return new Promise(resolve => {
+        if (
+          !this.selectKit.valueProperty &&
+          this.selectKit.noneItem === value
+        ) {
+          value = null;
+          items = [];
+        }
+
+        this._boundaryActionHandler("onChange", value, items);
+        resolve(items);
+      }).finally(() => {
+        if (!this.isDestroying && !this.isDestroyed) {
+          if (this.selectKit.options.closeOnChange) {
+            this.selectKit.close();
+          }
+
+          this._safeAfterRender(() => {
+            this._focusFilter();
+            this.popper && this.popper.update();
+          });
+        }
+      });
+    },
+
+    _modifyContentWrapper(content) {
+      content = this.modifyContent(content);
+
+      return applyContentPluginApiCallbacks(
+        this.pluginApiIdentifiers,
+        content,
+        this.selectKit
       );
     },
 
-    @discourseComputed("selection.[]", "isExpanded", "headerIcon")
-    headerComputedContent() {
-      return applyHeaderContentPluginApiCallbacks(
+    modifyContent(content) {
+      return content;
+    },
+
+    _modifyNoSelectionWrapper() {
+      let none = this.modifyNoSelection();
+
+      return applyModifyNoSelectionPluginApiCallbacks(
         this.pluginApiIdentifiers,
-        this.computeHeaderContent(),
-        this
+        none,
+        this.selectKit
       );
     },
 
+    modifyNoSelection() {
+      if (this.selectKit.options.translatedNone) {
+        return this.defaultItem(null, this.selectKit.options.translatedNone);
+      }
+
+      let none = this.selectKit.options.none;
+      if (isNone(none) && !this.selectKit.options.allowAny) return null;
+
+      if (
+        isNone(none) &&
+        this.selectKit.options.allowAny &&
+        !this.selectKit.isExpanded
+      ) {
+        return this.defaultItem(
+          null,
+          I18n.t("select_kit.filter_placeholder_with_any")
+        );
+      }
+
+      let item;
+      switch (typeof none) {
+        case "string":
+          item = this.defaultItem(null, I18n.t(none));
+          break;
+        default:
+          item = none;
+      }
+
+      return item;
+    },
+
+    _modifySelectionWrapper(item) {
+      applyHeaderContentPluginApiCallbacks(
+        this.pluginApiIdentifiers,
+        item,
+        this.selectKit
+      );
+
+      return this.modifySelection(item);
+    },
+
+    modifySelection(item) {
+      return item;
+    },
+
+    _onKeydownWrapper(event) {
+      return this._boundaryActionHandler("onKeydown", event);
+    },
+
+    _onHover(value, item) {
+      throttle(this, this._highlight, item, 25, true);
+    },
+
+    _highlight(item) {
+      this.selectKit.set("highlighted", item);
+    },
+
     _boundaryActionHandler(actionName, ...params) {
-      if (get(this.actions, actionName)) {
-        run.next(() => this.send(actionName, ...params));
-      } else if (this.get(actionName)) {
-        run.next(() => this.get(actionName)(...params));
+      if (!this.element || this.isDestroying || this.isDestroyed) {
+        return;
       }
-    },
 
-    highlight(computedContent) {
-      this.set("highlighted", computedContent);
-      this._boundaryActionHandler("onHighlight", computedContent);
-    },
+      let boundaryAction = true;
 
-    clearSelection() {
-      this.deselect(this.selection);
-      this.focusFilterOrHeader();
-      this.didClearSelection();
-    },
+      const privateActionName = `_${actionName}`;
+      const privateAction = get(this, privateActionName);
+      if (privateAction) {
+        boundaryAction = privateAction.call(this, ...params);
+      }
 
-    actions: {
-      onToggle() {
-        this.clearHighlightSelection();
-
-        if (this.isExpanded) {
-          this.collapse();
-        } else {
-          this.expand();
+      if (this.actions) {
+        const componentAction = get(this.actions, actionName);
+        if (boundaryAction && componentAction) {
+          boundaryAction = componentAction.call(this, ...params);
         }
-      },
-
-      onClickRow(computedContentItem) {
-        this.didClickRow(computedContentItem);
-      },
-
-      onClickSelectionItem(computedContentItem) {
-        this.didClickSelectionItem(computedContentItem);
-      },
-
-      onClearSelection() {
-        this.clearSelection();
-      },
-
-      onMouseoverRow(computedContentItem) {
-        this.highlight(computedContentItem);
-      },
-
-      onFilterComputedContent(filter) {
-        if (filter === this.previousFilter) return;
-
-        this.clearHighlightSelection();
-
-        this.setProperties({
-          highlighted: null,
-          renderedFilterOnce: true,
-          previousFilter: filter,
-          filter
-        });
-        this.autoHighlight();
-        this._boundaryActionHandler("onFilter", filter);
       }
+
+      const action = get(this, actionName);
+      if (boundaryAction && action) {
+        boundaryAction = action.call(this, ...params);
+      }
+
+      return boundaryAction;
+    },
+
+    deselect() {
+      this.clearErrors();
+      this.selectKit.change(null, null);
+    },
+
+    search(filter) {
+      let content = this.content || [];
+      if (filter) {
+        filter = this._normalize(filter);
+        content = content.filter(c => {
+          const name = this._normalize(this.getName(c));
+          return name && name.indexOf(filter) > -1;
+        });
+      }
+      return content;
+    },
+
+    _searchWrapper(filter) {
+      this.clearErrors();
+      this.setProperties({ mainCollection: [], "selectKit.isLoading": true });
+      this._safeAfterRender(() => this.popper && this.popper.update());
+
+      let content = [];
+
+      return Promise.resolve(this.search(filter)).then(result => {
+        content = content.concat(makeArray(result));
+        content = this.selectKit.modifyContent(content).filter(Boolean);
+
+        if (this.selectKit.valueProperty) {
+          content = content.uniqBy(this.selectKit.valueProperty);
+        } else {
+          content = content.uniq();
+        }
+
+        if (this.selectKit.options.limitMatches) {
+          content = content.slice(0, this.selectKit.options.limitMatches);
+        }
+
+        const noneItem = this.selectKit.noneItem;
+
+        if (
+          this.selectKit.options.allowAny &&
+          filter &&
+          this.getName(noneItem) !== filter
+        ) {
+          filter = this.createContentFromInput(filter);
+          if (this.validateCreate(filter, content)) {
+            content.unshift(this.defaultItem(filter, filter));
+          }
+        }
+
+        const hasNoContent = Ember.isEmpty(content);
+
+        if (
+          this.selectKit.hasSelection &&
+          noneItem &&
+          this.selectKit.options.autoInsertNoneItem
+        ) {
+          content.unshift(noneItem);
+        }
+
+        this.set("mainCollection", content);
+
+        this.selectKit.setProperties({
+          highlighted:
+            this.singleSelect && this.value
+              ? this.itemForValue(this.value)
+              : this.mainCollection.firstObject,
+          isLoading: false,
+          hasNoContent
+        });
+
+        this._safeAfterRender(() => {
+          this.popper && this.popper.update();
+          this._focusFilter();
+        });
+      });
+    },
+
+    _safeAfterRender(fn) {
+      next(() => {
+        schedule("afterRender", () => {
+          if (!this.element || this.isDestroyed || this.isDestroying) {
+            return;
+          }
+
+          fn();
+        });
+      });
+    },
+
+    _scrollToRow(rowItem) {
+      const value = this.getValue(rowItem);
+      const rowContainer = this.element.querySelector(
+        `.select-kit-row[data-value="${value}"]`
+      );
+
+      if (rowContainer) {
+        const $collection = $(
+          this.element.querySelector(".select-kit-collection")
+        );
+
+        const collectionTop = $collection.position().top;
+
+        $collection.scrollTop(
+          $collection.scrollTop() +
+            $(rowContainer).position().top -
+            collectionTop
+        );
+      }
+    },
+
+    _highlightNext() {
+      const highlightedIndex = this.mainCollection.indexOf(
+        this.selectKit.highlighted
+      );
+      let newHighlightedIndex = highlightedIndex;
+      const count = this.mainCollection.length;
+
+      if (highlightedIndex < count - 1) {
+        newHighlightedIndex = highlightedIndex + 1;
+      } else {
+        newHighlightedIndex = 0;
+      }
+
+      const highlighted = this.mainCollection.objectAt(newHighlightedIndex);
+      if (highlighted) {
+        this._scrollToRow(highlighted);
+        this.set("selectKit.highlighted", highlighted);
+      }
+    },
+
+    _highlightPrevious() {
+      const highlightedIndex = this.mainCollection.indexOf(
+        this.selectKit.highlighted
+      );
+      let newHighlightedIndex = highlightedIndex;
+      const count = this.mainCollection.length;
+
+      if (highlightedIndex > 0) {
+        newHighlightedIndex = highlightedIndex - 1;
+      } else {
+        newHighlightedIndex = count - 1;
+      }
+
+      const highlighted = this.mainCollection.objectAt(newHighlightedIndex);
+      if (highlighted) {
+        this._scrollToRow(highlighted);
+        this.set("selectKit.highlighted", highlighted);
+      }
+    },
+
+    select(value, item) {
+      if (!value) {
+        if (!this.validateSelect(this.selectKit.highlighted)) {
+          return;
+        }
+
+        this.selectKit.change(
+          this.getValue(this.selectKit.highlighted),
+          this.selectKit.highlighted
+        );
+      } else {
+        const existingItem = this.findValue(this.mainCollection, item);
+        if (existingItem) {
+          if (!this.validateSelect(item)) {
+            return;
+          }
+        }
+
+        this.selectKit.change(value, item || this.defaultItem(value, value));
+      }
+    },
+
+    _onClearSelection() {
+      this.selectKit.change(null, null);
+    },
+
+    _onOpenWrapper(event) {
+      let boundaryAction = this._boundaryActionHandler("onOpen");
+
+      boundaryAction = applyOnOpenPluginApiCallbacks(
+        this.pluginApiIdentifiers,
+        this.selectKit,
+        event
+      );
+
+      return boundaryAction;
+    },
+
+    _onCloseWrapper(event) {
+      this._focusFilter(this.multiSelect);
+
+      this.set("selectKit.highlighted", null);
+
+      let boundaryAction = this._boundaryActionHandler("onClose");
+
+      boundaryAction = applyOnClosePluginApiCallbacks(
+        this.pluginApiIdentifiers,
+        this.selectKit,
+        event
+      );
+
+      return boundaryAction;
+    },
+
+    _toggle(event) {
+      if (this.selectKit.isExpanded) {
+        this._close(event);
+      } else {
+        this._open(event);
+      }
+    },
+
+    _close(event) {
+      if (!this.selectKit.isExpanded) {
+        return;
+      }
+
+      this.clearErrors();
+
+      if (!this.selectKit.onClose(event)) {
+        return;
+      }
+
+      this.selectKit.setProperties({
+        isExpanded: false,
+        filter: null
+      });
+    },
+
+    _open(event) {
+      if (this.selectKit.isExpanded) {
+        return;
+      }
+
+      this.clearErrors();
+
+      if (!this.selectKit.onOpen(event)) {
+        return;
+      }
+
+      if (!this.popper) {
+        const anchor = document.querySelector(
+          `[data-select-kit-id=${this.selectKit.uniqueID}-header]`
+        );
+        const popper = document.querySelector(
+          `[data-select-kit-id=${this.selectKit.uniqueID}-body]`
+        );
+
+        if (!this.site.mobileView && popper.offsetWidth < anchor.offsetWidth) {
+          popper.style.minWidth = `${anchor.offsetWidth}px`;
+        }
+
+        const inModal = $(this.element).parents("#discourse-modal").length;
+
+        if (!this.site.mobileView && inModal) {
+          popper.style.width = `${anchor.offsetWidth}px`;
+        }
+
+        /* global Popper:true */
+        this.popper = Popper.createPopper(anchor, popper, {
+          eventsEnabled: false,
+          strategy: inModal ? "fixed" : "absolute",
+          placement: this.selectKit.options.placement,
+          modifiers: [
+            {
+              name: "positionWrapper",
+              phase: "afterWrite",
+              enabled: true,
+              fn: data => {
+                const wrapper = this.element.querySelector(
+                  ".select-kit-wrapper"
+                );
+                if (wrapper) {
+                  let height = this.element.offsetHeight;
+
+                  const body = this.element.querySelector(".select-kit-body");
+                  if (body) {
+                    height += body.offsetHeight;
+                  }
+
+                  const popperElement = data.state.elements.popper;
+                  if (
+                    popperElement &&
+                    popperElement.getAttribute("data-popper-placement") ===
+                      "top-start"
+                  ) {
+                    this.element.classList.remove("is-under");
+                    this.element.classList.add("is-above");
+                  } else {
+                    this.element.classList.remove("is-above");
+                    this.element.classList.add("is-under");
+                  }
+
+                  wrapper.style.width = `${this.element.offsetWidth}px`;
+                  wrapper.style.height = `${height}px`;
+                }
+              }
+            }
+          ]
+        });
+      }
+
+      this.selectKit.setProperties({
+        isExpanded: true,
+        isFilterExpanded:
+          this.selectKit.options.filterable || this.selectKit.options.allowAny
+      });
+
+      if (this._searchPromise) {
+        cancel(this._searchPromise);
+      }
+      this._searchPromise = this._searchWrapper();
+
+      this._safeAfterRender(() => {
+        this._focusFilter();
+        this.popper && this.popper.update();
+      });
+    },
+
+    _focusFilter(forceHeader = false) {
+      this._safeAfterRender(() => {
+        const input = this.getFilterInput();
+        if (!forceHeader && input) {
+          input.focus({ preventScroll: true });
+        } else {
+          const headerContainer = this.getHeader();
+          headerContainer && headerContainer.focus({ preventScroll: true });
+        }
+      });
+    },
+
+    getFilterInput() {
+      return document.querySelector(
+        `[data-select-kit-id=${this.selectKit.uniqueID}-filter] input`
+      );
+    },
+
+    getHeader() {
+      return document.querySelector(
+        `[data-select-kit-id=${this.selectKit.uniqueID}-header]`
+      );
+    },
+
+    handleDeprecations() {
+      this._deprecateValueAttribute();
+      this._deprecateMutations();
+      this._deprecateOptions();
+    },
+
+    _deprecated(text) {
+      const discourseSetup = document.getElementById("data-discourse-setup");
+      if (
+        discourseSetup &&
+        discourseSetup.getAttribute("data-environment") === "development"
+      ) {
+        deprecated(text, { since: "v2.4.0" });
+      }
+    },
+
+    _deprecateValueAttribute() {
+      if (this.valueAttribute) {
+        this._deprecated(
+          "The `valueAttribute` is deprecated. Use `valueProperty` instead"
+        );
+
+        this.set("valueProperty", this.valueAttribute);
+      }
+    },
+
+    _deprecateMutations() {
+      this.actions = this.actions || {};
+      this.attrs = this.attrs || {};
+
+      if (!this.attrs.onChange && !this.actions.onChange) {
+        this._deprecated(
+          "Implicit mutation has been deprecated, please use `onChange` handler"
+        );
+
+        this.actions.onChange =
+          this.attrs.onSelect ||
+          this.actions.onSelect ||
+          (value => this.set("value", value));
+      }
+    },
+
+    _deprecateOptions() {
+      const migrations = {
+        headerIcon: "icon",
+        onExpand: "onOpen",
+        onCollapse: "onClose",
+        allowAny: "options.allowAny",
+        allowCreate: "options.allowAny",
+        filterable: "options.filterable",
+        excludeCategoryId: "options.excludeCategoryId",
+        scopedCategoryId: "options.scopedCategoryId",
+        allowUncategorized: "options.allowUncategorized",
+        none: "options.none",
+        rootNone: "options.none",
+        isDisabled: "options.isDisabled",
+        rootNoneLabel: "options.none",
+        showFullTitle: "options.showFullTitle",
+        title: "options.translatedNone",
+        maximum: "options.maximum",
+        minimum: "options.minimum",
+        i18nPostfix: "options.i18nPostfix",
+        i18nPrefix: "options.i18nPrefix"
+      };
+
+      Object.keys(migrations).forEach(from => {
+        const to = migrations[from];
+        if (this.get(from) && !this.get(to)) {
+          this._deprecated(
+            `The \`${from}\` attribute is deprecated. Use \`${to}\` instead`
+          );
+
+          this.set(to, this.get(from));
+        }
+      });
     }
   }
 );
diff --git a/app/assets/javascripts/select-kit/components/select-kit/errors-collection.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/errors-collection.js.es6
new file mode 100644
index 00000000000..ed4c78ae0b0
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/select-kit/errors-collection.js.es6
@@ -0,0 +1,9 @@
+import Component from "@ember/component";
+import { notEmpty } from "@ember/object/computed";
+
+export default Component.extend({
+  layoutName: "select-kit/templates/components/select-kit/errors-collection",
+  classNames: ["select-kit-errors-collection"],
+  tagName: "ul",
+  isVisible: notEmpty("collection.content")
+});
diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-body.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-body.js.es6
new file mode 100644
index 00000000000..dc4bfa62e3c
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-body.js.es6
@@ -0,0 +1,61 @@
+import Component from "@ember/component";
+import { computed } from "@ember/object";
+
+export default Component.extend({
+  layoutName: "select-kit/templates/components/select-kit/select-kit-body",
+  classNames: ["select-kit-body"],
+  attributeBindings: ["selectKitId:data-select-kit-id"],
+  selectKitId: computed("selectKit.uniqueID", function() {
+    return `${this.selectKit.uniqueID}-body`;
+  }),
+  rootEventType: "click",
+
+  init() {
+    this._super(...arguments);
+
+    this.handleRootMouseDownHandler = Ember.run.bind(
+      this,
+      this.handleRootMouseDown
+    );
+  },
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    document.addEventListener(
+      this.rootEventType,
+      this.handleRootMouseDownHandler,
+      true
+    );
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+
+    document.removeEventListener(
+      this.rootEventType,
+      this.handleRootMouseDownHandler,
+      true
+    );
+  },
+
+  handleRootMouseDown(event) {
+    if (!this.selectKit.isExpanded) {
+      return;
+    }
+
+    const headerElement = document.querySelector(
+      `[data-select-kit-id=${this.selectKit.uniqueID}-header]`
+    );
+
+    if (headerElement && headerElement.contains(event.target)) {
+      return;
+    }
+
+    if (this.element.contains(event.target)) {
+      return;
+    }
+
+    this.selectKit.close(event);
+  }
+});
diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-collection.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-collection.js.es6
index cc2ff90a15d..661a43d7b5e 100644
--- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-collection.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-collection.js.es6
@@ -1,7 +1,10 @@
 import Component from "@ember/component";
+import { notEmpty } from "@ember/object/computed";
+
 export default Component.extend({
   layoutName:
     "select-kit/templates/components/select-kit/select-kit-collection",
   classNames: ["select-kit-collection"],
-  tagName: "ul"
+  tagName: "ul",
+  isVisible: notEmpty("collection")
 });
diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-filter.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-filter.js.es6
index 9212f52fda8..a86b01378c6 100644
--- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-filter.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-filter.js.es6
@@ -1,17 +1,96 @@
-import { not } from "@ember/object/computed";
+import { fmt } from "discourse/lib/computed";
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
+import { isEmpty } from "@ember/utils";
+import { computed } from "@ember/object";
+import { not } from "@ember/object/computed";
+import UtilsMixin from "select-kit/mixins/utils";
 
-const { isEmpty } = Ember;
-
-export default Component.extend({
+export default Component.extend(UtilsMixin, {
   layoutName: "select-kit/templates/components/select-kit/select-kit-filter",
   classNames: ["select-kit-filter"],
-  classNameBindings: ["isFocused", "isHidden"],
-  isHidden: not("shouldDisplayFilter"),
+  classNameBindings: ["isExpanded:is-expanded"],
+  attributeBindings: ["selectKitId:data-select-kit-id"],
+  selectKitId: fmt("selectKit.uniqueID", "%@-filter"),
 
-  @discourseComputed("placeholder")
-  computedPlaceholder(placeholder) {
-    return isEmpty(placeholder) ? "" : I18n.t(placeholder);
+  isHidden: computed(
+    "selectKit.options.{filterable,allowAny,autoFilterable}",
+    "content.[]",
+    function() {
+      return (
+        !this.selectKit.options.filterable &&
+        !this.selectKit.options.allowAny &&
+        !this.selectKit.options.autoFilterable
+      );
+    }
+  ),
+
+  isExpanded: not("isHidden"),
+
+  @discourseComputed(
+    "selectKit.options.filterPlaceholder",
+    "selectKit.options.translatedfilterPlaceholder"
+  )
+  placeholder(placeholder, translatedPlaceholder) {
+    return isEmpty(placeholder)
+      ? translatedPlaceholder
+        ? translatedPlaceholder
+        : ""
+      : I18n.t(placeholder);
+  },
+
+  actions: {
+    onInput(event) {
+      this.selectKit.onInput(event);
+    },
+
+    onKeydown(event) {
+      if (!this.selectKit.onKeydown(event)) {
+        return false;
+      }
+
+      // Do nothing for left/right arrow
+      if (event.keyCode === 37 || event.keyCode === 39) {
+        return true;
+      }
+
+      // Up arrow
+      if (event.keyCode === 38) {
+        this.selectKit.highlightPrevious();
+        return false;
+      }
+
+      // Down arrow
+      if (event.keyCode === 40) {
+        this.selectKit.highlightNext();
+        return false;
+      }
+
+      // Escape
+      if (event.keyCode === 27) {
+        this.selectKit.close(event);
+        return false;
+      }
+
+      // Enter
+      if (event.keyCode === 13 && this.selectKit.highlighted) {
+        this.selectKit.select(this.getValue(this.selectKit.highlighted));
+        return false;
+      }
+
+      if (event.keyCode === 13 && !this.selectKit.highlighted) {
+        this.element.querySelector("input").focus();
+        return false;
+      }
+
+      // Tab
+      if (event.keyCode === 9) {
+        if (this.selectKit.highlighted && this.selectKit.isExpanded) {
+          this.selectKit.select(this.getValue(this.selectKit.highlighted));
+        }
+        this.selectKit.close(event);
+        return;
+      }
+    }
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
index 525c9b69366..4cee1a0bbc4 100644
--- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-header.js.es6
@@ -1,59 +1,157 @@
-import { alias, none, or } from "@ember/object/computed";
+import { computed } from "@ember/object";
 import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
+import UtilsMixin from "select-kit/mixins/utils";
+import { schedule } from "@ember/runloop";
+import { makeArray } from "discourse-common/lib/helpers";
 
-const { isEmpty, makeArray } = Ember;
+export default Component.extend(UtilsMixin, {
+  eventType: "click",
+
+  click(event) {
+    if (typeof document === "undefined") return;
+    if (this.isDestroyed || !this.selectKit || this.selectKit.isDisabled)
+      return;
+    if (this.eventType !== "click" || event.button !== 0) return;
+    this.selectKit.toggle(event);
+  },
 
-export default Component.extend({
-  layoutName: "select-kit/templates/components/select-kit/select-kit-header",
   classNames: ["select-kit-header"],
-  classNameBindings: ["isFocused", "isNone"],
+  classNameBindings: ["isFocused"],
   attributeBindings: [
     "tabindex",
-    "ariaLabel:aria-label",
+    "ariaOwns:aria-owns",
     "ariaHasPopup:aria-haspopup",
-    "sanitizedTitle:title",
-    "value:data-value",
-    "name:data-name"
+    "ariaIsExpanded:aria-expanded",
+    "selectKitId:data-select-kit-id",
+    "roleButton:role",
+    "selectedValue:data-value",
+    "selectedNames:data-name",
+    "serializedNames:title"
   ],
 
-  forceEscape: alias("options.forceEscape"),
+  selectedValue: computed("value", function() {
+    return this.value === this.getValue(this.selectKit.noneItem)
+      ? null
+      : makeArray(this.value).join(",");
+  }),
 
-  isNone: none("computedContent.value"),
+  selectedNames: computed("selectedContent.[]", function() {
+    return makeArray(this.selectedContent)
+      .map(s => this.getName(s))
+      .join(",");
+  }),
 
-  ariaHasPopup: "true",
+  icons: computed("selectKit.options.{icon,icons}", function() {
+    const icon = makeArray(this.selectKit.options.icon);
+    const icons = makeArray(this.selectKit.options.icons);
+    return icon.concat(icons).filter(Boolean);
+  }),
 
-  ariaLabel: or("computedContent.ariaLabel", "sanitizedTitle"),
+  selectKitId: computed("selectKit.uniqueID", function() {
+    return `${this.selectKit.uniqueID}-header`;
+  }),
 
-  @discourseComputed("computedContent.title", "name")
-  title(computedContentTitle, name) {
-    if (computedContentTitle) return computedContentTitle;
-    if (name) return name;
+  ariaIsExpanded: computed("selectKit.isExpanded", function() {
+    return this.selectKit.isExpanded ? "true" : "false";
+  }),
 
-    return "";
+  ariaHasPopup: true,
+
+  ariaOwns: computed("selectKit.uniqueID", function() {
+    return `[data-select-kit-id=${this.selectKit.uniqueID}-body]`;
+  }),
+
+  roleButton: "button",
+
+  tabindex: 0,
+
+  keyDown(event) {
+    if (this.selectKit.isDisabled) {
+      return;
+    }
+
+    if (!this.selectKit.onKeydown(event)) {
+      return false;
+    }
+
+    const onlyShiftKey = event.shiftKey && event.keyCode === 16;
+    if (event.metaKey || onlyShiftKey) {
+      return;
+    }
+
+    if (event.keyCode === 13) {
+      // Enter
+      if (this.selectKit.isExpanded && this.selectKit.highlighted) {
+        this.selectKit.select(this.getValue(this.selectKit.highlighted));
+        return false;
+      } else {
+        this.selectKit.toggle(event);
+      }
+    } else if (event.keyCode === 38) {
+      // Up arrow
+      if (this.selectKit.isExpanded) {
+        this.selectKit.highlightPrevious();
+      } else {
+        this.selectKit.open(event);
+      }
+      return false;
+    } else if (event.keyCode === 40) {
+      // Down arrow
+      if (this.selectKit.isExpanded) {
+        this.selectKit.highlightNext();
+      } else {
+        this.selectKit.open(event);
+      }
+      return false;
+    } else if (event.keyCode === 37 || event.keyCode === 39) {
+      // Do nothing for left/right arrow
+      return true;
+    } else if (event.keyCode === 32) {
+      // Space
+      event.preventDefault(); // prevents the space to trigger a scroll page-next
+      this.selectKit.toggle(event);
+    } else if (event.keyCode === 27) {
+      // Escape
+      this.selectKit.close(event);
+    } else if (event.keyCode === 8) {
+      // Backspace
+      this._focusFilterInput();
+    } else if (event.keyCode === 9) {
+      // Tab
+      if (this.selectKit.highlighted && this.selectKit.isExpanded) {
+        this.selectKit.select(this.getValue(this.selectKit.highlighted));
+      }
+      this.selectKit.close(event);
+    } else if (
+      this.selectKit.options.filterable ||
+      this.selectKit.options.autoFilterable ||
+      this.selectKit.options.allowAny
+    ) {
+      if (this.selectKit.isExpanded) {
+        this._focusFilterInput();
+      } else {
+        this.selectKit.open(event);
+        schedule("afterRender", () => this._focusFilterInput());
+      }
+    } else {
+      if (this.selectKit.isExpanded) {
+        return false;
+      } else {
+        return true;
+      }
+    }
   },
 
-  // this might need a more advanced solution
-  // but atm it's the only case we have to handle
-  @discourseComputed("title")
-  sanitizedTitle(title) {
-    return String(title).replace("&hellip;", "");
-  },
+  _focusFilterInput() {
+    const filterContainer = document.querySelector(
+      `[data-select-kit-id=${this.selectKit.uniqueID}-filter]`
+    );
 
-  label: or("computedContent.label", "title", "name"),
+    if (filterContainer) {
+      filterContainer.style.display = "flex";
 
-  name: alias("computedContent.name"),
-
-  value: alias("computedContent.value"),
-
-  @discourseComputed("computedContent.icon", "computedContent.icons")
-  icons(icon, icons) {
-    return makeArray(icon)
-      .concat(icons)
-      .filter(i => !isEmpty(i));
-  },
-
-  click() {
-    this.onToggle();
+      const filterInput = filterContainer.querySelector(".filter-input");
+      filterInput && filterInput.focus();
+    }
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/select-kit/select-kit-row.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/select-kit-row.js.es6
index 7ab8ff112fd..a4a7fb6d1a1 100644
--- a/app/assets/javascripts/select-kit/components/select-kit/select-kit-row.js.es6
+++ b/app/assets/javascripts/select-kit/components/select-kit/select-kit-row.js.es6
@@ -1,8 +1,7 @@
-import { alias, or } from "@ember/object/computed";
 import Component from "@ember/component";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
-
-const { run, isPresent, makeArray, isEmpty } = Ember;
+import { propertyEqual } from "discourse/lib/computed";
+import { computed } from "@ember/object";
+import { makeArray } from "discourse-common/lib/helpers";
 import UtilsMixin from "select-kit/mixins/utils";
 
 export default Component.extend(UtilsMixin, {
@@ -13,85 +12,80 @@ export default Component.extend(UtilsMixin, {
   attributeBindings: [
     "tabIndex",
     "title",
-    "value:data-value",
-    "name:data-name",
+    "rowValue:data-value",
+    "rowName:data-name",
     "ariaLabel:aria-label",
     "guid:data-guid"
   ],
   classNameBindings: [
     "isHighlighted",
     "isSelected",
-    "computedContent.originalContent.classNames"
+    "isNone",
+    "isNone:none",
+    "item.classNames"
   ],
 
-  forceEscape: alias("options.forceEscape"),
+  isNone: computed("rowValue", function() {
+    return this.rowValue === this.getValue(this.selectKit.noneItem);
+  }),
 
-  ariaLabel: or("computedContent.ariaLabel", "title"),
+  guid: computed("item", function() {
+    return Ember.guidFor(this.item);
+  }),
 
-  @discourseComputed("computedContent.title", "name")
-  title(computedContentTitle, name) {
-    if (computedContentTitle) return computedContentTitle;
-    if (name) return name;
+  ariaLabel: computed("item.ariaLabel", "title", function() {
+    return this.getProperty(this.item, "ariaLabel") || this.title;
+  }),
 
-    return null;
-  },
+  title: computed("item.title", "rowName", function() {
+    return this.getProperty(this.item, "title") || this.rowName;
+  }),
 
-  @discourseComputed("computedContent")
-  guid(computedContent) {
-    return Ember.guidFor(computedContent);
-  },
+  label: computed("item.label", "title", "rowName", function() {
+    const label =
+      this.getProperty(this.item, "label") || this.title || this.rowName;
+    if (
+      this.selectKit.options.allowAny &&
+      this.rowValue === this.selectKit.filter &&
+      this.getName(this.selectKit.noneItem) !== this.rowName
+    ) {
+      return I18n.t("select_kit.create", { content: label });
+    }
+    return label;
+  }),
 
-  label: or("computedContent.label", "title", "name"),
+  didReceiveAttrs() {
+    this._super(...arguments);
 
-  name: alias("computedContent.name"),
-
-  value: alias("computedContent.value"),
-
-  @discourseComputed("templateForRow")
-  template(templateForRow) {
-    return templateForRow(this);
-  },
-
-  @on("didReceiveAttrs")
-  _setSelectionState() {
     this.setProperties({
-      isSelected: this.computedValue === this.value,
-      isHighlighted: this.get("highlighted.value") === this.value
+      rowName: this.getName(this.item),
+      rowValue: this.getValue(this.item)
     });
   },
 
-  @on("willDestroyElement")
-  _clearDebounce() {
-    const hoverDebounce = this.hoverDebounce;
-    if (isPresent(hoverDebounce)) {
-      run.cancel(hoverDebounce);
-    }
-  },
+  icons: computed("item.{icon,icons}", function() {
+    const icon = makeArray(this.getProperty(this.item, "icon"));
+    const icons = makeArray(this.getProperty(this.item, "icons"));
+    return icon.concat(icons).filter(Boolean);
+  }),
 
-  @discourseComputed(
-    "computedContent.icon",
-    "computedContent.icons",
-    "computedContent.originalContent.icon"
-  )
-  icons(icon, icons, originalIcon) {
-    return makeArray(icon)
-      .concat(icons)
-      .concat(makeArray(originalIcon))
-      .filter(i => !isEmpty(i));
-  },
+  highlightedValue: computed("selectKit.highlighted", function() {
+    return this.getValue(this.selectKit.highlighted);
+  }),
+
+  isHighlighted: propertyEqual("rowValue", "highlightedValue"),
+
+  isSelected: propertyEqual("rowValue", "value"),
 
   mouseEnter() {
-    this.set(
-      "hoverDebounce",
-      run.debounce(this, this._sendMouseoverAction, 32)
-    );
+    if (!this.isDestroying || !this.isDestroyed) {
+      this.selectKit.onHover(this.rowValue, this.item);
+    }
+    return false;
   },
 
   click() {
-    this.onClickRow(this.computedContent);
-  },
-
-  _sendMouseoverAction() {
-    this.onMouseoverRow(this.computedContent);
+    this.selectKit.select(this.rowValue, this.item);
+    return false;
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/select-kit/single-select-header.js.es6 b/app/assets/javascripts/select-kit/components/select-kit/single-select-header.js.es6
new file mode 100644
index 00000000000..1ff4a8c8a9b
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/select-kit/single-select-header.js.es6
@@ -0,0 +1,7 @@
+import SelectKitHeaderComponent from "select-kit/components/select-kit/select-kit-header";
+import UtilsMixin from "select-kit/mixins/utils";
+
+export default SelectKitHeaderComponent.extend(UtilsMixin, {
+  layoutName: "select-kit/templates/components/select-kit/single-select-header",
+  classNames: ["single-select-header"]
+});
diff --git a/app/assets/javascripts/select-kit/components/selected-color.js.es6 b/app/assets/javascripts/select-kit/components/selected-color.js.es6
new file mode 100644
index 00000000000..48e03ed8205
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/selected-color.js.es6
@@ -0,0 +1,16 @@
+import SelectedNameComponent from "select-kit/components/selected-name";
+import { escapeExpression } from "discourse/lib/utilities";
+import { schedule } from "@ember/runloop";
+
+export default SelectedNameComponent.extend({
+  classNames: ["select-kit-selected-color"],
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+
+    schedule("afterRender", () => {
+      const color = escapeExpression(this.name);
+      this.element.style.borderBottomColor = `#${color}`;
+    });
+  }
+});
diff --git a/app/assets/javascripts/select-kit/components/selected-name.js.es6 b/app/assets/javascripts/select-kit/components/selected-name.js.es6
new file mode 100644
index 00000000000..1f69a5e2eee
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/selected-name.js.es6
@@ -0,0 +1,64 @@
+import { computed } from "@ember/object";
+import Component from "@ember/component";
+import { makeArray } from "discourse-common/lib/helpers";
+import UtilsMixin from "select-kit/mixins/utils";
+import { get } from "@ember/object";
+
+export default Component.extend(UtilsMixin, {
+  layoutName: "select-kit/templates/components/selected-name",
+  classNames: ["select-kit-selected-name", "selected-name", "choice"],
+  name: null,
+  value: null,
+  tabindex: 0,
+  attributeBindings: ["title", "value:data-value", "name:data-name"],
+
+  click() {
+    if (this.selectKit.options.clearOnClick) {
+      this.selectKit.deselect(this.item);
+      return false;
+    }
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+
+    // we can't listen on `item.nameProperty` given it's variable
+    this.setProperties({
+      name: this.getName(this.item),
+      value:
+        this.item === this.selectKit.noneItem ? null : this.getValue(this.item)
+    });
+  },
+
+  ariaLabel: computed("item", "sanitizedTitle", function() {
+    return this._safeProperty("ariaLabel", this.item) || this.sanitizedTitle;
+  }),
+
+  // this might need a more advanced solution
+  // but atm it's the only case we have to handle
+  sanitizedTitle: computed("title", function() {
+    return String(this.title).replace("&hellip;", "");
+  }),
+
+  title: computed("item", function() {
+    return this._safeProperty("title", this.item) || this.name || "";
+  }),
+
+  label: computed("title", "name", function() {
+    return this._safeProperty("label", this.item) || this.title || this.name;
+  }),
+
+  icons: computed("item.{icon,icons}", function() {
+    const icon = makeArray(this._safeProperty("icon", this.item));
+    const icons = makeArray(this._safeProperty("icons", this.item));
+    return icon.concat(icons).filter(Boolean);
+  }),
+
+  _safeProperty(name, content) {
+    if (!content) {
+      return null;
+    }
+
+    return get(content, name);
+  }
+});
diff --git a/app/assets/javascripts/select-kit/components/single-select.js.es6 b/app/assets/javascripts/select-kit/components/single-select.js.es6
index 42ccc4fa668..18f2ede6fb8 100644
--- a/app/assets/javascripts/select-kit/components/single-select.js.es6
+++ b/app/assets/javascripts/select-kit/components/single-select.js.es6
@@ -1,319 +1,36 @@
 import SelectKitComponent from "select-kit/components/select-kit";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
-const { get, isNone, isEmpty, isPresent, run, makeArray } = Ember;
-
-import {
-  applyOnSelectPluginApiCallbacks,
-  applyOnSelectNonePluginApiCallbacks
-} from "select-kit/mixins/plugin-api";
+import { computed } from "@ember/object";
+import { isEmpty } from "@ember/utils";
 
 export default SelectKitComponent.extend({
   pluginApiIdentifiers: ["single-select"],
   layoutName: "select-kit/templates/components/single-select",
-  classNames: "single-select",
-  computedValue: null,
-  value: null,
-  allowInitialValueMutation: false,
+  classNames: ["single-select"],
+  singleSelect: true,
 
-  @on("didUpdateAttrs", "init")
-  _compute() {
-    run.scheduleOnce("afterRender", () => {
-      this.willComputeAttributes();
-      let content = this.content || [];
-      let asyncContent = this.asyncContent || [];
-      content = this.willComputeContent(content);
-      asyncContent = this.willComputeAsyncContent(asyncContent);
-      let value = this._beforeWillComputeValue(this.value);
-      content = this.computeContent(content);
-      asyncContent = this.computeAsyncContent(asyncContent);
-      content = this._beforeDidComputeContent(content);
-      asyncContent = this._beforeDidComputeAsyncContent(asyncContent);
-      value = this.willComputeValue(value);
-      value = this.computeValue(value);
-      value = this._beforeDidComputeValue(value);
-      this.didComputeContent(content);
-      this.didComputeAsyncContent(asyncContent);
-      this.didComputeValue(value);
-      this.didComputeAttributes();
-
-      if (this.allowInitialValueMutation) this.mutateAttributes();
-    });
+  selectKitOptions: {
+    headerComponent: "select-kit/single-select-header"
   },
 
-  mutateAttributes() {
-    run.next(() => {
-      if (this.isDestroyed || this.isDestroying) return;
+  selectedContent: computed("value", "content.[]", function() {
+    if (!isEmpty(this.value)) {
+      let content;
 
-      this.mutateContent(this.computedContent);
-      this.mutateValue(this.computedValue);
-    });
-  },
-  mutateContent() {},
-  mutateValue(computedValue) {
-    this.set("value", computedValue);
-  },
-
-  forceValue(value) {
-    this.mutateValue(value);
-    this._compute();
-  },
-
-  _beforeWillComputeValue(value) {
-    if (
-      !isEmpty(this.content) &&
-      isEmpty(value) &&
-      isNone(this.none) &&
-      this.allowAutoSelectFirst
-    ) {
-      value = this.valueForContentItem(get(this.content, "firstObject"));
-    }
-
-    switch (typeof value) {
-      case "string":
-      case "number":
-        return this._cast(value === "" ? null : value);
-      default:
-        return value;
-    }
-  },
-  willComputeValue(value) {
-    return value;
-  },
-  computeValue(value) {
-    return value;
-  },
-  _beforeDidComputeValue(value) {
-    this.setProperties({ computedValue: value });
-    return value;
-  },
-  didComputeValue(value) {
-    return value;
-  },
-
-  filterComputedContent(computedContent, computedValue, filter) {
-    return computedContent.filter(c => {
-      return this._normalize(get(c, "name")).indexOf(filter) > -1;
-    });
-  },
-
-  computeHeaderContent() {
-    let content = {
-      title: this.title,
-      icons: makeArray(this.getWithDefault("headerIcon", [])),
-      value: this.get("selection.value"),
-      name:
-        this.get("selection.name") || this.get("noneRowComputedContent.name")
-    };
-
-    if (this.noneLabel && !this.hasSelection) {
-      content.title = content.name = I18n.t(this.noneLabel);
-    }
-
-    return content;
-  },
-
-  @discourseComputed("computedAsyncContent.[]", "computedValue")
-  filteredAsyncComputedContent(computedAsyncContent, computedValue) {
-    computedAsyncContent = (computedAsyncContent || []).filter(c => {
-      return computedValue !== get(c, "value");
-    });
-
-    if (this.limitMatches) {
-      return computedAsyncContent.slice(0, this.limitMatches);
-    }
-
-    return computedAsyncContent;
-  },
-
-  @discourseComputed(
-    "computedContent.[]",
-    "computedValue",
-    "filter",
-    "shouldFilter"
-  )
-  filteredComputedContent(
-    computedContent,
-    computedValue,
-    filter,
-    shouldFilter
-  ) {
-    if (shouldFilter) {
-      computedContent = this.filterComputedContent(
-        computedContent,
-        computedValue,
-        this._normalize(filter)
-      );
-    }
-
-    if (this.limitMatches) {
-      return computedContent.slice(0, this.limitMatches);
-    }
-
-    return computedContent;
-  },
-
-  @discourseComputed("computedValue", "computedContent.[]")
-  selection(computedValue, computedContent) {
-    return computedContent.findBy("value", computedValue);
-  },
-
-  @discourseComputed("selection")
-  hasSelection(selection) {
-    return selection !== this.noneRowComputedContent && !isNone(selection);
-  },
-
-  @discourseComputed(
-    "computedValue",
-    "filter",
-    "collectionComputedContent.[]",
-    "hasReachedMaximum",
-    "hasReachedMinimum"
-  )
-  shouldDisplayCreateRow(computedValue, filter) {
-    return this._super() && computedValue !== filter;
-  },
-
-  autoHighlight() {
-    run.schedule("afterRender", () => {
-      if (this.shouldDisplayCreateRow) {
-        this.highlight(this.createRowComputedContent);
-        return;
-      }
-
-      if (!isEmpty(this.filter) && !isEmpty(this.collectionComputedContent)) {
-        this.highlight(this.get("collectionComputedContent.firstObject"));
-        return;
-      }
-
-      if (!this.isAsync && this.hasSelection && isEmpty(this.filter)) {
-        this.highlight(get(makeArray(this.selection), "firstObject"));
-        return;
-      }
-
-      if (
-        !this.isAsync &&
-        !this.hasSelection &&
-        isEmpty(this.filter) &&
-        !isEmpty(this.collectionComputedContent)
-      ) {
-        this.highlight(this.get("collectionComputedContent.firstObject"));
-        return;
-      }
-
-      if (isPresent(this.noneRowComputedContent)) {
-        this.highlight(this.noneRowComputedContent);
-        return;
-      }
-    });
-  },
-
-  select(computedContentItem) {
-    if (computedContentItem.__sk_row_type === "noopRow") {
-      applyOnSelectPluginApiCallbacks(
-        this.pluginApiIdentifiers,
-        computedContentItem.value,
-        this
-      );
-
-      this._boundaryActionHandler("onSelect", computedContentItem.value);
-      this._boundaryActionHandler("onSelectAny", computedContentItem);
-      return;
-    }
-
-    if (this.hasSelection) {
-      this.deselect(this.get("selection.value"));
-    }
-
-    if (
-      !computedContentItem ||
-      computedContentItem.__sk_row_type === "noneRow"
-    ) {
-      applyOnSelectNonePluginApiCallbacks(this.pluginApiIdentifiers, this);
-      this._boundaryActionHandler("onSelectNone");
-      this._boundaryActionHandler("onSelectAny", computedContentItem);
-      this.clearSelection();
-      return;
-    }
-
-    if (computedContentItem.__sk_row_type === "createRow") {
-      if (
-        this.computedValue !== computedContentItem.value &&
-        this.validateCreate(computedContentItem.value)
-      ) {
-        this.willCreate(computedContentItem);
-        computedContentItem.__sk_row_type = null;
-        this.computedContent.pushObject(computedContentItem);
-
-        run.schedule("afterRender", () => {
-          this.didCreate(computedContentItem);
-          this._boundaryActionHandler("onCreate");
-        });
-
-        this.select(computedContentItem);
-        return;
-      } else {
-        this._boundaryActionHandler("onCreateFailure");
-        return;
-      }
-    }
-
-    if (this.validateSelect(computedContentItem)) {
-      this.willSelect(computedContentItem);
-      this.clearFilter();
-
-      const action = computedContentItem.originalContent.action;
-      if (action) {
-        action();
-      } else {
-        this.setProperties({
-          highlighted: null,
-          computedValue: computedContentItem.value
-        });
-
-        run.next(() => this.mutateAttributes());
-      }
-
-      run.schedule("afterRender", () => {
-        this.didSelect(computedContentItem);
-
-        applyOnSelectPluginApiCallbacks(
-          this.pluginApiIdentifiers,
-          computedContentItem.value,
-          this
+      if (this.selectKit.valueProperty) {
+        content = (this.content || []).findBy(
+          this.selectKit.valueProperty,
+          this.value
         );
-
-        this._boundaryActionHandler(
-          "onSelect",
-          computedContentItem.value,
-          computedContentItem.originalContent
+        return this.selectKit.modifySelection(
+          content || this.defaultItem(this.value, this.value)
         );
-        this._boundaryActionHandler("onSelectAny", computedContentItem);
-
-        this.autoHighlight();
-      });
+      } else {
+        return this.selectKit.modifySelection(
+          (this.content || []).filter(c => c === this.value)
+        );
+      }
     } else {
-      this._boundaryActionHandler("onSelectFailure");
+      return this.selectKit.noneItem;
     }
-  },
-
-  deselect(computedContentItem) {
-    makeArray(computedContentItem).forEach(item => {
-      this.willDeselect(item);
-
-      this.clearFilter();
-
-      this.setProperties({
-        computedValue: null,
-        highlighted: null,
-        highlightedSelection: []
-      });
-
-      run.next(() => this.mutateAttributes());
-      run.schedule("afterRender", () => {
-        this.didDeselect(item);
-        this._boundaryActionHandler("onDeselect", item);
-        this.autoHighlight();
-      });
-    });
-  }
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/tag-chooser-row.js.es6 b/app/assets/javascripts/select-kit/components/tag-chooser-row.js.es6
new file mode 100644
index 00000000000..3013c3df1ee
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/tag-chooser-row.js.es6
@@ -0,0 +1,6 @@
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+export default SelectKitRowComponent.extend({
+  layoutName: "select-kit/templates/components/tag-chooser-row",
+  classNames: ["tag-chooser-row"]
+});
diff --git a/app/assets/javascripts/select-kit/components/tag-chooser.js.es6 b/app/assets/javascripts/select-kit/components/tag-chooser.js.es6
index 103a294060d..ff43a16b660 100644
--- a/app/assets/javascripts/select-kit/components/tag-chooser.js.es6
+++ b/app/assets/javascripts/select-kit/components/tag-chooser.js.es6
@@ -1,110 +1,78 @@
-import { alias } from "@ember/object/computed";
+import { computed } from "@ember/object";
 import MultiSelectComponent from "select-kit/components/multi-select";
 import TagsMixin from "select-kit/mixins/tags";
-import renderTag from "discourse/lib/render-tag";
-import discourseComputed from "discourse-common/utils/decorators";
 import { makeArray } from "discourse-common/lib/helpers";
-const { get, run } = Ember;
 
 export default MultiSelectComponent.extend(TagsMixin, {
   pluginApiIdentifiers: ["tag-chooser"],
-  classNames: "tag-chooser",
-  isAsync: true,
-  filterable: true,
-  filterPlaceholder: "tagging.choose_for_topic",
-  limit: null,
+  classNames: ["tag-chooser"],
+
+  selectKitOptions: {
+    filterable: true,
+    filterPlaceholder: "tagging.choose_for_topic",
+    limit: null,
+    allowAny: "canCreateTag",
+    maximum: "maximumTagCount"
+  },
+
+  modifyComponentForRow() {
+    return "tag-chooser-row";
+  },
+
   blacklist: null,
   attributeBindings: ["categoryId"],
-  allowCreate: null,
-  allowAny: alias("allowCreate"),
   excludeSynonyms: false,
   excludeHasSynonyms: false,
 
+  canCreateTag: computed("site.can_create_tag", "allowCreate", function() {
+    return this.allowCreate || this.site.can_create_tag;
+  }),
+
+  maximumTagCount: computed(
+    "siteSettings.max_tags_per_topic",
+    "unlimitedTagCount",
+    function() {
+      if (!this.unlimitedTagCount) {
+        return parseInt(
+          this.options.limit ||
+            this.options.maximum ||
+            this.get("siteSettings.max_tags_per_topic"),
+          10
+        );
+      }
+
+      return null;
+    }
+  ),
+
   init() {
     this._super(...arguments);
 
-    if (this.allowCreate !== false) {
-      this.set("allowCreate", this.site.get("can_create_tag"));
-    }
-
-    if (!this.blacklist) {
-      this.set("blacklist", []);
-    }
-
-    this.set("termMatchesForbidden", false);
-    this.set("termMatchErrorMessage", null);
-
-    this.set("templateForRow", rowComponent => {
-      const tag = rowComponent.get("computedContent");
-      return renderTag(get(tag, "value"), {
-        count: get(tag, "originalContent.count"),
-        noHref: true
-      });
+    this.setProperties({
+      blacklist: this.blacklist || [],
+      termMatchesForbidden: false,
+      termMatchErrorMessage: null
     });
-
-    if (!this.unlimitedTagCount) {
-      this.set(
-        "maximum",
-        parseInt(
-          this.limit ||
-            this.maximum ||
-            this.get("siteSettings.max_tags_per_topic"),
-          10
-        )
-      );
-    }
   },
 
-  mutateValues(values) {
-    this.set(
-      "tags",
-      values.filter(v => v)
-    );
-  },
+  value: computed("tags.[]", function() {
+    return makeArray(this.tags).uniq();
+  }),
 
-  @discourseComputed("tags")
-  values(tags) {
-    return makeArray(tags);
-  },
-
-  @discourseComputed("tags")
-  content(tags) {
-    return makeArray(tags);
-  },
+  content: computed("tags.[]", function() {
+    return makeArray(this.tags)
+      .uniq()
+      .map(t => this.defaultItem(t, t));
+  }),
 
   actions: {
-    onFilter(filter) {
-      this.expand();
-      this.set(
-        "searchDebounce",
-        run.debounce(this, this._prepareSearch, filter, 200)
-      );
-    },
-
-    onExpand() {
-      this.set(
-        "searchDebounce",
-        run.debounce(this, this._prepareSearch, this.filter, 200)
-      );
-    },
-
-    onDeselect() {
-      this.set(
-        "searchDebounce",
-        run.debounce(this, this._prepareSearch, this.filter, 200)
-      );
-    },
-
-    onSelect() {
-      this.set(
-        "searchDebounce",
-        run.debounce(this, this._prepareSearch, this.filter, 50)
-      );
+    onChange(value) {
+      this.set("tags", value);
     }
   },
 
-  _prepareSearch(query) {
-    const selectedTags = makeArray(this.values).filter(t => t);
+  search(query) {
+    const selectedTags = makeArray(this.tags).filter(Boolean);
 
     const data = {
       q: query,
@@ -113,28 +81,30 @@ export default MultiSelectComponent.extend(TagsMixin, {
     };
 
     if (selectedTags.length || this.blacklist.length) {
-      data.selected_tags = _.uniq(selectedTags.concat(this.blacklist)).slice(
-        0,
-        100
-      );
+      data.selected_tags = selectedTags
+        .concat(this.blacklist)
+        .uniq()
+        .slice(0, 100);
     }
 
     if (!this.everyTag) data.filterForInput = true;
     if (this.excludeSynonyms) data.excludeSynonyms = true;
     if (this.excludeHasSynonyms) data.excludeHasSynonyms = true;
 
-    this.searchTags("/tags/filter/search", data, this._transformJson);
+    return this.searchTags("/tags/filter/search", data, this._transformJson);
   },
 
   _transformJson(context, json) {
     let results = json.results;
 
-    context.set("termMatchesForbidden", json.forbidden ? true : false);
-    context.set("termMatchErrorMessage", json.forbidden_message);
+    context.setProperties({
+      termMatchesForbidden: json.forbidden ? true : false,
+      termMatchErrorMessage: json.forbidden_message
+    });
 
-    if (context.get("blacklist")) {
+    if (context.blacklist) {
       results = results.filter(result => {
-        return !context.get("blacklist").includes(result.id);
+        return !context.blacklist.includes(result.id);
       });
     }
 
@@ -142,10 +112,8 @@ export default MultiSelectComponent.extend(TagsMixin, {
       results = results.sort((a, b) => a.id > b.id);
     }
 
-    results = results.map(result => {
+    return results.uniqBy("text").map(result => {
       return { id: result.text, name: result.text, count: result.count };
     });
-
-    return results;
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/tag-drop.js.es6 b/app/assets/javascripts/select-kit/components/tag-drop.js.es6
index 3e80f3ce8a0..fa25372b911 100644
--- a/app/assets/javascripts/select-kit/components/tag-drop.js.es6
+++ b/app/assets/javascripts/select-kit/components/tag-drop.js.es6
@@ -1,227 +1,175 @@
-import { computed } from "@ember/object";
-import { alias } from "@ember/object/computed";
-import { makeArray } from "discourse-common/lib/helpers";
+import Category from "discourse/models/category";
+import { readOnly, or, equal, gte } from "@ember/object/computed";
+import { i18n, setting } from "discourse/lib/computed";
 import ComboBoxComponent from "select-kit/components/combo-box";
 import DiscourseURL from "discourse/lib/url";
 import TagsMixin from "select-kit/mixins/tags";
-import discourseComputed from "discourse-common/utils/decorators";
-const { isEmpty, run } = Ember;
-import Category from "discourse/models/category";
-import deprecated from "discourse-common/lib/deprecated";
+import { computed } from "@ember/object";
+import { isEmpty } from "@ember/utils";
+import { makeArray } from "discourse-common/lib/helpers";
+
+export const NO_TAG_ID = "no-tags";
+export const ALL_TAGS_ID = "all-tags";
+export const NONE_TAG_ID = "none";
 
 export default ComboBoxComponent.extend(TagsMixin, {
   pluginApiIdentifiers: ["tag-drop"],
   classNameBindings: ["categoryStyle", "tagClass"],
-  classNames: "tag-drop",
-  verticalOffset: 3,
-  value: alias("tagId"),
-  headerComponent: "tag-drop/tag-drop-header",
-  allowAutoSelectFirst: false,
+  classNames: ["tag-drop"],
+  value: readOnly("tagId"),
   tagName: "li",
-  showFilterByTag: alias("siteSettings.show_filter_by_tag"),
-  tagId: null,
-  categoryStyle: alias("siteSettings.category_style"),
-  mutateAttributes() {},
-  fullWidthOnMobile: true,
-  caretDownIcon: "caret-right",
-  caretUpIcon: "caret-down",
-  allowContentReplacement: true,
-  isAsync: true,
-
-  currentCategory: computed("secondCategory", "firstCategory", {
-    set(key, value) {
-      this.currentCategoryRaw = value;
-      return value;
-    },
-
-    get() {
-      if (this.currentCategoryRaw) {
-        return this.currentCategoryRaw;
-      }
-
-      const result = this.secondCategory || this.firstCategory;
-      if (result) {
-        deprecated(
-          "Setting firstCategory and secondCategory on tag-drop directly is deprecated. Please use currentCategory instead."
-        );
-        return result;
-      }
+  currentCategory: or("secondCategory", "firstCategory"),
+  showFilterByTag: setting("show_filter_by_tag"),
+  categoryStyle: setting("category_style"),
+  maxTagSearchResults: setting("max_tag_search_results"),
+  sortTagsAlphabetically: setting("tags_sort_alphabetically"),
+  isVisible: computed("showFilterByTag", "content.[]", function() {
+    if (this.showFilterByTag && !isEmpty(this.content)) {
+      return true;
     }
+
+    return false;
   }),
 
-  @discourseComputed("tagId")
-  noTagsSelected() {
-    return this.tagId === "none";
+  selectKitOptions: {
+    allowAny: false,
+    caretDownIcon: "caret-right",
+    caretUpIcon: "caret-down",
+    fullWidthOnMobile: true,
+    filterable: true,
+    headerComponent: "tag-drop/tag-drop-header",
+    autoInsertNoneItem: false
   },
 
-  @discourseComputed("showFilterByTag", "content")
-  isHidden(showFilterByTag, content) {
-    if (showFilterByTag && !isEmpty(content)) return false;
-    return true;
-  },
+  noTagsSelected: equal("tagId", NONE_TAG_ID),
 
-  @discourseComputed("content")
-  filterable(content) {
-    return content && content.length >= 15;
-  },
+  filterable: gte("content.length", 15),
 
-  computeHeaderContent() {
-    let content = this._super(...arguments);
-
-    if (!content.value) {
-      if (this.tagId) {
-        if (this.tagId === "none") {
-          content.title = this.noTagsLabel;
-        } else {
-          content.title = this.tagId;
-        }
-      } else if (this.noTagsSelected) {
-        content.title = this.noTagsLabel;
-      } else {
-        content.title = this.allTagsLabel;
-      }
+  modifyNoSelection() {
+    if (this.noTagsSelected) {
+      return this.defaultItem(NO_TAG_ID, this.noTagsLabel);
     } else {
-      content.title = content.value;
+      return this.defaultItem(ALL_TAGS_ID, this.allTagsLabel);
+    }
+  },
+
+  modifySelection(content) {
+    if (this.tagId) {
+      if (this.noTagsSelected) {
+        content = this.defaultItem(NO_TAG_ID, this.noTagsLabel);
+      } else {
+        content = this.defaultItem(this.tagId, this.tagId);
+      }
     }
 
     return content;
   },
 
-  @discourseComputed("tagId")
-  tagClass(tagId) {
-    return tagId ? `tag-${tagId}` : "tag_all";
-  },
+  tagClass: computed("tagId", function() {
+    return this.tagId ? `tag-${this.tagId}` : "tag_all";
+  }),
 
-  @discourseComputed("currentCategory")
-  allTagsUrl() {
+  currentCategoryUrl: readOnly("currentCategory.url"),
+
+  allTagsUrl: computed("firstCategory", "secondCategory", function() {
     if (this.currentCategory) {
-      return Discourse.getURL(this.get("currentCategory.url") + "?allTags=1");
+      return Discourse.getURL(`${this.currentCategoryUrl}?allTags=1`);
     } else {
       return Discourse.getURL("/");
     }
-  },
+  }),
 
-  @discourseComputed("currentCategory")
-  noTagsUrl(currentCategory) {
+  noTagsUrl: computed("firstCategory", "secondCategory", function() {
     let url = "/tags";
-
-    if (currentCategory) {
-      url += `/c/${Category.slugFor(currentCategory)}/${currentCategory.id}`;
+    if (this.currentCategory) {
+      url += `/c/${Category.slugFor(this.currentCategory)}/${
+        this.currentCategory.id
+      }`;
     }
+    return Discourse.getURL(`${url}/${NONE_TAG_ID}`);
+  }),
 
-    return Discourse.getURL(`${url}/none`);
-  },
+  allTagsLabel: i18n("tagging.selector_all_tags"),
 
-  @discourseComputed("tag")
-  allTagsLabel() {
-    return I18n.t("tagging.selector_all_tags");
-  },
+  noTagsLabel: i18n("tagging.selector_no_tags"),
 
-  @discourseComputed("tag")
-  noTagsLabel() {
-    return I18n.t("tagging.selector_no_tags");
-  },
-
-  @discourseComputed("tagId", "allTagsLabel", "noTagsLabel")
-  shortcuts(tagId, allTagsLabel, noTagsLabel) {
+  shortcuts: computed("tagId", function() {
     const shortcuts = [];
 
-    if (tagId !== "none") {
-      shortcuts.push({
-        name: noTagsLabel,
-        __sk_row_type: "noopRow",
-        id: "no-tags"
-      });
+    if (this.tagId !== NONE_TAG_ID) {
+      shortcuts.push(NO_TAG_ID);
     }
 
-    if (tagId) {
-      shortcuts.push({
-        name: allTagsLabel,
-        __sk_row_type: "noopRow",
-        id: "all-tags"
-      });
+    if (this.tagId) {
+      shortcuts.push(ALL_TAGS_ID);
     }
 
     return shortcuts;
-  },
+  }),
 
-  @discourseComputed("site.top_tags", "shortcuts")
-  content(topTags, shortcuts) {
-    if (this.siteSettings.tags_sort_alphabetically && topTags) {
-      return shortcuts.concat(topTags.sort());
+  topTags: readOnly("site.top_tags.[]"),
+
+  content: computed("topTags.[]", "shortcuts.[]", function() {
+    if (this.sortTagsAlphabetically && this.topTags) {
+      return this.shortcuts.concat(this.topTags.sort());
     } else {
-      return shortcuts.concat(makeArray(topTags));
+      return this.shortcuts.concat(makeArray(this.topTags));
     }
-  },
+  }),
 
-  _prepareSearch(query) {
-    const data = {
-      q: query,
-      limit: this.get("siteSettings.max_tag_search_results")
-    };
+  search(filter) {
+    if (filter) {
+      const data = {
+        q: filter,
+        limit: this.maxTagSearchResults
+      };
 
-    this.searchTags("/tags/filter/search", data, this._transformJson);
+      return this.searchTags("/tags/filter/search", data, this._transformJson);
+    } else {
+      return (this.content || []).map(tag => this.defaultItem(tag, tag));
+    }
   },
 
   _transformJson(context, json) {
-    let results = json.results;
-    results = results.sort((a, b) => a.id > b.id);
-
-    return results.map(r => {
-      return {
-        id: r.id,
-        name: r.text,
-        targetTagId: r.target_tag || r.id
-      };
-    });
+    return json.results
+      .sort((a, b) => a.id > b.id)
+      .map(r => {
+        const content = context.defaultItem(r.id, r.text);
+        content.targetTagId = r.target_tag || r.id;
+        content.count = r.count;
+        content.pmCount = r.pm_count;
+        return content;
+      });
   },
 
   actions: {
-    onSelect(tagId, tag) {
+    onChange(tagId, tag) {
       let url;
 
-      if (tagId === "all-tags") {
-        url = Discourse.getURL(this.allTagsUrl);
-      } else if (tagId === "no-tags") {
-        url = Discourse.getURL(this.noTagsUrl);
-      } else {
-        if (this.currentCategory) {
-          url = `/tags/c/${Category.slugFor(this.currentCategory)}/${
-            this.currentCategory.id
-          }`;
-        } else {
-          url = "/tag";
-        }
+      switch (tagId) {
+        case ALL_TAGS_ID:
+          url = this.allTagsUrl;
+          break;
+        case NO_TAG_ID:
+          url = this.noTagsUrl;
+          break;
+        default:
+          if (this.currentCategory) {
+            url = `/tags/c/${Category.slugFor(this.currentCategory)}/${
+              this.currentCategory.id
+            }`;
+          } else {
+            url = "/tag";
+          }
 
-        if (tag && tag.targetTagId) {
-          url += `/${tag.targetTagId.toLowerCase()}`;
-        } else {
-          url += `/${tagId.toLowerCase()}`;
-        }
-        url = Discourse.getURL(url);
+          if (tag && tag.targetTagId) {
+            url += `/${tag.targetTagId.toLowerCase()}`;
+          } else {
+            url += `/${tagId.toLowerCase()}`;
+          }
       }
 
-      DiscourseURL.routeTo(url);
-    },
-
-    onExpand() {
-      if (isEmpty(this.asyncContent)) {
-        this.set("asyncContent", this.content);
-      }
-    },
-
-    onFilter(filter) {
-      if (isEmpty(filter)) {
-        this.set("asyncContent", this.content);
-        return;
-      }
-
-      this.startLoading();
-
-      this.set(
-        "searchDebounce",
-        run.debounce(this, this._prepareSearch, filter, 350)
-      );
+      DiscourseURL.routeTo(Discourse.getURL(url));
     }
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/tag-group-chooser.js.es6 b/app/assets/javascripts/select-kit/components/tag-group-chooser.js.es6
index 2843ee1e0c3..8857d8cd63f 100644
--- a/app/assets/javascripts/select-kit/components/tag-group-chooser.js.es6
+++ b/app/assets/javascripts/select-kit/components/tag-group-chooser.js.es6
@@ -1,97 +1,63 @@
 import MultiSelectComponent from "select-kit/components/multi-select";
 import TagsMixin from "select-kit/mixins/tags";
-import renderTag from "discourse/lib/render-tag";
-import discourseComputed from "discourse-common/utils/decorators";
-
-const { get, isEmpty, run, makeArray } = Ember;
+import { makeArray } from "discourse-common/lib/helpers";
+import { computed } from "@ember/object";
 
 export default MultiSelectComponent.extend(TagsMixin, {
   pluginApiIdentifiers: ["tag-group-chooser"],
   classNames: ["tag-group-chooser", "tag-chooser"],
-  isAsync: true,
-  filterable: true,
-  filterPlaceholder: "category.tag_groups_placeholder",
-  limit: null,
-  allowAny: false,
 
-  init() {
-    this._super(...arguments);
-
-    this.set("templateForRow", rowComponent => {
-      const tag = rowComponent.get("computedContent");
-      return renderTag(get(tag, "value"), {
-        count: get(tag, "originalContent.count"),
-        noHref: true
-      });
-    });
+  selectKitOptions: {
+    allowAny: false,
+    filterable: true,
+    filterPlaceholder: "category.tag_groups_placeholder",
+    limit: null
   },
 
-  mutateValues(values) {
-    this.set(
-      "tagGroups",
-      values.filter(v => v)
-    );
+  modifyComponentForRow() {
+    return "tag-chooser-row";
   },
 
-  @discourseComputed("tagGroups")
-  values(tagGroups) {
-    return makeArray(tagGroups);
-  },
+  value: computed("tagGroups.[]", function() {
+    return makeArray(this.tagGroups).uniq();
+  }),
 
-  @discourseComputed("tagGroups")
-  content(tagGroups) {
-    return makeArray(tagGroups);
-  },
+  content: computed("tagGroups.[]", function() {
+    return makeArray(this.tagGroups)
+      .uniq()
+      .map(t => this.defaultItem(t, t));
+  }),
 
   actions: {
-    onFilter(filter) {
-      this.expand();
-      this.set(
-        "searchDebounce",
-        run.debounce(this, this._prepareSearch, filter, 200)
-      );
-    },
-
-    onExpand() {
-      if (isEmpty(this.collectionComputedContent)) {
-        this.set(
-          "searchDebounce",
-          run.debounce(this, this._prepareSearch, this.filter, 200)
-        );
-      }
-    },
-
-    onDeselect() {
-      this.set(
-        "searchDebounce",
-        run.debounce(this, this._prepareSearch, this.filter, 200)
-      );
-    },
-
-    onSelect() {
-      this.set(
-        "searchDebounce",
-        run.debounce(this, this._prepareSearch, this.filter, 50)
-      );
+    onChange(value) {
+      this.set("tagGroups", value);
     }
   },
 
-  _prepareSearch(query) {
+  search(query) {
     const data = {
       q: query,
       limit: this.get("siteSettings.max_tag_search_results")
     };
 
-    this.searchTags("/tag_groups/filter/search", data, this._transformJson);
+    return this.searchTags(
+      "/tag_groups/filter/search",
+      data,
+      this._transformJson
+    ).then(results => {
+      if (results && results.length) {
+        return results.filter(r => {
+          return !this.tagGroups.includes(this.getValue(r));
+        });
+      }
+    });
   },
 
   _transformJson(context, json) {
-    let results = json.results.sort((a, b) => a.id > b.id);
-
-    results = results.map(result => {
-      return { id: result.text, name: result.text, count: result.count };
-    });
-
-    return results;
+    return json.results
+      .sort((a, b) => a.id > b.id)
+      .map(result => {
+        return { id: result.text, name: result.text, count: result.count };
+      });
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/tag-notifications-button.js.es6 b/app/assets/javascripts/select-kit/components/tag-notifications-button.js.es6
index c163c3d5d92..67f961fbe36 100644
--- a/app/assets/javascripts/select-kit/components/tag-notifications-button.js.es6
+++ b/app/assets/javascripts/select-kit/components/tag-notifications-button.js.es6
@@ -1,23 +1,13 @@
-import NotificationOptionsComponent from "select-kit/components/notifications-button";
-import discourseComputed from "discourse-common/utils/decorators";
+import NotificationsButtonComponent from "select-kit/components/notifications-button";
 
-export default NotificationOptionsComponent.extend({
+export default NotificationsButtonComponent.extend({
   pluginApiIdentifiers: ["tag-notifications-button"],
-  classNames: "tag-notifications-button",
-  i18nPrefix: "tagging.notifications",
-  showFullTitle: false,
-  allowInitialValueMutation: false,
+  classNames: ["tag-notifications-button"],
 
-  mutateValue(value) {
-    this.action(value);
+  selectKitOptions: {
+    showFullTitle: false,
+    i18nPrefix: "i18nPrefix"
   },
 
-  computeValue() {
-    return this.notificationLevel;
-  },
-
-  @discourseComputed("iconForSelectedDetails")
-  headerIcon(iconForSelectedDetails) {
-    return iconForSelectedDetails;
-  }
+  i18nPrefix: "tagging.notifications"
 });
diff --git a/app/assets/javascripts/select-kit/components/tag-row.js.es6 b/app/assets/javascripts/select-kit/components/tag-row.js.es6
new file mode 100644
index 00000000000..7ababa8f148
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/tag-row.js.es6
@@ -0,0 +1,6 @@
+import SelectKitRowComponent from "select-kit/components/select-kit/select-kit-row";
+
+export default SelectKitRowComponent.extend({
+  layoutName: "select-kit/templates/components/tag-row",
+  classNames: ["tag-row"]
+});
diff --git a/app/assets/javascripts/select-kit/components/timezone-input.js.es6 b/app/assets/javascripts/select-kit/components/timezone-input.js.es6
index 8c52564f052..10a5c3ea2c7 100644
--- a/app/assets/javascripts/select-kit/components/timezone-input.js.es6
+++ b/app/assets/javascripts/select-kit/components/timezone-input.js.es6
@@ -1,31 +1,25 @@
 import ComboBoxComponent from "select-kit/components/combo-box";
-import discourseComputed from "discourse-common/utils/decorators";
+import { computed } from "@ember/object";
 
 export default ComboBoxComponent.extend({
   pluginApiIdentifiers: ["timezone-input"],
-  classNames: "timezone-input",
-  allowAutoSelectFirst: false,
-  fullWidthOnMobile: true,
-  filterable: true,
-  allowAny: false,
+  classNames: ["timezone-input"],
+  nameProperty: null,
+  valueProperty: null,
 
-  @discourseComputed
-  content() {
-    let timezones;
+  selectKitOptions: {
+    filterable: true,
+    allowAny: false
+  },
 
+  content: computed(function() {
     if (
       moment.locale() !== "en" &&
       typeof moment.tz.localizedNames === "function"
     ) {
-      timezones = moment.tz.localizedNames();
+      return moment.tz.localizedNames().mapBy("value");
+    } else {
+      return moment.tz.names();
     }
-    timezones = moment.tz.names();
-
-    return timezones.map(t => {
-      return {
-        id: t,
-        name: t
-      };
-    });
-  }
+  })
 });
diff --git a/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6 b/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6
index 8e25330942a..9c3c619bf19 100644
--- a/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6
+++ b/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options.js.es6
@@ -1,35 +1,46 @@
-import { empty } from "@ember/object/computed";
 import DropdownSelectBoxComponent from "select-kit/components/dropdown-select-box";
-import discourseComputed from "discourse-common/utils/decorators";
+
+const HEADING_COLLECTION = "HEADING_COLLECTION";
 
 export default DropdownSelectBoxComponent.extend({
   pluginApiIdentifiers: ["toolbar-popup-menu-options"],
   classNames: ["toolbar-popup-menu-options"],
-  isHidden: empty("computedContent"),
-  showFullTitle: false,
 
-  @discourseComputed("title")
-  collectionHeader(title) {
-    return `<h3>${title}</h3>`;
+  init() {
+    this._super(...arguments);
+
+    this.prependCollection(HEADING_COLLECTION);
   },
 
-  autoHighlight() {},
+  selectKitOptions: {
+    showFullTitle: false,
+    filterable: false,
+    autoFilterable: false
+  },
 
-  computeContent(content) {
-    return content
-      .map(contentItem => {
-        if (contentItem.condition) {
+  modifyContentForCollection(collection) {
+    if (collection === HEADING_COLLECTION) {
+      return { title: this.selectKit.options.popupTitle };
+    }
+  },
+
+  modifyComponentForCollection(collection) {
+    if (collection === HEADING_COLLECTION) {
+      return "toolbar-popup-menu-options/toolbar-popup-menu-options-heading";
+    }
+  },
+
+  modifyContent(contents) {
+    return contents
+      .map(content => {
+        if (content.condition) {
           return {
-            icon: contentItem.icon,
-            name: I18n.t(contentItem.label),
-            id: contentItem.action
+            icon: content.icon,
+            name: I18n.t(content.label),
+            id: content.action
           };
         }
       })
-      .filter(contentItem => contentItem);
-  },
-
-  // composer is triggering a focus on textarea, we avoid instantly closing
-  // popup menu by tweaking the focus out behavior
-  onFilterInputFocusout() {}
+      .filter(Boolean);
+  }
 });
diff --git a/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.js.es6 b/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.js.es6
new file mode 100644
index 00000000000..1625cf3e5b6
--- /dev/null
+++ b/app/assets/javascripts/select-kit/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.js.es6
@@ -0,0 +1,10 @@
+import Component from "@ember/component";
+import { reads } from "@ember/object/computed";
+
+export default Component.extend({
+  tagName: "h3",
+  layoutName:
+    "select-kit/templates/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading",
+  classNames: ["toolbar-popup-menu-options-heading"],
+  heading: reads("collection.content.title")
+});
diff --git a/app/assets/javascripts/select-kit/components/topic-footer-mobile-dropdown.js.es6 b/app/assets/javascripts/select-kit/components/topic-footer-mobile-dropdown.js.es6
index 07d665486c6..b924b924955 100644
--- a/app/assets/javascripts/select-kit/components/topic-footer-mobile-dropdown.js.es6
+++ b/app/assets/javascripts/select-kit/components/topic-footer-mobile-dropdown.js.es6
@@ -1,36 +1,18 @@
-import { empty } from "@ember/object/computed";
 import ComboBoxComponent from "select-kit/components/combo-box";
 
 export default ComboBoxComponent.extend({
   pluginApiIdentifiers: ["topic-footer-mobile-dropdown"],
-  classNames: "topic-footer-mobile-dropdown",
-  filterable: false,
-  autoFilterable: false,
-  allowInitialValueMutation: false,
-  allowAutoSelectFirst: false,
-  nameProperty: "label",
-  isHidden: empty("content"),
+  classNames: ["topic-footer-mobile-dropdown"],
 
-  computeHeaderContent() {
-    const content = this._super(...arguments);
-
-    content.name = I18n.t("topic.controls");
-    return content;
+  selectKitOptions: {
+    none: "topic.controls",
+    filterable: false,
+    autoFilterable: false
   },
 
-  mutateAttributes() {},
-
-  willComputeContent(content) {
-    content = this._super(content);
-
-    // TODO: this is for backward compat reasons, should be removed
-    // when plugins have been updated for long enough
-    content.forEach(c => {
-      if (c.name) {
-        c.label = c.name;
-      }
-    });
-
-    return content;
+  actions: {
+    onChange(value, item) {
+      item.action && item.action();
+    }
   }
 });
diff --git a/app/assets/javascripts/select-kit/components/topic-notifications-button.js.es6 b/app/assets/javascripts/select-kit/components/topic-notifications-button.js.es6
index 399e9b0e2f4..efca6b77c8a 100644
--- a/app/assets/javascripts/select-kit/components/topic-notifications-button.js.es6
+++ b/app/assets/javascripts/select-kit/components/topic-notifications-button.js.es6
@@ -1,7 +1,16 @@
 import Component from "@ember/component";
+
 export default Component.extend({
   layoutName: "select-kit/templates/components/topic-notifications-button",
-  classNames: "topic-notifications-button",
+  classNames: ["topic-notifications-button"],
+  appendReason: true,
   showFullTitle: true,
-  appendReason: true
+
+  actions: {
+    changeTopicNotificationLevel(newNotificationLevel) {
+      if (newNotificationLevel !== this.notificationLevel) {
+        this.topic.details.updateNotifications(newNotificationLevel);
+      }
+    }
+  }
 });
diff --git a/app/assets/javascripts/select-kit/components/topic-notifications-options.js.es6 b/app/assets/javascripts/select-kit/components/topic-notifications-options.js.es6
index b81c7a43a82..a1f98fa6b57 100644
--- a/app/assets/javascripts/select-kit/components/topic-notifications-options.js.es6
+++ b/app/assets/javascripts/select-kit/components/topic-notifications-options.js.es6
@@ -1,40 +1,32 @@
-import NotificationOptionsComponent from "select-kit/components/notifications-button";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import NotificationsButtonComponent from "select-kit/components/notifications-button";
 import { topicLevels } from "discourse/lib/notification-levels";
+import { computed } from "@ember/object";
 
-export default NotificationOptionsComponent.extend({
+export default NotificationsButtonComponent.extend({
   pluginApiIdentifiers: ["topic-notifications-options"],
-  classNames: "topic-notifications-options",
+  classNames: ["topic-notifications-options"],
   content: topicLevels,
+
+  selectKitOptions: {
+    i18nPrefix: "i18nPrefix",
+    i18nPostfix: "i18nPostfix"
+  },
+
   i18nPrefix: "topic.notifications",
-  allowInitialValueMutation: false,
 
-  @discourseComputed("topic.archetype")
-  i18nPostfix(archetype) {
-    return archetype === "private_message" ? "_pm" : "";
+  i18nPostfix: computed("topic.archetype", function() {
+    return this.topic.archetype === "private_message" ? "_pm" : "";
+  }),
+
+  didInsertElement() {
+    this._super(...arguments);
+
+    this.appEvents.on("topic-notifications-button:changed", this, "onSelect");
   },
 
-  _changed(msg) {
-    if (this.computedValue !== msg.id) {
-      this.get("topic.details").updateNotifications(msg.id);
-    }
-  },
+  willDestroyElement() {
+    this._super(...arguments);
 
-  @on("didInsertElement")
-  _bindGlobalLevelChanged() {
-    this.appEvents.on("topic-notifications-button:changed", this, "_changed");
-  },
-
-  @on("willDestroyElement")
-  _unbindGlobalLevelChanged() {
-    this.appEvents.off("topic-notifications-button:changed", this, "_changed");
-  },
-
-  mutateValue(value) {
-    if (value !== this.value) {
-      this.get("topic.details").updateNotifications(value);
-    }
-  },
-
-  deselect() {}
+    this.appEvents.off("topic-notifications-button:changed", this, "onSelect");
+  }
 });
diff --git a/app/assets/javascripts/select-kit/components/user-notifications-dropdown.js.es6 b/app/assets/javascripts/select-kit/components/user-notifications-dropdown.js.es6
index 1141395a6d3..11546965c9d 100644
--- a/app/assets/javascripts/select-kit/components/user-notifications-dropdown.js.es6
+++ b/app/assets/javascripts/select-kit/components/user-notifications-dropdown.js.es6
@@ -1,27 +1,37 @@
 import DropdownSelectBox from "select-kit/components/dropdown-select-box";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import showModal from "discourse/lib/show-modal";
-import discourseComputed from "discourse-common/utils/decorators";
+import { computed } from "@ember/object";
 
 export default DropdownSelectBox.extend({
   classNames: ["user-notifications", "user-notifications-dropdown"],
-  nameProperty: "label",
 
-  computeContent() {
+  selectKitOptions: {
+    headerIcon: "userNotificationicon"
+  },
+
+  userNotificationicon: computed("mainCollection.[]", "value", function() {
+    return (
+      this.mainCollection &&
+      this.mainCollection.find(row => row.id === this.value).icon
+    );
+  }),
+
+  content: computed(function() {
     const content = [];
 
     content.push({
       icon: "user",
       id: "changeToNormal",
       description: I18n.t("user.user_notifications.normal_option_title"),
-      label: I18n.t("user.user_notifications.normal_option")
+      name: I18n.t("user.user_notifications.normal_option")
     });
 
     content.push({
       icon: "times-circle",
       id: "changeToMuted",
       description: I18n.t("user.user_notifications.mute_option_title"),
-      label: I18n.t("user.user_notifications.mute_option")
+      name: I18n.t("user.user_notifications.mute_option")
     });
 
     if (this.get("user.can_ignore_user")) {
@@ -29,17 +39,12 @@ export default DropdownSelectBox.extend({
         icon: "far-eye-slash",
         id: "changeToIgnored",
         description: I18n.t("user.user_notifications.ignore_option_title"),
-        label: I18n.t("user.user_notifications.ignore_option")
+        name: I18n.t("user.user_notifications.ignore_option")
       });
     }
 
     return content;
-  },
-
-  @discourseComputed("value")
-  headerIcon(value) {
-    return this.computeContent().find(row => row.id === value).icon;
-  },
+  }),
 
   changeToNormal() {
     this.updateNotificationLevel("normal").catch(popupAjaxError);
@@ -53,26 +58,13 @@ export default DropdownSelectBox.extend({
     });
   },
 
-  @discourseComputed("user.ignored", "user.muted")
-  value() {
-    if (this.get("user.ignored")) {
-      return "changeToIgnored";
-    } else if (this.get("user.muted")) {
-      return "changeToMuted";
-    } else {
-      return "changeToNormal";
-    }
-  },
-
-  _select(id) {
-    this.select(
-      this.collectionComputedContent.find(c => c.originalContent.id === id)
-    );
-  },
-
   actions: {
-    onSelect(level) {
+    onChange(level) {
       this[level]();
+
+      // hack but model.ignored/muted is not
+      // getting updated after updateNotificationLevel
+      this.set("value", level);
     }
   }
 });
diff --git a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6 b/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
deleted file mode 100644
index 3cebc129c91..00000000000
--- a/app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6
+++ /dev/null
@@ -1,352 +0,0 @@
-import { next } from "@ember/runloop";
-import { schedule } from "@ember/runloop";
-import { on } from "discourse-common/utils/decorators";
-import Mixin from "@ember/object/mixin";
-
-export default Mixin.create({
-  init() {
-    this._super(...arguments);
-
-    this._previousScrollParentOverflow = null;
-    this._previousCSSContext = null;
-    this.selectionSelector = ".choice";
-    this.filterInputSelector = ".filter-input";
-    this.rowSelector = ".select-kit-row";
-    this.collectionSelector = ".select-kit-collection";
-    this.headerSelector = ".select-kit-header";
-    this.bodySelector = ".select-kit-body";
-    this.wrapperSelector = ".select-kit-wrapper";
-    this.scrollableParentSelector = ".modal-body";
-    this.fixedPlaceholderSelector = `.select-kit-fixed-placeholder-${this.elementId}`;
-  },
-
-  $findRowByValue(value) {
-    return $(
-      this.element.querySelector(`${this.rowSelector}[data-value='${value}']`)
-    );
-  },
-
-  $header() {
-    return $(this.element && this.element.querySelector(this.headerSelector));
-  },
-
-  $body() {
-    return $(this.element && this.element.querySelector(this.bodySelector));
-  },
-
-  $wrapper() {
-    return $(this.element && this.element.querySelector(this.wrapperSelector));
-  },
-
-  $collection() {
-    return $(
-      this.element && this.element.querySelector(this.collectionSelector)
-    );
-  },
-
-  $scrollableParent() {
-    return $(this.scrollableParentSelector);
-  },
-
-  $fixedPlaceholder() {
-    return $(this.fixedPlaceholderSelector);
-  },
-
-  $rows() {
-    return this.$(`${this.rowSelector}:not(.no-content):not(.is-hidden)`);
-  },
-
-  $highlightedRow() {
-    return this.$rows().filter(".is-highlighted");
-  },
-
-  $selectedRow() {
-    return this.$rows().filter(".is-selected");
-  },
-
-  $filterInput() {
-    return $(
-      this.element && this.element.querySelector(this.filterInputSelector)
-    );
-  },
-
-  _adjustPosition() {
-    this._applyDirection();
-    this._applyFixedPosition();
-    this._positionWrapper();
-  },
-
-  @on("willDestroyElement")
-  _clearState() {
-    this.$fixedPlaceholder().remove();
-  },
-
-  // use to collapse and remove focus
-  close(event) {
-    this.setProperties({ isFocused: false });
-    this.collapse(event);
-  },
-
-  focus() {
-    this.focusFilterOrHeader();
-  },
-
-  // try to focus filter and fallback to header if not present
-  focusFilterOrHeader() {
-    const context = this;
-    // next so we are sure it finised expand/collapse
-    next(() => {
-      schedule("afterRender", () => {
-        if (
-          !context.$filterInput() ||
-          !context.$filterInput().is(":visible") ||
-          context
-            .$filterInput()
-            .parent()
-            .hasClass("is-hidden")
-        ) {
-          if (context.$header()) {
-            context.$header().focus();
-          } else {
-            $(context.element).focus();
-          }
-        } else {
-          context.$filterInput().focus();
-        }
-      });
-    });
-  },
-
-  expand() {
-    if (this.isExpanded) return;
-
-    this.setProperties({
-      isExpanded: true,
-      renderedBodyOnce: true,
-      isFocused: true
-    });
-    this.focusFilterOrHeader();
-    this.autoHighlight();
-
-    next(() => {
-      this._boundaryActionHandler("onExpand", this);
-      schedule("afterRender", () => {
-        if (!this.isDestroying && !this.isDestroyed) {
-          this._adjustPosition();
-        }
-      });
-    });
-  },
-
-  collapse() {
-    if (!this.isExpanded) return;
-
-    this.set("isExpanded", false);
-
-    next(() => {
-      this._boundaryActionHandler("onCollapse", this);
-      schedule("afterRender", () => {
-        if (!this.isDestroying && !this.isDestroyed) {
-          this._removeFixedPosition();
-        }
-      });
-    });
-  },
-
-  // lose focus of the component in two steps
-  // first collapse and keep focus and then remove focus
-  unfocus(event) {
-    if (this.isExpanded) {
-      this.collapse(event);
-      this.focus(event);
-    } else {
-      this.close(event);
-    }
-  },
-
-  _destroyEvent(event) {
-    event.preventDefault();
-    event.stopPropagation();
-  },
-
-  _applyDirection() {
-    let options = { left: "auto", bottom: "auto", top: "auto" };
-
-    const discourseHeader = $(".d-header")[0];
-    const discourseHeaderHeight = discourseHeader
-      ? discourseHeader.getBoundingClientRect().top +
-        this._computedStyle(discourseHeader, "height")
-      : 0;
-    const bodyHeight = this._computedStyle(this.$body()[0], "height");
-    const componentHeight = this._computedStyle(this.element, "height");
-    const offsetTop = this.element.getBoundingClientRect().top;
-    const offsetBottom = this.element.getBoundingClientRect().bottom;
-    const windowWidth = $(window).width();
-
-    if (this.fullWidthOnMobile && this.site && this.site.isMobileDevice) {
-      const margin = 10;
-      const relativeLeft =
-        $(this.element).offset().left - $(window).scrollLeft();
-      options.left = margin - relativeLeft;
-      options.width = windowWidth - margin * 2;
-      options.maxWidth = options.minWidth = "unset";
-    } else {
-      const parentWidth = this.$scrollableParent().length
-        ? this.$scrollableParent().width()
-        : windowWidth;
-      const bodyWidth = this._computedStyle(this.$body()[0], "width");
-
-      let spaceToLeftEdge;
-      if (this.$scrollableParent().length) {
-        spaceToLeftEdge =
-          $(this.element).offset().left -
-          this.$scrollableParent().offset().left;
-      } else {
-        spaceToLeftEdge = this.element.getBoundingClientRect().left;
-      }
-
-      let isLeftAligned = true;
-      const spaceToRightEdge = parentWidth - spaceToLeftEdge;
-      const elementWidth = this.element.getBoundingClientRect().width;
-      if (spaceToRightEdge > spaceToLeftEdge + elementWidth) {
-        isLeftAligned = false;
-      }
-
-      if (isLeftAligned) {
-        this.element.classList.add("is-left-aligned");
-        this.element.classList.remove("is-right-aligned");
-
-        if (this._isRTL()) {
-          options.right = this.horizontalOffset;
-        } else {
-          options.left = -bodyWidth + elementWidth - this.horizontalOffset;
-        }
-      } else {
-        this.element.classList.add("is-right-aligned");
-        this.element.classList.remove("is-left-aligned");
-
-        if (this._isRTL()) {
-          options.right = -bodyWidth + elementWidth - this.horizontalOffset;
-        } else {
-          options.left = this.horizontalOffset;
-        }
-      }
-    }
-
-    const fullHeight = this.verticalOffset + bodyHeight + componentHeight;
-    const hasBelowSpace = $(window).height() - offsetBottom - fullHeight >= -1;
-    const hasAboveSpace = offsetTop - fullHeight - discourseHeaderHeight >= -1;
-    const headerHeight = this._computedStyle(this.$header()[0], "height");
-
-    if (hasBelowSpace || (!hasBelowSpace && !hasAboveSpace)) {
-      this.element.classList.add("is-below");
-      this.element.classList.remove("is-above");
-      options.top = headerHeight + this.verticalOffset;
-    } else {
-      this.element.classList.add("is-above");
-      this.element.classList.remove("is-below");
-      options.bottom = headerHeight + this.verticalOffset;
-    }
-
-    this.$body().css(options);
-  },
-
-  _applyFixedPosition() {
-    if (this.isExpanded !== true) return;
-    if (this.$fixedPlaceholder().length) return;
-    if (!this.$scrollableParent().length) return;
-
-    const width = this._computedStyle(this.element, "width");
-    const height = this._computedStyle(this.element, "height");
-
-    this._previousScrollParentOverflow =
-      this._previousScrollParentOverflow ||
-      this.$scrollableParent().css("overflow");
-
-    this._previousCSSContext = this._previousCSSContext || {
-      width,
-      minWidth: this.element.style.minWidth,
-      maxWidth: this.element.style.maxWidth,
-      top: this.element.style.top,
-      left: this.element.style.left,
-      marginLeft: this.element.style.marginLeft,
-      marginRight: this.element.style.marginRight,
-      position: this.element.style.position
-    };
-
-    const componentStyles = {
-      top: this.element.getBoundingClientRect().top,
-      width,
-      left: this.element.getBoundingClientRect().left,
-      marginLeft: 0,
-      marginRight: 0,
-      minWidth: "unset",
-      maxWidth: "unset",
-      position: "fixed"
-    };
-
-    const $placeholderTemplate = $(
-      `<div class='select-kit-fixed-placeholder-${this.elementId}'></div>`
-    );
-    $placeholderTemplate.css({
-      display: "inline-block",
-      width,
-      height,
-      "margin-bottom": this.element.style.marginBottom,
-      "vertical-align": "middle"
-    });
-
-    $(this.element)
-      .before($placeholderTemplate)
-      .css(componentStyles);
-
-    this.$scrollableParent().css({ overflow: "hidden" });
-  },
-
-  _removeFixedPosition() {
-    this.$fixedPlaceholder().remove();
-
-    if (!this.element || this.isDestroying || this.isDestroyed) return;
-    if (this.$scrollableParent().length === 0) return;
-
-    $(this.element).css(this._previousCSSContext || {});
-    this.$scrollableParent().css(
-      "overflow",
-      this._previousScrollParentOverflow || {}
-    );
-  },
-
-  _positionWrapper() {
-    const elementWidth = this._computedStyle(this.element, "width");
-    const headerHeight = this._computedStyle(this.$header()[0], "height");
-    const bodyHeight = this._computedStyle(this.$body()[0], "height");
-
-    this.$wrapper().css({
-      width: elementWidth,
-      height: headerHeight + bodyHeight
-    });
-  },
-
-  _isRTL() {
-    return $("html").css("direction") === "rtl";
-  },
-
-  _computedStyle(element, style) {
-    if (!element) return 0;
-
-    let value;
-
-    if (window.getComputedStyle) {
-      value = window.getComputedStyle(element, null)[style];
-    } else {
-      value = $(element).css(style);
-    }
-
-    return this._getFloat(value);
-  },
-
-  _getFloat(value) {
-    value = parseFloat(value);
-    return $.isNumeric(value) ? value : 0;
-  }
-});
diff --git a/app/assets/javascripts/select-kit/mixins/events.js.es6 b/app/assets/javascripts/select-kit/mixins/events.js.es6
deleted file mode 100644
index 4c54979d1f2..00000000000
--- a/app/assets/javascripts/select-kit/mixins/events.js.es6
+++ /dev/null
@@ -1,442 +0,0 @@
-import { get } from "@ember/object";
-import { makeArray } from "discourse-common/lib/helpers";
-import { isEmpty } from "@ember/utils";
-import { throttle } from "@ember/runloop";
-import { schedule } from "@ember/runloop";
-import { on } from "discourse-common/utils/decorators";
-import Mixin from "@ember/object/mixin";
-
-const { bind } = Ember.run;
-
-export default Mixin.create({
-  @on("init")
-  _initKeys() {
-    this.keys = {
-      TAB: 9,
-      ENTER: 13,
-      ESC: 27,
-      UP: 38,
-      DOWN: 40,
-      BACKSPACE: 8,
-      LEFT: 37,
-      RIGHT: 39,
-      A: 65
-    };
-
-    this._boundMouseDownHandler = bind(this, this._mouseDownHandler);
-    this._boundFocusHeaderHandler = bind(this, this._focusHeaderHandler);
-    this._boundKeydownHeaderHandler = bind(this, this._keydownHeaderHandler);
-    this._boundKeypressHeaderHandler = bind(this, this._keypressHeaderHandler);
-    this._boundChangeFilterInputHandler = bind(
-      this,
-      this._changeFilterInputHandler
-    );
-    this._boundKeypressFilterInputHandler = bind(
-      this,
-      this._keypressFilterInputHandler
-    );
-    this._boundFocusoutFilterInputHandler = bind(
-      this,
-      this._focusoutFilterInputHandler
-    );
-    this._boundKeydownFilterInputHandler = bind(
-      this,
-      this._keydownFilterInputHandler
-    );
-  },
-
-  @on("didInsertElement")
-  _setupEvents() {
-    $(document).on("mousedown.select-kit", this._boundMouseDownHandler);
-
-    this.$header()
-      .on("blur.select-kit", this._boundBlurHeaderHandler)
-      .on("focus.select-kit", this._boundFocusHeaderHandler)
-      .on("keydown.select-kit", this._boundKeydownHeaderHandler)
-      .on("keypress.select-kit", this._boundKeypressHeaderHandler);
-
-    this.$filterInput()
-      .on("change.select-kit", this._boundChangeFilterInputHandler)
-      .on("keypress.select-kit", this._boundKeypressFilterInputHandler)
-      .on("focusout.select-kit", this._boundFocusoutFilterInputHandler)
-      .on("keydown.select-kit", this._boundKeydownFilterInputHandler);
-  },
-
-  @on("willDestroyElement")
-  _cleanUpEvents() {
-    $(document).off("mousedown.select-kit", this._boundMouseDownHandler);
-
-    if (this.$header()) {
-      this.$header()
-        .off("blur.select-kit", this._boundBlurHeaderHandler)
-        .off("focus.select-kit", this._boundFocusHeaderHandler)
-        .off("keydown.select-kit", this._boundKeydownHeaderHandler)
-        .off("keypress.select-kit", this._boundKeypressHeaderHandler);
-    }
-
-    if (this.$filterInput()) {
-      this.$filterInput()
-        .off("change.select-kit", this._boundChangeFilterInputHandler)
-        .off("keypress.select-kit", this._boundKeypressFilterInputHandler)
-        .off("focusout.select-kit", this._boundFocusoutFilterInputHandler)
-        .off("keydown.select-kit", this._boundKeydownFilterInputHandler);
-    }
-  },
-
-  _mouseDownHandler(event) {
-    if (!this.element || this.isDestroying || this.isDestroyed) {
-      return true;
-    }
-
-    if (this.element !== event.target && this.element.contains(event.target)) {
-      event.stopPropagation();
-      if (!this.renderedBodyOnce) return;
-      if (!this.isFocused) return;
-    } else {
-      this.didClickOutside(event);
-    }
-  },
-
-  _blurHeaderHandler() {
-    if (!this.isExpanded && this.isFocused) {
-      this.close();
-    }
-  },
-
-  _focusHeaderHandler(event) {
-    this.set("isFocused", true);
-    this._destroyEvent(event);
-  },
-
-  _keydownHeaderHandler(event) {
-    if (document.activeElement !== this.$header()[0]) return event;
-
-    const keyCode = event.keyCode || event.which;
-
-    if (keyCode === this.keys.TAB && event.shiftKey) {
-      this.unfocus(event);
-    }
-    if (keyCode === this.keys.TAB && !event.shiftKey) this.tabFromHeader(event);
-    if (isEmpty(this.filter) && keyCode === this.keys.BACKSPACE)
-      this.backspaceFromHeader(event);
-    if (keyCode === this.keys.ESC) this.escapeFromHeader(event);
-    if (keyCode === this.keys.ENTER) this.enterFromHeader(event);
-    if ([this.keys.UP, this.keys.DOWN].includes(keyCode))
-      this.upAndDownFromHeader(event);
-    if (
-      isEmpty(this.filter) &&
-      [this.keys.LEFT, this.keys.RIGHT].includes(keyCode)
-    ) {
-      this.leftAndRightFromHeader(event);
-    }
-    return event;
-  },
-
-  _keypressHeaderHandler(event) {
-    const keyCode = event.keyCode || event.which;
-
-    if (keyCode === this.keys.ENTER) return true;
-    if (keyCode === this.keys.TAB) return true;
-
-    this.expand(event);
-
-    if (this.filterable || this.autoFilterable) {
-      this.set("renderedFilterOnce", true);
-    }
-
-    schedule("afterRender", () => {
-      this.$filterInput()
-        .focus()
-        .val(this.$filterInput().val() + String.fromCharCode(keyCode));
-    });
-
-    return false;
-  },
-
-  _keydownFilterInputHandler(event) {
-    const keyCode = event.keyCode || event.which;
-
-    if (
-      isEmpty(this.filter) &&
-      keyCode === this.keys.BACKSPACE &&
-      typeof this.didPressBackspaceFromFilter === "function"
-    ) {
-      this.didPressBackspaceFromFilter(event);
-    }
-
-    if (keyCode === this.keys.TAB && event.shiftKey) {
-      this.unfocus(event);
-    }
-    if (keyCode === this.keys.TAB && !event.shiftKey) this.tabFromFilter(event);
-    if (keyCode === this.keys.ESC) this.escapeFromFilter(event);
-    if (keyCode === this.keys.ENTER) this.enterFromFilter(event);
-    if ([this.keys.UP, this.keys.DOWN].includes(keyCode))
-      this.upAndDownFromFilter(event);
-
-    if (
-      isEmpty(this.filter) &&
-      [this.keys.LEFT, this.keys.RIGHT].includes(keyCode)
-    ) {
-      this.leftAndRightFromFilter(event);
-    }
-  },
-
-  _changeFilterInputHandler(event) {
-    this.send("onFilterComputedContent", $(event.target).val());
-  },
-  _keypressFilterInputHandler(event) {
-    event.stopPropagation();
-  },
-  _focusoutFilterInputHandler(event) {
-    this.onFilterInputFocusout(event);
-  },
-
-  didPressTab(event) {
-    if (this.$highlightedRow().length && this.isExpanded) {
-      this.close(event);
-      this.$header().focus();
-      const guid = this.$highlightedRow().attr("data-guid");
-      this.select(this._findComputedContentItemByGuid(guid));
-      return true;
-    }
-
-    if (isEmpty(this.filter)) {
-      this.close(event);
-      return true;
-    }
-
-    return true;
-  },
-
-  didPressEnter(event) {
-    if (!this.isExpanded) {
-      this.expand(event);
-    } else if (this.$highlightedRow().length) {
-      this.close(event);
-      this.$header().focus();
-      const guid = this.$highlightedRow().attr("data-guid");
-      this.select(this._findComputedContentItemByGuid(guid));
-    }
-
-    return true;
-  },
-
-  didClickSelectionItem(computedContentItem) {
-    this.focus();
-    this.deselect(computedContentItem);
-  },
-
-  didClickRow(computedContentItem) {
-    this.close();
-    this.focus();
-    this.select(computedContentItem);
-  },
-
-  didPressEscape(event) {
-    this._destroyEvent(event);
-
-    if (this.highlightedSelection.length && this.isExpanded) {
-      this.clearHighlightSelection();
-    } else {
-      this.unfocus(event);
-    }
-  },
-
-  didPressUpAndDownArrows(event) {
-    this._destroyEvent(event);
-
-    this.clearHighlightSelection();
-
-    const keyCode = event.keyCode || event.which;
-
-    if (!this.isExpanded) {
-      this.expand(event);
-
-      if (this.$selectedRow().length === 1) {
-        this._highlightRow(this.$selectedRow());
-        return;
-      }
-
-      return;
-    }
-
-    const $rows = this.$rows();
-
-    if (!$rows.length) {
-      return;
-    }
-
-    if ($rows.length === 1) {
-      this._rowSelection($rows, 0);
-      return;
-    }
-
-    const direction = keyCode === 38 ? -1 : 1;
-
-    throttle(this, this._moveHighlight, direction, $rows, 32);
-  },
-
-  didPressBackspaceFromFilter(event) {
-    this.didPressBackspace(event);
-  },
-  didPressBackspace(event) {
-    if (!this.isExpanded) {
-      this.expand();
-      if (event) event.stopImmediatePropagation();
-      return;
-    }
-
-    if (!this.selection || !this.selection.length) return;
-
-    if (!isEmpty(this.filter)) {
-      this.clearHighlightSelection();
-      return;
-    }
-
-    if (!this.highlightedSelection.length) {
-      // try to highlight the last non locked item from the current selection
-      makeArray(this.selection)
-        .slice()
-        .reverse()
-        .some(selection => {
-          if (!get(selection, "locked")) {
-            this.highlightSelection(selection);
-            return true;
-          }
-        });
-
-      if (event) event.stopImmediatePropagation();
-    } else {
-      this.deselect(this.highlightedSelection);
-      if (event) event.stopImmediatePropagation();
-    }
-  },
-
-  didPressSelectAll() {
-    this.highlightSelection(makeArray(this.selection));
-  },
-
-  didClickOutside(event) {
-    if (this.isExpanded && $(event.target).parents(".select-kit").length) {
-      this.close(event);
-      return false;
-    }
-
-    this.close(event);
-    return;
-  },
-
-  // make sure we don’t propagate a click outside component
-  // to avoid closing a modal containing the component for example
-  click(event) {
-    this._destroyEvent(event);
-  },
-
-  didPressLeftAndRightArrows(event) {
-    if (!this.isExpanded) {
-      this.expand();
-      event.stopImmediatePropagation();
-      return;
-    }
-
-    if (isEmpty(this.selection)) return;
-
-    const keyCode = event.keyCode || event.which;
-
-    if (keyCode === this.keys.LEFT) {
-      const prev = this.get("highlightedSelection.lastObject");
-      const indexOfPrev = this.selection.indexOf(prev);
-
-      if (this.selection[indexOfPrev - 1]) {
-        this.highlightSelection(this.selection[indexOfPrev - 1]);
-      } else {
-        this.highlightSelection(this.get("selection.lastObject"));
-      }
-    } else {
-      const prev = this.get("highlightedSelection.firstObject");
-      const indexOfNext = this.selection.indexOf(prev);
-
-      if (this.selection[indexOfNext + 1]) {
-        this.highlightSelection(this.selection[indexOfNext + 1]);
-      } else {
-        this.highlightSelection(this.get("selection.firstObject"));
-      }
-    }
-  },
-
-  tabFromHeader(event) {
-    this.didPressTab(event);
-  },
-  tabFromFilter(event) {
-    this.didPressTab(event);
-  },
-
-  escapeFromHeader(event) {
-    this.didPressEscape(event);
-  },
-  escapeFromFilter(event) {
-    this.didPressEscape(event);
-  },
-
-  upAndDownFromHeader(event) {
-    this.didPressUpAndDownArrows(event);
-  },
-  upAndDownFromFilter(event) {
-    this.didPressUpAndDownArrows(event);
-  },
-
-  leftAndRightFromHeader(event) {
-    this.didPressLeftAndRightArrows(event);
-  },
-  leftAndRightFromFilter(event) {
-    this.didPressLeftAndRightArrows(event);
-  },
-
-  backspaceFromHeader(event) {
-    this.didPressBackspace(event);
-  },
-
-  enterFromHeader(event) {
-    this.didPressEnter(event);
-  },
-  enterFromFilter(event) {
-    this.didPressEnter(event);
-  },
-
-  onFilterInputFocusout(event) {
-    if (
-      !(
-        this.element !== event.relatedTarget &&
-        this.element.contains(event.relatedTarget)
-      )
-    ) {
-      this.close(event);
-    }
-  },
-
-  _moveHighlight(direction, $rows) {
-    const currentIndex = $rows.index(this.$highlightedRow());
-    let nextIndex = currentIndex + direction;
-
-    if (nextIndex < 0) {
-      nextIndex = $rows.length - 1;
-    } else if (nextIndex >= $rows.length) {
-      nextIndex = 0;
-    }
-
-    this._rowSelection($rows, nextIndex);
-  },
-
-  _rowSelection($rows, nextIndex) {
-    const highlightableValue = $rows.eq(nextIndex).attr("data-value");
-    const $highlightableRow = this.$findRowByValue(highlightableValue);
-    this._highlightRow($highlightableRow);
-  },
-
-  _highlightRow($row) {
-    schedule("afterRender", () => {
-      $row.trigger("mouseover").focus();
-      this.focus();
-    });
-  }
-});
diff --git a/app/assets/javascripts/select-kit/mixins/plugin-api.js.es6 b/app/assets/javascripts/select-kit/mixins/plugin-api.js.es6
index 9386c595cfa..6ff04393f27 100644
--- a/app/assets/javascripts/select-kit/mixins/plugin-api.js.es6
+++ b/app/assets/javascripts/select-kit/mixins/plugin-api.js.es6
@@ -19,6 +19,15 @@ function prependContent(pluginApiIdentifiers, contentFunction) {
   _prependContentCallbacks[pluginApiIdentifiers].push(contentFunction);
 }
 
+let _filterContentCallbacks = {};
+function filterContent(pluginApiIdentifiers, contentFunction) {
+  if (isNone(_filterContentCallbacks[pluginApiIdentifiers])) {
+    _filterContentCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _filterContentCallbacks[pluginApiIdentifiers].push(contentFunction);
+}
+
 let _modifyContentCallbacks = {};
 function modifyContent(pluginApiIdentifiers, contentFunction) {
   if (isNone(_modifyContentCallbacks[pluginApiIdentifiers])) {
@@ -39,6 +48,15 @@ function modifyHeaderComputedContent(pluginApiIdentifiers, contentFunction) {
   );
 }
 
+let _modifyNoSelectionCallbacks = {};
+function modifyNoSelection(pluginApiIdentifiers, contentFunction) {
+  if (isNone(_modifyNoSelectionCallbacks[pluginApiIdentifiers])) {
+    _modifyNoSelectionCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _modifyNoSelectionCallbacks[pluginApiIdentifiers].push(contentFunction);
+}
+
 let _modifyCollectionHeaderCallbacks = {};
 function modifyCollectionHeader(pluginApiIdentifiers, contentFunction) {
   if (isNone(_modifyCollectionHeaderCallbacks[pluginApiIdentifiers])) {
@@ -48,15 +66,6 @@ function modifyCollectionHeader(pluginApiIdentifiers, contentFunction) {
   _modifyCollectionHeaderCallbacks[pluginApiIdentifiers].push(contentFunction);
 }
 
-let _onSelectNoneCallbacks = {};
-function onSelectNone(pluginApiIdentifiers, mutationFunction) {
-  if (isNone(_onSelectNoneCallbacks[pluginApiIdentifiers])) {
-    _onSelectNoneCallbacks[pluginApiIdentifiers] = [];
-  }
-
-  _onSelectNoneCallbacks[pluginApiIdentifiers].push(mutationFunction);
-}
-
 let _onSelectCallbacks = {};
 function onSelect(pluginApiIdentifiers, mutationFunction) {
   if (isNone(_onSelectCallbacks[pluginApiIdentifiers])) {
@@ -66,18 +75,57 @@ function onSelect(pluginApiIdentifiers, mutationFunction) {
   _onSelectCallbacks[pluginApiIdentifiers].push(mutationFunction);
 }
 
-export function applyContentPluginApiCallbacks(identifiers, content, context) {
+let _onOpenCallbacks = {};
+function onOpen(pluginApiIdentifiers, mutationFunction) {
+  if (isNone(_onOpenCallbacks[pluginApiIdentifiers])) {
+    _onOpenCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _onOpenCallbacks[pluginApiIdentifiers].push(mutationFunction);
+}
+
+let _onCloseCallbacks = {};
+function onClose(pluginApiIdentifiers, mutationFunction) {
+  if (isNone(_onCloseCallbacks[pluginApiIdentifiers])) {
+    _onCloseCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _onCloseCallbacks[pluginApiIdentifiers].push(mutationFunction);
+}
+
+let _onInputCallbacks = {};
+function onInput(pluginApiIdentifiers, mutationFunction) {
+  if (isNone(_onInputCallbacks[pluginApiIdentifiers])) {
+    _onInputCallbacks[pluginApiIdentifiers] = [];
+  }
+
+  _onInputCallbacks[pluginApiIdentifiers].push(mutationFunction);
+}
+
+export function applyContentPluginApiCallbacks(
+  identifiers,
+  content,
+  selectKit
+) {
   identifiers.forEach(key => {
     (_prependContentCallbacks[key] || []).forEach(c => {
-      content = c()
-        .concat(content)
-        .uniqBy("id");
+      content = Ember.makeArray(c(selectKit, content)).concat(content);
     });
     (_appendContentCallbacks[key] || []).forEach(c => {
-      content = content.concat(c()).uniqBy("id");
+      content = content.concat(Ember.makeArray(c(selectKit, content)));
     });
+    const filterCallbacks = _filterContentCallbacks[key] || [];
+    if (filterCallbacks.length) {
+      content = content.filter(c => {
+        let kept = true;
+        filterCallbacks.forEach(cb => {
+          kept = cb(selectKit, c);
+        });
+        return kept;
+      });
+    }
     (_modifyContentCallbacks[key] || []).forEach(c => {
-      content = c(context, content).uniqBy("id");
+      content = c(selectKit, content);
     });
   });
 
@@ -97,10 +145,13 @@ export function applyHeaderContentPluginApiCallbacks(
 
   return content;
 }
-
-export function applyCollectionHeaderCallbacks(identifiers, content, context) {
+export function applyModifyNoSelectionPluginApiCallbacks(
+  identifiers,
+  content,
+  context
+) {
   identifiers.forEach(key => {
-    (_modifyCollectionHeaderCallbacks[key] || []).forEach(c => {
+    (_modifyNoSelectionCallbacks[key] || []).forEach(c => {
       content = c(context, content);
     });
   });
@@ -108,16 +159,54 @@ export function applyCollectionHeaderCallbacks(identifiers, content, context) {
   return content;
 }
 
-export function applyOnSelectPluginApiCallbacks(identifiers, val, context) {
+export function applyCollectionHeaderCallbacks(
+  identifiers,
+  content,
+  selectKit
+) {
   identifiers.forEach(key => {
-    (_onSelectCallbacks[key] || []).forEach(c => c(context, val));
+    (_modifyCollectionHeaderCallbacks[key] || []).forEach(c => {
+      content = c(selectKit, content);
+    });
+  });
+
+  return content;
+}
+
+export function applyOnSelectPluginApiCallbacks(identifiers, val, selectKit) {
+  identifiers.forEach(key => {
+    (_onSelectCallbacks[key] || []).forEach(c => c(selectKit, val));
   });
 }
 
-export function applyOnSelectNonePluginApiCallbacks(identifiers, context) {
+export function applyOnOpenPluginApiCallbacks(identifiers, selectKit, event) {
+  let keepBubbling = true;
   identifiers.forEach(key => {
-    (_onSelectNoneCallbacks[key] || []).forEach(c => c(context));
+    (_onOpenCallbacks[key] || []).forEach(
+      c => (keepBubbling = c(selectKit, event))
+    );
   });
+  return keepBubbling;
+}
+
+export function applyOnClosePluginApiCallbacks(identifiers, selectKit, event) {
+  let keepBubbling = true;
+  identifiers.forEach(key => {
+    (_onCloseCallbacks[key] || []).forEach(
+      c => (keepBubbling = c(selectKit, event))
+    );
+  });
+  return keepBubbling;
+}
+
+export function applyOnInputPluginApiCallbacks(identifiers, event, selectKit) {
+  let keepBubbling = true;
+  identifiers.forEach(key => {
+    (_onInputCallbacks[key] || []).forEach(
+      c => (keepBubbling = c(selectKit, event))
+    );
+  });
+  return keepBubbling;
 }
 
 export function modifySelectKit(pluginApiIdentifiers) {
@@ -134,6 +223,10 @@ export function modifySelectKit(pluginApiIdentifiers) {
       });
       return modifySelectKit(pluginApiIdentifiers);
     },
+    filterContent: filterFunction => {
+      filterContent(pluginApiIdentifiers, filterFunction);
+      return modifySelectKit(pluginApiIdentifiers);
+    },
     modifyContent: callback => {
       modifyContent(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
@@ -142,6 +235,14 @@ export function modifySelectKit(pluginApiIdentifiers) {
       modifyHeaderComputedContent(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
     },
+    modifySelection: callback => {
+      modifyHeaderComputedContent(pluginApiIdentifiers, callback);
+      return modifySelectKit(pluginApiIdentifiers);
+    },
+    modifyNoSelection: callback => {
+      modifyNoSelection(pluginApiIdentifiers, callback);
+      return modifySelectKit(pluginApiIdentifiers);
+    },
     modifyCollectionHeader: callback => {
       modifyCollectionHeader(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
@@ -150,8 +251,16 @@ export function modifySelectKit(pluginApiIdentifiers) {
       onSelect(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
     },
-    onSelectNone: callback => {
-      onSelectNone(pluginApiIdentifiers, callback);
+    onClose: callback => {
+      onClose(pluginApiIdentifiers, callback);
+      return modifySelectKit(pluginApiIdentifiers);
+    },
+    onOpen: callback => {
+      onOpen(pluginApiIdentifiers, callback);
+      return modifySelectKit(pluginApiIdentifiers);
+    },
+    onInput: callback => {
+      onInput(pluginApiIdentifiers, callback);
       return modifySelectKit(pluginApiIdentifiers);
     }
   };
@@ -160,11 +269,15 @@ export function modifySelectKit(pluginApiIdentifiers) {
 export function clearCallbacks() {
   _appendContentCallbacks = {};
   _prependContentCallbacks = {};
+  _filterContentCallbacks = {};
+  _modifyNoSelectionCallbacks = {};
   _modifyContentCallbacks = {};
   _modifyHeaderComputedContentCallbacks = {};
   _modifyCollectionHeaderCallbacks = {};
   _onSelectCallbacks = {};
-  _onSelectNoneCallbacks = {};
+  _onCloseCallbacks = {};
+  _onOpenCallbacks = {};
+  _onInputCallbacks = {};
 }
 
 const EMPTY_ARRAY = Object.freeze([]);
diff --git a/app/assets/javascripts/select-kit/mixins/tags.js.es6 b/app/assets/javascripts/select-kit/mixins/tags.js.es6
index a9749fa49ac..016c7330c69 100644
--- a/app/assets/javascripts/select-kit/mixins/tags.js.es6
+++ b/app/assets/javascripts/select-kit/mixins/tags.js.es6
@@ -1,67 +1,71 @@
-const { run, get } = Ember;
+import { reads } from "@ember/object/computed";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import Mixin from "@ember/object/mixin";
 
 export default Mixin.create({
-  willDestroyElement() {
-    this._super(...arguments);
-
-    const searchDebounce = this.searchDebounce;
-    if (searchDebounce) run.cancel(searchDebounce);
-  },
-
-  searchTags(url, data, callback, options) {
-    options = options || {};
-
-    if (!options.background) this.startLoading();
-
+  searchTags(url, data, callback) {
     return ajax(Discourse.getURL(url), {
       quietMillis: 200,
       cache: true,
       dataType: "json",
       data
     })
-      .then(json => {
-        this.set("asyncContent", callback(this, json));
-        if (!options.background) this.autoHighlight();
-      })
-      .catch(error => popupAjaxError(error))
-      .finally(() => {
-        if (!options.background) this.stopLoading();
-      });
+      .then(json => callback(this, json))
+      .catch(popupAjaxError);
   },
 
-  validateCreate(term) {
-    if (this.hasReachedMaximum || !this.site.get("can_create_tag")) {
+  selectKitOptions: {
+    allowAny: "allowAnyTag"
+  },
+
+  allowAnyTag: reads("site.can_create_tag"),
+
+  validateCreate(filter, content) {
+    if (this.selectKit.hasReachedMaximum) {
+      this.addError(
+        I18n.t("select_kit.max_content_reached", {
+          count: this.selectKit.limit
+        })
+      );
       return false;
     }
 
     const filterRegexp = new RegExp(this.site.tags_filter_regexp, "g");
-    term = term
+    filter = filter
       .replace(filterRegexp, "")
       .trim()
       .toLowerCase();
 
-    if (!term.length || this.termMatchesForbidden) {
+    if (this.termMatchesForbidden) {
       return false;
     }
 
-    if (this.get("siteSettings.max_tag_length") < term.length) {
+    if (
+      !filter.length ||
+      this.get("siteSettings.max_tag_length") < filter.length
+    ) {
+      this.addError(
+        I18n.t("select_kit.invalid_selection_length", {
+          count: `[1 - ${this.get("siteSettings.max_tag_length")}]`
+        })
+      );
       return false;
     }
 
     const toLowerCaseOrUndefined = string => {
-      return string === undefined ? undefined : string.toLowerCase();
+      return Ember.isEmpty(string) ? undefined : string.toLowerCase();
     };
 
-    const inCollection = this.collectionComputedContent
-      .map(c => toLowerCaseOrUndefined(get(c, "id")))
-      .includes(term);
+    const inCollection = content
+      .map(c => toLowerCaseOrUndefined(this.getValue(c)))
+      .filter(Boolean)
+      .includes(filter);
 
-    const inSelection = this.selection
-      .map(s => toLowerCaseOrUndefined(get(s, "value")))
-      .includes(term);
+    const inSelection = (this.value || [])
+      .map(s => toLowerCaseOrUndefined(s))
+      .filter(Boolean)
+      .includes(filter);
 
     if (inCollection || inSelection) {
       return false;
@@ -72,16 +76,16 @@ export default Mixin.create({
 
   createContentFromInput(input) {
     // See lib/discourse_tagging#clean_tag.
-    let content = input
+    input = input
       .trim()
       .replace(/\s+/g, "-")
       .replace(/[\/\?#\[\]@!\$&'\(\)\*\+,;=\.%\\`^\s|\{\}"<>]+/g, "")
       .substring(0, this.siteSettings.max_tag_length);
 
     if (this.siteSettings.force_lowercase_tags) {
-      content = content.toLowerCase();
+      input = input.toLowerCase();
     }
 
-    return content;
+    return input;
   }
 });
diff --git a/app/assets/javascripts/select-kit/mixins/utils.js.es6 b/app/assets/javascripts/select-kit/mixins/utils.js.es6
index 5ee7b96c90d..d044416f22b 100644
--- a/app/assets/javascripts/select-kit/mixins/utils.js.es6
+++ b/app/assets/javascripts/select-kit/mixins/utils.js.es6
@@ -1,27 +1,76 @@
 import Mixin from "@ember/object/mixin";
-const { get, isNone, guidFor } = Ember;
+const { get } = Ember;
 
 export default Mixin.create({
-  valueForContentItem(content) {
-    switch (typeof content) {
-      case "string":
-      case "number":
-        return content;
-      default:
-        return get(content, this.valueAttribute);
+  defaultItem(value, name) {
+    if (this.selectKit.valueProperty) {
+      const item = {};
+      item[this.selectKit.valueProperty] = value;
+      item[this.selectKit.nameProperty] = name;
+      return item;
+    } else {
+      return name || value;
     }
   },
 
-  _nameForContent(content) {
-    if (isNone(content)) {
+  itemForValue(value) {
+    if (this.selectKit.valueProperty) {
+      return this.mainCollection.findBy(this.selectKit.valueProperty, value);
+    } else {
+      return value;
+    }
+  },
+
+  getProperty(item, property, options = { definedOnly: true }) {
+    const { definedOnly } = options;
+
+    if (item && typeof property === "string") {
+      const attempt = get(item, property);
+      if (attempt) {
+        return attempt;
+      }
+    }
+
+    property = get(this.selectKit, property);
+
+    if (!item) {
       return null;
     }
 
-    if (typeof content === "object") {
-      return get(content, this.nameProperty);
+    if (!property && definedOnly) {
+      return null;
+    } else if (!property) {
+      return item;
+    } else if (typeof property === "string") {
+      return get(item, property);
+    } else {
+      return property(item);
     }
+  },
 
-    return content;
+  getValue(item) {
+    return this.getProperty(item, "valueProperty", { definedOnly: false });
+  },
+
+  getName(item) {
+    return this.getProperty(item, "nameProperty", { definedOnly: false });
+  },
+
+  findValue(content, item) {
+    const property = Ember.get(this.selectKit, "valueProperty");
+
+    if (!property) {
+      if (content.indexOf(item) > -1) {
+        return item;
+      }
+    } else if (typeof property === "string") {
+      return content.findBy(property, this.getValue(item));
+    } else {
+      const value = this.getValue(item);
+      return content.find(contentItem => {
+        return this.getValue(contentItem) === value;
+      });
+    }
   },
 
   _isNumeric(input) {
@@ -29,55 +78,14 @@ export default Mixin.create({
   },
 
   _normalize(input) {
-    input = input.toLowerCase();
+    if (input) {
+      input = input.toLowerCase();
 
-    if (typeof input.normalize === "function") {
-      input = input.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+      if (typeof input.normalize === "function") {
+        input = input.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+      }
     }
 
     return input;
-  },
-
-  _cast(value) {
-    if (value === this.noneValue) return value;
-    return this._castInteger(this._castBoolean(value));
-  },
-
-  _castBoolean(value) {
-    if (
-      this.castBoolean &&
-      Ember.isPresent(value) &&
-      typeof value === "string"
-    ) {
-      return value === "true";
-    }
-
-    return value;
-  },
-
-  _castInteger(value) {
-    if (this.castInteger && Ember.isPresent(value) && this._isNumeric(value)) {
-      return parseInt(value, 10);
-    }
-
-    return value;
-  },
-
-  _findComputedContentItemByGuid(guid) {
-    if (guidFor(this.createRowComputedContent) === guid) {
-      return this.createRowComputedContent;
-    }
-
-    if (guidFor(this.noneRowComputedContent) === guid) {
-      return this.noneRowComputedContent;
-    }
-
-    return this.collectionComputedContent.find(c => {
-      return guidFor(c) === guid;
-    });
-  },
-
-  _filterRemovableComputedContents(computedContent) {
-    return computedContent.filter(c => c.created);
   }
 });
diff --git a/app/assets/javascripts/select-kit/templates/components/category-drop/category-drop-header.hbs b/app/assets/javascripts/select-kit/templates/components/category-drop/category-drop-header.hbs
index 7928a3b94b9..a800565e6d1 100644
--- a/app/assets/javascripts/select-kit/templates/components/category-drop/category-drop-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/category-drop/category-drop-header.hbs
@@ -1,5 +1,8 @@
-<span class="selected-name">
-  {{{label}}}
-</span>
+{{component selectKit.options.selectedNameComponent
+  tabindex=tabindex
+  item=selectedContent
+  selectKit=selectKit
+  shouldDisplayClearableButton=shouldDisplayClearableButton
+}}
 
 {{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-kit/templates/components/category-row.hbs b/app/assets/javascripts/select-kit/templates/components/category-row.hbs
index b35247b47eb..e9356359dca 100644
--- a/app/assets/javascripts/select-kit/templates/components/category-row.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/category-row.hbs
@@ -1,19 +1,19 @@
 {{#if category}}
-    <div class="category-status">
-      {{#if hasParentCategory}}
-        {{#unless hideParentCategory}}
-          {{badgeForParentCategory}}
-        {{/unless}}
-      {{/if}}
-      {{badgeForCategory}}
-      <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
-        &times; {{topicCount}}
-      </span>
-    </div>
-
-    {{#if shouldDisplayDescription}}
-      <div class="category-desc">{{{dir-span description}}}</div>
+  <div class="category-status">
+    {{#if hasParentCategory}}
+      {{#unless hideParentCategory}}
+        {{badgeForParentCategory}}
+      {{/unless}}
     {{/if}}
+    {{badgeForCategory}}
+    <span class="topic-count" aria-label={{i18n "category_row.topic_count" count=topicCount}}>
+      &times; {{topicCount}}
+    </span>
+  </div>
+
+  {{#if shouldDisplayDescription}}
+    <div class="category-desc">{{{dir-span description}}}</div>
+  {{/if}}
 {{else}}
   {{{label}}}
 {{/if}}
diff --git a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
index fbd9610f00a..5213bceac9d 100644
--- a/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/combo-box/combo-box-header.hbs
@@ -1,18 +1,17 @@
 {{#each icons as |icon|}} {{d-icon icon}} {{/each}}
 
-<span class="selected-name">
-  {{#if forceEscape}}
-    {{label}}
-  {{else}}
-    {{{label}}}
-  {{/if}}
-</span>
+{{component selectKit.options.selectedNameComponent
+  tabindex=tabindex
+  item=selectedContent
+  selectKit=selectKit
+}}
 
 {{#if shouldDisplayClearableButton}}
   {{d-button
     class="btn-clear"
-    action=(action onClearSelection bubbles=false)
-    icon="times"}}
+    icon="times"
+    action=selectKit.onClearSelection
+  }}
 {{/if}}
 
 {{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-kit/templates/components/create-color-row.hbs b/app/assets/javascripts/select-kit/templates/components/create-color-row.hbs
new file mode 100644
index 00000000000..838b39e22e9
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/create-color-row.hbs
@@ -0,0 +1 @@
+<span>{{label}}</span>
diff --git a/app/assets/javascripts/select-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs b/app/assets/javascripts/select-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
index 5a1ba341646..0baa85400a8 100644
--- a/app/assets/javascripts/select-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
@@ -1,7 +1,10 @@
-{{#each icons as |icon|}} {{d-icon icon}} {{/each}}
-
-{{#if options.showFullTitle}}
-  <span class="d-button-label selected-name">
-    {{{label}}}
-  </span>
+{{#if selectKit.options.icon}}
+  {{d-icon selectKit.options.icon}}
 {{/if}}
+
+{{component selectKit.options.selectedNameComponent
+  tabindex=tabindex
+  item=selectedContent
+  selectKit=selectKit
+  shouldDisplayClearableButton=shouldDisplayClearableButton
+}}
diff --git a/app/assets/javascripts/select-kit/templates/components/dropdown-select-box/dropdown-select-box-row.hbs b/app/assets/javascripts/select-kit/templates/components/dropdown-select-box/dropdown-select-box-row.hbs
index d6884bd75ad..1c070006add 100644
--- a/app/assets/javascripts/select-kit/templates/components/dropdown-select-box/dropdown-select-box-row.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/dropdown-select-box/dropdown-select-box-row.hbs
@@ -1,15 +1,13 @@
-{{#if template}}
-  {{{template}}}
-{{else}}
-  {{#if icons}}
-    <div class="icons">
-      <span class="selection-indicator"></span>
-      {{#each icons as |icon|}} {{d-icon icon}} {{/each}}
-    </div>
-  {{/if}}
-
-  <div class="texts">
-    <span class="name">{{{label}}}</span>
-    <span class="desc">{{{description}}}</span>
+{{#if icons}}
+  <div class="icons">
+    <span class="selection-indicator"></span>
+    {{#each icons as |icon|}}
+      {{d-icon icon translatedtitle=(dasherize title)}}
+    {{/each}}
   </div>
 {{/if}}
+
+<div class="texts">
+  <span class="name">{{{label}}}</span>
+  <span class="desc">{{{description}}}</span>
+</div>
diff --git a/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs b/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs
index b0bd2ca02fe..171ef3f3a63 100644
--- a/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-header.hbs
@@ -4,25 +4,16 @@
   </div>
 {{/if}}
 
-<span class="selected-name" title={{title}}>
-  {{#if forceEscape}}
-    {{label}}
-  {{else}}
-    {{{label}}}
-  {{/if}}
-</span>
+{{component selectKit.options.selectedNameComponent
+  tabindex=tabindex
+  item=selectedContent
+  selectKit=selectKit
+}}
 
-{{#if computedContent.datetime}}
+{{#if selectedContent.datetime}}
   <span class="future-date-input-selector-datetime">
-    {{computedContent.datetime}}
+    {{selectedContent.datetime}}
   </span>
 {{/if}}
 
-{{#if shouldDisplayClearableButton}}
-  {{d-button
-    class="btn-clear"
-    action=(action onClearSelection bubbles=false)
-    icon="times"}}
-{{/if}}
-
 {{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-row.hbs b/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-row.hbs
index a0217afca1f..9a4a708c959 100644
--- a/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-row.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/future-date-input-selector/future-date-input-selector-row.hbs
@@ -1,13 +1,13 @@
-{{#if computedContent.icons}}
+{{#if item.icons}}
   <div class="future-date-input-selector-icons">
-    {{#each computedContent.icons as |icon|}} {{d-icon icon}} {{/each}}
+    {{#each item.icons as |icon|}} {{d-icon icon}} {{/each}}
   </div>
 {{/if}}
 
 <span class="name">{{label}}</span>
 
-{{#if computedContent.datetime}}
+{{#if item.datetime}}
   <span class="future-date-input-selector-datetime">
-    {{computedContent.datetime}}
+    {{item.datetime}}
   </span>
 {{/if}}
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
index c50e9e371f6..a2826cffb83 100644
--- 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
@@ -1,2 +1,7 @@
-<span class="selected-name">{{label}}</span>
+{{component selectKit.options.selectedNameComponent
+  tabindex=tabindex
+  item=selectedContent
+  selectKit=selectKit
+}}
+
 {{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-kit/templates/components/mini-tag-chooser/selected-collection.hbs b/app/assets/javascripts/select-kit/templates/components/mini-tag-chooser/selected-collection.hbs
new file mode 100644
index 00000000000..a5d613354d0
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/mini-tag-chooser/selected-collection.hbs
@@ -0,0 +1,11 @@
+{{#each tags as |tag|}}
+  {{#d-button
+    translatedTitle=tag.value
+    icon="times"
+    action=(action "deselectTag")
+    actionParam=tag.value
+    class=tag.classNames
+  }}
+    {{discourse-tag tag.value noHref=true}}
+  {{/d-button}}
+{{/each}}
diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select.hbs
index d541cc2c1c4..3d8399f48dd 100644
--- a/app/assets/javascripts/select-kit/templates/components/multi-select.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/multi-select.hbs
@@ -1,50 +1,34 @@
-{{#component headerComponent
-  tabindex=tabindex
-  isFocused=isFocused
-  isExpanded=isExpanded
-  highlightedSelection=highlightedSelection
-  onClickSelectionItem=(action "onClickSelectionItem")
-  computedContent=headerComputedContent
-  onToggle=(action "onToggle")
-  options=headerComponentOptions
-}}
-  {{component filterComponent
-    icon=filterIcon
-    placeholder=filterPlaceholder
-    filter=filter
-    hasSelection=hasSelection
-    isLoading=isLoading
-    shouldDisplayFilter=shouldDisplayFilter
-    isFocused=isFocused
-    onFilterComputedContent=(action "onFilterComputedContent")
+{{#unless isHidden}}
+  {{component selectKit.options.headerComponent
+    tabindex=tabindex
+    value=value
+    selectedContent=selectedContent
+    selectKit=selectKit
   }}
-{{/component}}
 
-<div class="select-kit-body">
-  {{#if renderedBodyOnce}}
-  {{#unless isLoading}}
-    {{component collectionComponent
-      collectionHeaderComputedContent=collectionHeaderComputedContent
-      hasSelection=hasSelection
-      noneRowComputedContent=noneRowComputedContent
-      createRowComputedContent=createRowComputedContent
-      collectionComputedContent=collectionComputedContent
-      rowComponent=rowComponent
-      noneRowComponent=noneRowComponent
-      createRowComponent=createRowComponent
-      templateForRow=templateForRow
-      templateForNoneRow=templateForNoneRow
-      templateForCreateRow=templateForCreateRow
-      onClickRow=(action "onClickRow")
-      onMouseoverRow=(action "onMouseoverRow")
-      highlighted=highlighted
-      computedValue=computedValue
-      rowComponentOptions=rowComponentOptions
-      noContentRow=noContentRow
-      validationMessage=validationMessage
-    }}
-  {{/unless}}
-  {{/if}}
-</div>
+  {{#select-kit/select-kit-body selectKit=selectKit}}
+    {{#unless selectKit.isLoading}}
+      {{#if selectKit.filter}}
+      {{#if selectKit.hasNoContent}}
+        <span class="no-content">
+          {{i18n "select_kit.no_content"}}
+        </span>
+      {{/if}}
+      {{/if}}
 
-<div class="select-kit-wrapper"></div>
+      {{#each collections as |collection|}}
+        {{component (component-for-collection collection.identifier selectKit)
+          collection=collection
+          selectKit=selectKit
+          value=value
+        }}
+      {{/each}}
+    {{else}}
+      <span class="is-loading">
+        {{loading-spinner size="small"}}
+      </span>
+    {{/unless}}
+  {{/select-kit/select-kit-body}}
+
+  <div class="select-kit-wrapper"></div>
+{{/unless}}
diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs
index e95d429d27f..78f0d8f6aad 100644
--- a/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs
@@ -1,12 +1,15 @@
 <div class="choices">
-  {{#each computedContent.selection as |selection|}}
-    {{component selectedNameComponent
-      onClickSelectionItem=onClickSelectionItem
-      highlightedSelection=highlightedSelection
-      forceEscape=forceEscape
-      computedContent=selection}}
+  {{#each selectedContent as |item|}}
+    {{component selectKit.options.selectedNameComponent
+      tabindex=tabindex
+      item=item
+      selectKit=selectKit
+    }}
   {{/each}}
-  <span class="filter choice" tabindex="-1">
-    {{yield}}
-  </span>
+
+  <div class="choice input-wrapper">
+    {{component selectKit.options.filterComponent
+      selectKit=selectKit
+    }}
+  </div>
 </div>
diff --git a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs b/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs
deleted file mode 100644
index b39d272a045..00000000000
--- a/app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs
+++ /dev/null
@@ -1,14 +0,0 @@
-{{#if headerContent}}<div class="header">{{headerContent}}</div>{{/if}}
-
-<div class="body">
-  <span class="name">
-    {{#if forceEscape}}
-      {{label}}
-    {{else}}
-      {{{label}}}
-    {{/if}}
-  </span>
-  {{d-icon 'times'}}
-</div>
-
-{{#if footerContent}}<div class="footer">{{footerContent}}</div>{{/if}}
diff --git a/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-header.hbs b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-header.hbs
index 698c054c930..ae393d67c0c 100644
--- a/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-header.hbs
@@ -1,5 +1,8 @@
 <h2 class="selected-name" title={{title}}>
-  {{period-title value showDateRange=true fullDay=options.fullDay}}
+  {{period-title value
+    showDateRange=true
+    fullDay=selectKit.options.fullDay
+  }}
 </h2>
 
 {{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs
index d37693289a1..a0a5977c831 100644
--- a/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/period-chooser/period-chooser-row.hbs
@@ -1,5 +1,8 @@
 <span class="selection-indicator"></span>
 
 <span class="period-title">
-  {{period-title value showDateRange=true fullDay=options.fullDay}}
+  {{period-title rowValue
+    showDateRange=true
+    fullDay=selectKit.options.fullDay
+  }}
 </span>
diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/errors-collection.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/errors-collection.hbs
new file mode 100644
index 00000000000..71befd8decb
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/select-kit/errors-collection.hbs
@@ -0,0 +1,5 @@
+{{#if collection}}
+  {{#each collection.content as |item|}}
+    <li class="select-kit-error">{{item}}</li>
+  {{/each}}
+{{/if}}
diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-body.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-body.hbs
new file mode 100644
index 00000000000..cc9c19b3b4f
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-body.hbs
@@ -0,0 +1,3 @@
+{{#if selectKit.isExpanded}}
+  {{yield}}
+{{/if}}
diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs
index b673bd18d24..3a3cae0cecf 100644
--- a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-collection.hbs
@@ -1,54 +1,7 @@
-{{#if collectionHeaderComputedContent}}
-  <div class="collection-header">
-    {{{collectionHeaderComputedContent}}}
-  </div>
-{{/if}}
-
-{{#if hasSelection}}
-  {{#if noneRowComputedContent}}
-    {{component noneRowComponent
-      computedContent=noneRowComputedContent
-      templateForRow=templateForNoneRow
-      highlighted=highlighted
-      onMouseoverRow=onMouseoverRow
-      computedValue=computedValue
-      options=rowComponentOptions
-      onClickRow=onClickRow
-    }}
-  {{/if}}
-{{/if}}
-
-{{#if createRowComputedContent}}
-  {{component createRowComponent
-    computedContent=createRowComputedContent
-    highlighted=highlighted
-    computedValue=computedValue
-    templateForRow=templateForCreateRow
-    onMouseoverRow=onMouseoverRow
-    onClickRow=onClickRow
-    options=rowComponentOptions
+{{#each collection.content as |item|}}
+  {{component (component-for-row collection.identifier item selectKit)
+    item=item
+    value=value
+    selectKit=selectKit
   }}
-{{/if}}
-
-{{#if noContentRow}}
-  <li class="select-kit-row no-content">
-    {{noContentRow}}
-  </li>
-{{else}}
-  {{#if validationMessage}}
-    <div class="validation-message">
-      {{validationMessage}}
-    </div>
-  {{/if}}
-  {{#each collectionComputedContent as |computedContent|}}
-    {{component rowComponent
-      computedContent=computedContent
-      highlighted=highlighted
-      computedValue=computedValue
-      templateForRow=templateForRow
-      onClickRow=onClickRow
-      onMouseoverRow=onMouseoverRow
-      options=rowComponentOptions
-    }}
-  {{/each}}
-{{/if}}
+{{/each}}
diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-filter.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-filter.hbs
index 4e0a519d58c..30965ec78eb 100644
--- a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-filter.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-filter.hbs
@@ -1,19 +1,18 @@
-{{input
-  tabindex=-1
-  class="filter-input"
-  placeholder=computedPlaceholder
-  key-up=onFilterComputedContent
-  autocomplete="off"
-  autocorrect="off"
-  autocapitalize="off"
-  spellcheck=false
-  value=filter
-}}
+{{#unless isHidden}}
+  {{input
+    tabindex=-1
+    class="filter-input"
+    placeholder=placeholder
+    autocomplete="off"
+    autocorrect="off"
+    autocapitalize="off"
+    spellcheck=false
+    value=(readonly selectKit.filter)
+    input=(action "onInput")
+    keyDown=(action "onKeydown")
+  }}
 
-{{#if isLoading}}
-  {{loading-spinner size="small"}}
-{{else}}
-  {{#if icon}}
-    {{d-icon icon class="filter-icon"}}
+  {{#if selectKit.options.filterIcon}}
+    {{d-icon selectKit.options.filterIcon class="filter-icon"}}
   {{/if}}
-{{/if}}
+{{/unless}}
diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-header.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-header.hbs
deleted file mode 100644
index 77ea5328166..00000000000
--- a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-header.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-{{#each icons as |icon|}} {{d-icon icon}} {{/each}}
-
-<span class="selected-name">
-  {{#if forceEscape}}
-    {{label}}
-  {{else}}
-    {{{label}}}
-  {{/if}}
-</span>
diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-row.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-row.hbs
index 984d7091516..c5cd814c4e9 100644
--- a/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-row.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/select-kit/select-kit-row.hbs
@@ -1,12 +1,7 @@
-{{#if template}}
-  {{{template}}}
-{{else}}
-  {{#each icons as |icon|}} {{d-icon icon}} {{/each}}
-  <span class="name">
-    {{#if forceEscape}}
-      {{label}}
-    {{else}}
-      {{{label}}}
-    {{/if}}
-  </span>
-{{/if}}
+{{#each icons as |icon|}}
+  {{d-icon icon title=(dasherize title)}}
+{{/each}}
+
+<span class="name">
+  {{label}}
+</span>
diff --git a/app/assets/javascripts/select-kit/templates/components/select-kit/single-select-header.hbs b/app/assets/javascripts/select-kit/templates/components/select-kit/single-select-header.hbs
new file mode 100644
index 00000000000..37bb407decc
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/select-kit/single-select-header.hbs
@@ -0,0 +1,7 @@
+{{#each icons as |icon|}} {{d-icon icon}} {{/each}}
+
+{{component selectKit.options.selectedNameComponent
+  tabindex=tabindex
+  item=selectedContent
+  selectKit=selectKit
+}}
diff --git a/app/assets/javascripts/select-kit/templates/components/selected-name.hbs b/app/assets/javascripts/select-kit/templates/components/selected-name.hbs
new file mode 100644
index 00000000000..b1b1aa9ae3d
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/selected-name.hbs
@@ -0,0 +1,26 @@
+{{#if selectKit.options.showFullTitle}}
+  {{#if item.icon}}
+    {{d-icon item.icon}}
+  {{/if}}
+
+  <span class="name">
+    {{label}}
+  </span>
+
+  {{#if selectKit.options.clearOnClick}}
+    {{d-icon "times"}}
+  {{else}}
+    {{#if shouldDisplayClearableButton}}
+      {{d-button
+        class="btn-clear"
+        icon="times"
+        action=selectKit.deselect
+        actionParam=item
+      }}
+    {{/if}}
+  {{/if}}
+{{else}}
+  {{#if item.icon}}
+    {{d-icon item.icon}}
+  {{/if}}
+{{/if}}
diff --git a/app/assets/javascripts/select-kit/templates/components/single-select.hbs b/app/assets/javascripts/select-kit/templates/components/single-select.hbs
index e01241d3190..65b79a814d7 100644
--- a/app/assets/javascripts/select-kit/templates/components/single-select.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/single-select.hbs
@@ -1,48 +1,36 @@
-{{component headerComponent
-  caretIcon=caretIcon
-  tabindex=tabindex
-  isFocused=isFocused
-  isExpanded=isExpanded
-  computedContent=headerComputedContent
-  onToggle=(action "onToggle")
-  onClearSelection=(action "onClearSelection")
-  options=headerComponentOptions
-}}
-
-<div class="select-kit-body">
-  {{component filterComponent
-    filter=filter
-    isLoading=isLoading
-    icon=filterIcon
-    hasSelection=hasSelection
-    shouldDisplayFilter=shouldDisplayFilter
-    placeholder=filterPlaceholder
-    isFocused=isFocused
-    onFilterComputedContent=(action "onFilterComputedContent")
+{{#unless isHidden}}
+  {{component selectKit.options.headerComponent
+    tabindex=tabindex
+    value=value
+    selectedContent=selectedContent
+    selectKit=selectKit
   }}
 
-  {{#if renderedBodyOnce}}
-    {{component collectionComponent
-      collectionHeaderComputedContent=collectionHeaderComputedContent
-      hasSelection=hasSelection
-      noneRowComputedContent=noneRowComputedContent
-      createRowComputedContent=createRowComputedContent
-      collectionComputedContent=collectionComputedContent
-      rowComponent=rowComponent
-      noneRowComponent=noneRowComponent
-      createRowComponent=createRowComponent
-      templateForRow=templateForRow
-      templateForNoneRow=templateForNoneRow
-      templateForCreateRow=templateForCreateRow
-      onClickRow=(action "onClickRow")
-      onMouseoverRow=(action "onMouseoverRow")
-      highlighted=highlighted
-      computedValue=computedValue
-      rowComponentOptions=rowComponentOptions
-      noContentRow=noContentRow
-      validationMessage=validationMessage
-    }}
-  {{/if}}
-</div>
+  {{#select-kit/select-kit-body selectKit=selectKit}}
+    {{component selectKit.options.filterComponent selectKit=selectKit}}
 
-<div class="select-kit-wrapper"></div>
+    {{#unless selectKit.isLoading}}
+      {{#if selectKit.filter}}
+      {{#if selectKit.hasNoContent}}
+        <span class="no-content">
+          {{i18n "select_kit.no_content"}}
+        </span>
+      {{/if}}
+      {{/if}}
+
+      {{#each collections as |collection|}}
+        {{component (component-for-collection collection.identifier selectKit)
+          collection=collection
+          selectKit=selectKit
+          value=value
+        }}
+      {{/each}}
+    {{else}}
+      <span class="is-loading">
+        {{loading-spinner size="small"}}
+      </span>
+    {{/unless}}
+  {{/select-kit/select-kit-body}}
+
+  <div class="select-kit-wrapper"></div>
+{{/unless}}
diff --git a/app/assets/javascripts/select-kit/templates/components/tag-chooser-row.hbs b/app/assets/javascripts/select-kit/templates/components/tag-chooser-row.hbs
new file mode 100644
index 00000000000..ef4dbda96b5
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/tag-chooser-row.hbs
@@ -0,0 +1 @@
+{{discourse-tag rowValue count=item.count noHref=true}}
diff --git a/app/assets/javascripts/select-kit/templates/components/tag-drop/tag-drop-header.hbs b/app/assets/javascripts/select-kit/templates/components/tag-drop/tag-drop-header.hbs
index 41e15b8653e..a800565e6d1 100644
--- a/app/assets/javascripts/select-kit/templates/components/tag-drop/tag-drop-header.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/tag-drop/tag-drop-header.hbs
@@ -1,9 +1,8 @@
-<span class="selected-name">
-  {{#if forceEscape}}
-    {{label}}
-  {{else}}
-    {{{label}}}
-  {{/if}}
-</span>
+{{component selectKit.options.selectedNameComponent
+  tabindex=tabindex
+  item=selectedContent
+  selectKit=selectKit
+  shouldDisplayClearableButton=shouldDisplayClearableButton
+}}
 
 {{d-icon caretIcon class="caret-icon"}}
diff --git a/app/assets/javascripts/select-kit/templates/components/tag-row.hbs b/app/assets/javascripts/select-kit/templates/components/tag-row.hbs
new file mode 100644
index 00000000000..da8360699bd
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/tag-row.hbs
@@ -0,0 +1,4 @@
+{{discourse-tag rowValue
+  noHref=true
+  count=item.count
+}}
diff --git a/app/assets/javascripts/select-kit/templates/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.hbs b/app/assets/javascripts/select-kit/templates/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.hbs
new file mode 100644
index 00000000000..0b82f33dcc4
--- /dev/null
+++ b/app/assets/javascripts/select-kit/templates/components/toolbar-popup-menu-options/toolbar-popup-menu-options-heading.hbs
@@ -0,0 +1 @@
+{{heading}}
diff --git a/app/assets/javascripts/select-kit/templates/components/topic-notifications-button.hbs b/app/assets/javascripts/select-kit/templates/components/topic-notifications-button.hbs
index 2569ea0c865..2f3a689c8c5 100644
--- a/app/assets/javascripts/select-kit/templates/components/topic-notifications-button.hbs
+++ b/app/assets/javascripts/select-kit/templates/components/topic-notifications-button.hbs
@@ -1,7 +1,11 @@
 {{topic-notifications-options
   value=notificationLevel
   topic=topic
-  showFullTitle=showFullTitle}}
+  onChange=(action "changeTopicNotificationLevel")
+  options=(hash
+    showFullTitle=showFullTitle
+  )
+}}
 
 {{#if appendReason}}
   <p class="reason">
diff --git a/app/assets/javascripts/vendor.js b/app/assets/javascripts/vendor.js
index 6304b9816ac..0d1ee8b7297 100644
--- a/app/assets/javascripts/vendor.js
+++ b/app/assets/javascripts/vendor.js
@@ -8,6 +8,7 @@
 //= require jquery.ui.widget.js
 //= require Markdown.Converter.js
 //= require bootbox.js
+//= require popper.js
 //= require bootstrap-modal.js
 //= require caret_position
 //= require favcount.js
diff --git a/app/assets/javascripts/wizard/components/invite-list.js.es6 b/app/assets/javascripts/wizard/components/invite-list.js.es6
index de04d70bab5..2c541d38c5d 100644
--- a/app/assets/javascripts/wizard/components/invite-list.js.es6
+++ b/app/assets/javascripts/wizard/components/invite-list.js.es6
@@ -17,6 +17,8 @@ export default Component.extend({
       { id: "regular", label: I18n.t("wizard.invites.roles.regular") }
     ]);
 
+    this.set("inviteRole", this.get("roles.0.id"));
+
     this.updateField();
   },
 
diff --git a/app/assets/javascripts/wizard/templates/components/invite-list.hbs b/app/assets/javascripts/wizard/templates/components/invite-list.hbs
index d37cc82e3fe..4a8ea1ffae7 100644
--- a/app/assets/javascripts/wizard/templates/components/invite-list.hbs
+++ b/app/assets/javascripts/wizard/templates/components/invite-list.hbs
@@ -12,7 +12,12 @@
     {{input class="invite-email wizard-focusable" value=inviteEmail placeholder="user@example.com" tabindex="9"}}
   </div>
 
-  {{combo-box allowInitialValueMutation=true value=inviteRole content=roles nameProperty="label"}}
+  {{combo-box
+    value=inviteRole
+    content=roles
+    nameProperty="label"
+    onChange=(action (mut inviteRole))
+  }}
 
   <button class="wizard-btn small add-user" {{action "addUser"}}>
     {{d-icon "plus"}}{{i18n "wizard.invites.add_user"}}
diff --git a/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs b/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
index f95625b7a81..c2d8f495aa7 100644
--- a/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
+++ b/app/assets/javascripts/wizard/templates/components/wizard-field-dropdown.hbs
@@ -1,6 +1,9 @@
-{{combo-box elementId=field.id
-            class=fieldClass
-            value=field.value
-            content=field.choices
-            nameProperty="label"
-            tabindex="9"}}
+{{combo-box
+  elementId=field.id
+  class=fieldClass
+  value=field.value
+  content=field.choices
+  nameProperty="label"
+  tabindex="9"
+  onChange=(action (mut field.value))
+}}
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 20c8fc58051..42b402d00eb 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -21,6 +21,7 @@
 @import "common/select-kit/period-chooser";
 @import "common/select-kit/pinned-button";
 @import "common/select-kit/select-kit";
+@import "common/select-kit/single-select";
 @import "common/select-kit/tag-chooser";
 @import "common/select-kit/tag-drop";
 @import "common/select-kit/toolbar-popup-menu-options";
diff --git a/app/assets/stylesheets/common/select-kit/category-drop.scss b/app/assets/stylesheets/common/select-kit/category-drop.scss
index 71d1866acea..88a970fa9c8 100644
--- a/app/assets/stylesheets/common/select-kit/category-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/category-drop.scss
@@ -1,6 +1,8 @@
 .select-kit {
   &.combo-box {
     &.category-drop {
+      min-width: auto;
+
       .badge-wrapper {
         font-size: $font-0;
         font-weight: normal;
diff --git a/app/assets/stylesheets/common/select-kit/category-selector.scss b/app/assets/stylesheets/common/select-kit/category-selector.scss
index f18c0450d7a..0f2ba6c4193 100644
--- a/app/assets/stylesheets/common/select-kit/category-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/category-selector.scss
@@ -1,7 +1,7 @@
 .select-kit,
 .select-kit-box {
   &.category-selector {
-    .selected-name {
+    .select-kit-selected-name {
       .badge-wrapper {
         &.box {
           margin: 2px;
diff --git a/app/assets/stylesheets/common/select-kit/combo-box.scss b/app/assets/stylesheets/common/select-kit/combo-box.scss
index f6434d2874a..863e9fc3364 100644
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@@ -1,9 +1,6 @@
 .select-kit {
   &.combo-box {
-    min-width: auto;
     .select-kit-body {
-      width: 100%;
-      min-width: 150px;
       border-radius: 0;
       box-shadow: shadow("dropdown");
     }
@@ -18,30 +15,21 @@
     }
 
     .select-kit-filter {
-      padding: $input-padding;
-      border-top: 1px solid $primary-low;
-      border-bottom: 1px solid $primary-low;
-
-      .spinner {
-        flex: 0 0 auto;
-      }
-
       .filter-input,
       .filter-input:focus,
       .filter-input:active {
-        flex: 0 0 auto;
-        width: 90%; // Firefox quirk
+        flex: 1;
       }
 
       .filter-icon {
-        padding-left: 5px;
+        margin-left: 0.25em;
       }
     }
 
     .select-kit-header {
       background: $secondary;
       border: 1px solid $primary-medium;
-      padding: 0 5px 0 10px;
+      padding: 0 0.25em 0 0.5em;
       font-weight: 500;
       font-size: $font-0;
 
@@ -57,7 +45,6 @@
       padding: 0;
       min-width: 100px;
       max-height: 200px;
-      max-width: 32em;
 
       .collection-header {
         a {
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 b83f8334a95..2c9949e4055 100644
--- a/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/mini-tag-chooser.scss
@@ -16,10 +16,6 @@
         }
       }
 
-      .select-kit-body {
-        max-width: 32em;
-      }
-
       .select-kit-header {
         height: 30px;
 
@@ -57,39 +53,41 @@
         }
       }
 
-      .select-kit-collection {
-        .collection-header {
-          max-height: 125px;
-          overflow: hidden;
-          flex: 1 0 auto;
-          border-bottom: 1px solid $primary-low;
+      .selected-tags {
+        max-height: 125px;
+        overflow-y: auto;
+        display: flex;
+        border-bottom: 1px solid $primary-low;
+        padding: 0.25em 0 0 0.25em;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+        width: 100%;
 
-          .selected-tags {
-            display: flex;
-            padding: 4px;
-            flex-wrap: wrap;
-            margin: -2px;
-            overflow: hidden;
+        .selected-tag {
+          background: $primary-low;
+          box-sizing: border-box;
+          margin: 0;
+          padding: 0.5em;
+          border: 0;
+          font-size: $font-down-1;
+          margin-right: 0.25em;
+          margin-bottom: 0.25em;
+
+          .tag-icon {
+            margin-right: 0.25em;
           }
 
-          .selected-tag {
-            background: $primary-low;
-            padding: 2px 4px;
-            margin: 2px;
-            border: 0;
+          &.is-highlighted {
+            box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0, 0, 0, 0.05);
+          }
 
-            &.is-highlighted {
-              box-shadow: 0 0 2px $danger, 0 1px 0 rgba(0, 0, 0, 0.05);
-            }
+          .d-icon {
+            color: $primary-low-mid;
+            vertical-align: middle;
+          }
 
-            .d-icon {
-              color: $primary-low-mid;
-              vertical-align: middle;
-            }
-
-            &:hover .d-icon {
-              color: $danger;
-            }
+          &:hover .d-icon.d-icon-times {
+            color: $danger;
           }
         }
       }
diff --git a/app/assets/stylesheets/common/select-kit/multi-select.scss b/app/assets/stylesheets/common/select-kit/multi-select.scss
index beff607eee3..e1ee384a8e7 100644
--- a/app/assets/stylesheets/common/select-kit/multi-select.scss
+++ b/app/assets/stylesheets/common/select-kit/multi-select.scss
@@ -42,14 +42,6 @@
       }
     }
 
-    &.is-highlighted {
-      .multi-select-header {
-        border-radius: 0;
-        border-bottom: 1px solid transparent;
-        box-shadow: shadow("focus");
-      }
-    }
-
     &.is-expanded {
       .select-kit-wrapper {
         display: block;
@@ -69,11 +61,10 @@
     }
 
     .choices {
-      margin: 0 2px;
+      margin: 0;
+      padding: 0 0 2px 0;
       box-sizing: border-box;
-      display: flex;
-      justify-content: flex-start;
-      flex-wrap: wrap;
+      display: block;
       width: 100%;
 
       .choice {
@@ -81,19 +72,23 @@
         box-sizing: border-box;
         align-items: center;
         justify-content: space-between;
-        flex-wrap: wrap;
-        flex-direction: row;
-        margin: 1px 0px 2px 2px;
+        margin: 2px 0 0px 3px;
+        padding: 0;
+        float: left;
+        height: 30px;
+
+        &.input-wrapper {
+          min-width: 120px;
+        }
       }
 
       .filter {
-        align-items: center;
-        justify-content: flex-start;
         white-space: nowrap;
         min-width: 50px;
         padding: 0;
         outline: none;
-        flex: 1 0 0px;
+        flex: 1;
+        display: flex;
 
         .filter-input,
         .filter-input:focus {
@@ -147,19 +142,20 @@
       }
 
       .selected-name {
-        .footer {
-          display: flex;
-          width: 100%;
-        }
-
-        .body {
-          background: $primary-low;
-          padding: 4px;
-        }
+        background: $primary-low;
+        padding: 0.25em;
+        flex: 1;
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
 
         .d-icon {
           color: $primary-low-mid;
           vertical-align: middle;
+
+          &:last-child {
+            margin-left: 0.5em;
+          }
         }
         &:hover .d-icon:last-child {
           color: $danger;
diff --git a/app/assets/stylesheets/common/select-kit/notifications-button.scss b/app/assets/stylesheets/common/select-kit/notifications-button.scss
index 45679a09b2b..ba3e492f3e7 100644
--- a/app/assets/stylesheets/common/select-kit/notifications-button.scss
+++ b/app/assets/stylesheets/common/select-kit/notifications-button.scss
@@ -2,8 +2,8 @@
   &.dropdown-select-box {
     &.notifications-button {
       .select-kit-body {
-        min-width: 550px;
-        max-width: 550px;
+        max-width: 400px;
+        width: 400px;
       }
 
       .select-kit-row {
diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
index 281dad73157..433f2d2c9ed 100644
--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -1,7 +1,3 @@
-.mobile-view .select-kit.is-expanded {
-  z-index: z("dropdown");
-}
-
 .select-kit {
   border: none;
   min-width: 220px;
@@ -29,19 +25,23 @@
       left: 0;
       position: absolute;
       top: 0;
+      align-items: center;
+      justify-content: center;
     }
 
     .select-kit-collection {
       border-radius: inherit;
+      width: 100%;
+    }
+  }
+
+  &.is-loading {
+    .select-kit-collection {
+      overflow: hidden;
     }
   }
 
   &.is-above {
-    .select-kit-body {
-      bottom: 0;
-      top: auto;
-    }
-
     .select-kit-filter {
       border-top: 0;
     }
@@ -61,7 +61,6 @@
     overflow: hidden;
     transition: all 0.25s;
     cursor: pointer;
-    outline: none;
     display: flex;
     align-items: center;
     flex-direction: row;
@@ -70,25 +69,24 @@
     .selected-name {
       text-align: left;
       flex: 0 1 auto;
-      padding: 1px 0;
-      @include ellipsis;
       color: inherit;
-      .body {
-        max-width: 100%;
-        box-sizing: border-box;
-        display: flex;
-        align-items: center;
-      }
+      display: flex;
+
       .name {
         display: inline-block;
-        @include ellipsis;
+      }
+
+      &.select-kit-selected-color {
+        border-bottom-width: 5px;
+        border-bottom-style: solid;
       }
     }
 
     .btn-clear {
-      padding: 0 10px;
+      padding: 0.25em;
       border: 0;
       background: none;
+      min-height: auto;
     }
 
     .icon {
@@ -119,6 +117,7 @@
     display: none;
     background: $secondary;
     box-sizing: border-box;
+    min-width: inherit;
   }
 
   .select-kit-row {
@@ -158,6 +157,11 @@
     .discourse-tag-count {
       color: $primary;
     }
+
+    &.create-color-row {
+      border-left-style: solid;
+      border-left-width: 5px;
+    }
   }
 
   .select-kit-collection {
@@ -169,6 +173,7 @@
     margin: 0;
     padding: 0;
     max-height: 200px;
+    width: 100%;
 
     .validation-message {
       white-space: nowrap;
@@ -205,14 +210,12 @@
   }
 
   .select-kit-filter {
-    display: flex;
     box-sizing: border-box;
     align-items: center;
     justify-content: space-between;
+    width: 100%;
 
-    .filter-input,
-    .filter-input:focus,
-    .filter-input:active {
+    .filter-input {
       background: none;
       margin: 0;
       padding: 0;
@@ -221,7 +224,7 @@
       border: 0;
       border-radius: 0;
       box-shadow: none;
-      width: 100%;
+      width: auto;
     }
 
     &.is-hidden {
@@ -247,4 +250,32 @@
     box-sizing: border-box;
     pointer-events: none;
   }
+
+  .select-kit-errors-collection {
+    background: $danger;
+    padding: 0.25em 1em;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
+
+    .select-kit-error {
+      list-style: none;
+      color: $secondary;
+    }
+  }
+
+  .no-content,
+  .is-loading {
+    display: flex;
+    flex: 1 0 auto;
+    padding: 0.5em;
+    width: 100%;
+    box-sizing: border-box;
+    background: $secondary;
+  }
+
+  .is-loading {
+    align-items: center;
+    justify-content: center;
+  }
 }
diff --git a/app/assets/stylesheets/common/select-kit/single-select.scss b/app/assets/stylesheets/common/select-kit/single-select.scss
new file mode 100644
index 00000000000..4868756a9d5
--- /dev/null
+++ b/app/assets/stylesheets/common/select-kit/single-select.scss
@@ -0,0 +1,11 @@
+.select-kit.single-select {
+  .select-kit-filter {
+    display: flex;
+
+    &.is-expanded {
+      padding: 0.25em 0.5em;
+      border-top: 1px solid $primary-low;
+      border-bottom: 1px solid $primary-low;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/common/select-kit/tag-drop.scss b/app/assets/stylesheets/common/select-kit/tag-drop.scss
index 6fefb1dcd8b..94d46293580 100644
--- a/app/assets/stylesheets/common/select-kit/tag-drop.scss
+++ b/app/assets/stylesheets/common/select-kit/tag-drop.scss
@@ -1,6 +1,8 @@
 .select-kit {
   &.combo-box {
     &.tag-drop {
+      min-width: auto;
+
       .select-kit-row {
         &[data-value="all-tags"],
         &[data-value="no-tags"] {
diff --git a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
index 389e2f394ae..cc948d6ec02 100644
--- a/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
+++ b/app/assets/stylesheets/common/select-kit/toolbar-popup-menu-options.scss
@@ -3,13 +3,17 @@
     &.toolbar-popup-menu-options {
       .select-kit-body {
         box-shadow: none;
-        padding: 10px 10px 5px 10px;
+        padding: 0.5em 0.5em 0.25em 0.5em;
         width: 230px;
       }
 
+      .toolbar-popup-menu-options-heading {
+        width: 100%;
+      }
+
       .select-kit-row {
-        margin-bottom: 5px;
-        padding: 6px 3px;
+        margin-bottom: 0.25em;
+        padding: 0.5em 0.25em;
         background: $primary-low;
         transition: all 0.25s;
 
diff --git a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
index c5403eaff44..42a90c7c6a5 100644
--- a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
+++ b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
@@ -1,5 +1,8 @@
 .topic-footer-mobile-dropdown {
   .select-kit-row {
+    .svg-icon-title {
+      margin-right: 0.5em;
+    }
     &.bookmarked {
       .d-icon {
         color: $tertiary;
diff --git a/app/assets/stylesheets/mobile/select-kit/select-kit.scss b/app/assets/stylesheets/mobile/select-kit/select-kit.scss
new file mode 100644
index 00000000000..aadd43a6c23
--- /dev/null
+++ b/app/assets/stylesheets/mobile/select-kit/select-kit.scss
@@ -0,0 +1,15 @@
+.select-kit {
+  &.is-expanded {
+    z-index: z("dropdown");
+  }
+
+  .select-kit-body {
+    width: 100vw;
+  }
+
+  .select-kit-filter {
+    .filter-input {
+      font-size: 16px;
+    }
+  }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 2f723b30d19..0a1a7264be0 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1604,6 +1604,7 @@ en:
       min_content_not_reached:
         one: "Select at least {{count}} item."
         other: "Select at least {{count}} items."
+      invalid_selection_length: "Selection must be at least {{count}} characters."
 
     date_time_picker:
       from: From
diff --git a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
index aae04847436..d229cb49cb7 100644
--- a/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
+++ b/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs
@@ -41,9 +41,10 @@
 
         {{#unless site.mobileView}}
           {{timezone-input
-            headerIcon="globe"
+            options=(hash icon="globe")
             value=timezone
-            onSelect=(action (mut timezone))}}
+            onChange=(action (mut timezone))
+          }}
         {{/unless}}
       </div>
 
@@ -70,9 +71,10 @@
 
       {{#if site.mobileView}}
         {{timezone-input
-          headerIcon="globe"
           value=timezone
-          onSelect=(action (mut timezone))}}
+          options=(hash icon="globe")
+          onChange=(action (mut timezone))
+        }}
       {{/if}}
     </div>
 
@@ -89,7 +91,7 @@
                 content=recurringOptions
                 class="recurrence-input"
                 value=recurring
-                onSelect=(action (mut recurring))
+                onChange=(action (mut recurring))
                 none="discourse_local_dates.create.form.recurring_none"}}
             </div>
           </div>
@@ -126,7 +128,15 @@
           <label>{{i18n "discourse_local_dates.create.form.timezones_title"}}</label>
           <p>{{i18n "discourse_local_dates.create.form.timezones_description"}}</p>
           <div class="controls">
-            {{multi-select class="timezones-input" allowAny=false maximum=5 content=allTimezones values=timezones}}
+            {{multi-select
+              valueProperty=null
+              nameProperty=null
+              class="timezones-input"
+              allowAny=false
+              maximum=5
+              content=allTimezones
+              value=timezones
+            }}
           </div>
         </div>
       </div>
diff --git a/plugins/poll/assets/javascripts/controllers/poll-ui-builder.js.es6 b/plugins/poll/assets/javascripts/controllers/poll-ui-builder.js.es6
index 2c6e8335d63..48bae0380dc 100644
--- a/plugins/poll/assets/javascripts/controllers/poll-ui-builder.js.es6
+++ b/plugins/poll/assets/javascripts/controllers/poll-ui-builder.js.es6
@@ -1,5 +1,5 @@
 import Controller from "@ember/controller";
-import computed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed, { observes } from "discourse-common/utils/decorators";
 import EmberObject from "@ember/object";
 
 export const BAR_CHART_TYPE = "bar";
@@ -19,12 +19,15 @@ export default Controller.extend({
     { name: PIE_CHART_TYPE.capitalize(), value: PIE_CHART_TYPE }
   ],
 
+  pollType: null,
+  pollResult: null,
+
   init() {
     this._super(...arguments);
     this._setupPoll();
   },
 
-  @computed("regularPollType", "numberPollType", "multiplePollType")
+  @discourseComputed("regularPollType", "numberPollType", "multiplePollType")
   pollTypes(regularPollType, numberPollType, multiplePollType) {
     return [
       {
@@ -42,12 +45,12 @@ export default Controller.extend({
     ];
   },
 
-  @computed("chartType", "pollType", "numberPollType")
+  @discourseComputed("chartType", "pollType", "numberPollType")
   isPie(chartType, pollType, numberPollType) {
     return pollType !== numberPollType && chartType === PIE_CHART_TYPE;
   },
 
-  @computed(
+  @discourseComputed(
     "alwaysPollResult",
     "votePollResult",
     "closedPollResult",
@@ -73,7 +76,7 @@ export default Controller.extend({
         value: closedPollResult
       }
     ];
-    if (this.currentUser.staff) {
+    if (this.get("currentUser.staff")) {
       options.push({
         name: I18n.t("poll.ui_builder.poll_result.staff"),
         value: staffPollResult
@@ -82,34 +85,34 @@ export default Controller.extend({
     return options;
   },
 
-  @computed("site.groups")
+  @discourseComputed("site.groups")
   siteGroups(groups) {
     const values = [{ name: "", value: null }];
     groups.forEach(g => values.push({ name: g.name, value: g.name }));
     return values;
   },
 
-  @computed("pollType", "regularPollType")
+  @discourseComputed("pollType", "regularPollType")
   isRegular(pollType, regularPollType) {
     return pollType === regularPollType;
   },
 
-  @computed("pollType", "pollOptionsCount", "multiplePollType")
+  @discourseComputed("pollType", "pollOptionsCount", "multiplePollType")
   isMultiple(pollType, count, multiplePollType) {
     return pollType === multiplePollType && count > 0;
   },
 
-  @computed("pollType", "numberPollType")
+  @discourseComputed("pollType", "numberPollType")
   isNumber(pollType, numberPollType) {
     return pollType === numberPollType;
   },
 
-  @computed("isRegular")
+  @discourseComputed("isRegular")
   showMinMax(isRegular) {
     return !isRegular;
   },
 
-  @computed("pollOptions")
+  @discourseComputed("pollOptions")
   pollOptionsCount(pollOptions) {
     if (pollOptions.length === 0) return 0;
 
@@ -122,7 +125,7 @@ export default Controller.extend({
     return length;
   },
 
-  @observes("isMultiple", "isNumber", "pollOptionsCount")
+  @observes("pollType", "pollOptionsCount")
   _setPollMax() {
     const isMultiple = this.isMultiple;
     const isNumber = this.isNumber;
@@ -135,7 +138,7 @@ export default Controller.extend({
     }
   },
 
-  @computed("isRegular", "isMultiple", "isNumber", "pollOptionsCount")
+  @discourseComputed("isRegular", "isMultiple", "isNumber", "pollOptionsCount")
   pollMinOptions(isRegular, isMultiple, isNumber, count) {
     if (isRegular) return;
 
@@ -149,7 +152,7 @@ export default Controller.extend({
     }
   },
 
-  @computed(
+  @discourseComputed(
     "isRegular",
     "isMultiple",
     "isNumber",
@@ -175,13 +178,13 @@ export default Controller.extend({
     }
   },
 
-  @computed("isNumber", "pollMax")
+  @discourseComputed("isNumber", "pollMax")
   pollStepOptions(isNumber, pollMax) {
     if (!isNumber) return;
     return this._comboboxOptions(1, (parseInt(pollMax, 10) || 1) + 1);
   },
 
-  @computed(
+  @discourseComputed(
     "isNumber",
     "showMinMax",
     "pollType",
@@ -259,7 +262,7 @@ export default Controller.extend({
     return output;
   },
 
-  @computed(
+  @discourseComputed(
     "pollOptionsCount",
     "isRegular",
     "isMultiple",
@@ -275,7 +278,7 @@ export default Controller.extend({
     );
   },
 
-  @computed("pollMin", "pollMax")
+  @discourseComputed("pollMin", "pollMax")
   minMaxValueValidation(pollMin, pollMax) {
     let options = { ok: true };
 
@@ -289,7 +292,7 @@ export default Controller.extend({
     return EmberObject.create(options);
   },
 
-  @computed("pollStep")
+  @discourseComputed("pollStep")
   minStepValueValidation(pollStep) {
     let options = { ok: true };
 
@@ -303,7 +306,7 @@ export default Controller.extend({
     return EmberObject.create(options);
   },
 
-  @computed("disableInsert")
+  @discourseComputed("disableInsert")
   minNumOfOptionsValidation(disableInsert) {
     let options = { ok: true };
 
@@ -325,7 +328,7 @@ export default Controller.extend({
 
   _setupPoll() {
     this.setProperties({
-      pollType: null,
+      pollType: this.get("pollTypes.firstObject.value"),
       publicPoll: false,
       pollOptions: "",
       pollMin: 1,
diff --git a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs b/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
index 21615b87c85..b4303bbe92f 100644
--- a/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
+++ b/plugins/poll/assets/javascripts/discourse/templates/modal/poll-ui-builder.hbs
@@ -3,34 +3,41 @@
     <div class="options">
       <div class="input-group poll-select">
         <label class="input-group-label">{{i18n 'poll.ui_builder.poll_type.label'}}</label>
-        {{combo-box content=pollTypes
-                    value=pollType
-                    allowInitialValueMutation=true
-                    valueAttribute="value"}}
+        {{combo-box
+          content=pollTypes
+          value=pollType
+          valueProperty="value"
+          class="poll-type"
+          onChange=(action (mut pollType))
+        }}
       </div>
 
       <div class="input-group poll-select">
         <label class="input-group-label">{{i18n 'poll.ui_builder.poll_result.label'}}</label>
-        {{combo-box content=pollResults
-                    value=pollResult
-                    allowInitialValueMutation=true
-                    valueAttribute="value"}}
+        {{combo-box
+          content=pollResults
+          value=pollResult
+          class="poll-result"
+          valueProperty="value"
+        }}
       </div>
 
       <div class="input-group poll-select">
         <label class="input-group-label">{{i18n 'poll.ui_builder.poll_groups.label'}}</label>
         {{combo-box content=siteGroups
                     value=pollGroups
-                    allowInitialValueMutation=true
                     valueAttribute="value"}}
       </div>
 
       {{#unless isNumber}}
         <div class="input-group poll-select">
           <label class="input-group-label">{{i18n 'poll.ui_builder.poll_chart_type.label'}}</label>
-          {{combo-box content=pollChartTypes
-                      value=chartType
-                      valueAttribute="value"}}
+          {{combo-box
+            class="poll-chart-type"
+            content=pollChartTypes
+            value=chartType
+            valueAttribute="value"
+          }}
         </div>
       {{/unless}}
 
@@ -39,7 +46,7 @@
           <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.min'}}</label>
           {{input type='number'
                   value=pollMin
-                  valueAttribute="value"
+                  valueProperty="value"
                   class="poll-options-min"}}
         </div>
         {{input-tip validation=minMaxValueValidation}}
@@ -48,7 +55,7 @@
           <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.max'}}</label>
           {{input type='number'
                   value=pollMax
-                  valueAttribute="value"
+                  valueProperty="value"
                   class="poll-options-max"}}
         </div>
 
@@ -57,7 +64,7 @@
             <label class="input-group-label">{{i18n 'poll.ui_builder.poll_config.step'}}</label>
             {{input type='number'
                     value=pollStep
-                    valueAttribute="value"
+                    valueProperty="value"
                     min="1"
                     class="poll-options-step"}}
           </div>
diff --git a/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6 b/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6
index 074550a2fef..cd73b7c203c 100644
--- a/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6
+++ b/plugins/poll/test/javascripts/acceptance/poll-builder-enabled-test.js.es6
@@ -9,54 +9,48 @@ acceptance("Poll Builder - polls are enabled", {
     poll_enabled: true,
     poll_minimum_trust_level_to_create: 1
   },
-  beforeEach: function() {
+  beforeEach() {
     clearPopupMenuOptionsCallback();
   }
 });
 
-test("regular user - sufficient trust level", assert => {
+test("regular user - sufficient trust level", async assert => {
   updateCurrentUser({ moderator: false, admin: false, trust_level: 1 });
 
-  displayPollBuilderButton();
+  await displayPollBuilderButton();
 
-  andThen(() => {
-    assert.ok(
-      exists(".select-kit-row[title='Build Poll']"),
-      "it shows the builder button"
-    );
-  });
+  assert.ok(
+    exists(".select-kit-row[title='Build Poll']"),
+    "it shows the builder button"
+  );
 });
 
-test("regular user - insufficient trust level", assert => {
+test("regular user - insufficient trust level", async assert => {
   updateCurrentUser({ moderator: false, admin: false, trust_level: 0 });
 
-  displayPollBuilderButton();
+  await displayPollBuilderButton();
 
-  andThen(() => {
-    assert.ok(
-      !exists(".select-kit-row[title='Build Poll']"),
-      "it hides the builder button"
-    );
-  });
+  assert.ok(
+    !exists(".select-kit-row[title='Build Poll']"),
+    "it hides the builder button"
+  );
 });
 
-test("staff - with insufficient trust level", assert => {
+test("staff - with insufficient trust level", async assert => {
   updateCurrentUser({ moderator: true, trust_level: 0 });
 
-  displayPollBuilderButton();
+  await displayPollBuilderButton();
 
-  andThen(() => {
-    assert.ok(
-      exists(".select-kit-row[title='Build Poll']"),
-      "it shows the builder button"
-    );
-  });
+  assert.ok(
+    exists(".select-kit-row[title='Build Poll']"),
+    "it shows the builder button"
+  );
 });
 
 test("poll preview", async assert => {
-  displayPollBuilderButton();
+  await displayPollBuilderButton();
+
   const popupMenu = selectKit(".toolbar-popup-menu-options");
-  await popupMenu.expand();
   await popupMenu.selectRowByValue("showPollBuilder");
 
   await fillIn(".poll-textarea textarea", "First option\nSecond option");
diff --git a/plugins/poll/test/javascripts/controllers/poll-ui-builder-test.js.es6 b/plugins/poll/test/javascripts/controllers/poll-ui-builder-test.js.es6
index 24601d3c0f0..3653717de26 100644
--- a/plugins/poll/test/javascripts/controllers/poll-ui-builder-test.js.es6
+++ b/plugins/poll/test/javascripts/controllers/poll-ui-builder-test.js.es6
@@ -14,59 +14,46 @@ test("isMultiple", function(assert) {
   const controller = this.subject();
 
   controller.setProperties({
-    pollType: controller.get("multiplePollType"),
+    pollType: controller.multiplePollType,
     pollOptionsCount: 1
   });
 
-  assert.equal(controller.get("isMultiple"), true, "it should be true");
+  assert.equal(controller.isMultiple, true, "it should be true");
 
   controller.set("pollOptionsCount", 0);
 
-  assert.equal(controller.get("isMultiple"), false, "it should be false");
+  assert.equal(controller.isMultiple, false, "it should be false");
 
   controller.setProperties({ pollType: "random", pollOptionsCount: 1 });
 
-  assert.equal(controller.get("isMultiple"), false, "it should be false");
+  assert.equal(controller.isMultiple, false, "it should be false");
 });
 
 test("isNumber", function(assert) {
   const controller = this.subject();
   controller.siteSettings = Discourse.SiteSettings;
 
-  controller.set("pollType", "random");
+  controller.set("pollType", controller.regularPollType);
 
-  assert.equal(controller.get("isNumber"), false, "it should be false");
+  assert.equal(controller.isNumber, false, "it should be false");
 
-  controller.set("pollType", controller.get("numberPollType"));
+  controller.set("pollType", controller.numberPollType);
 
-  assert.equal(controller.get("isNumber"), true, "it should be true");
+  assert.equal(controller.isNumber, true, "it should be true");
 });
 
 test("showMinMax", function(assert) {
   const controller = this.subject();
   controller.siteSettings = Discourse.SiteSettings;
 
-  controller.setProperties({
-    isNumber: true,
-    isMultiple: false
-  });
+  controller.set("pollType", controller.numberPollType);
+  assert.equal(controller.showMinMax, true, "it should be true");
 
-  assert.equal(controller.get("showMinMax"), true, "it should be true");
+  controller.set("pollType", controller.multiplePollType);
+  assert.equal(controller.showMinMax, true, "it should be true");
 
-  controller.setProperties({
-    isNumber: false,
-    isMultiple: true
-  });
-
-  assert.equal(controller.get("showMinMax"), true, "it should be true");
-
-  controller.setProperties({
-    isNumber: false,
-    isMultiple: false,
-    isRegular: true
-  });
-
-  assert.equal(controller.get("showMinMax"), false, "it should be false");
+  controller.set("pollType", controller.regularPollType);
+  assert.equal(controller.showMinMax, false, "it should be false");
 });
 
 test("pollOptionsCount", function(assert) {
@@ -75,11 +62,11 @@ test("pollOptionsCount", function(assert) {
 
   controller.set("pollOptions", "1\n2\n");
 
-  assert.equal(controller.get("pollOptionsCount"), 2, "it should equal 2");
+  assert.equal(controller.pollOptionsCount, 2, "it should equal 2");
 
   controller.set("pollOptions", "");
 
-  assert.equal(controller.get("pollOptionsCount"), 0, "it should equal 0");
+  assert.equal(controller.pollOptionsCount, 0, "it should equal 0");
 });
 
 test("pollMinOptions", function(assert) {
@@ -87,12 +74,12 @@ test("pollMinOptions", function(assert) {
   controller.siteSettings = Discourse.SiteSettings;
 
   controller.setProperties({
-    isMultiple: true,
+    pollType: controller.multiplePollType,
     pollOptionsCount: 1
   });
 
   assert.deepEqual(
-    controller.get("pollMinOptions"),
+    controller.pollMinOptions,
     [{ name: 1, value: 1 }],
     "it should return the right options"
   );
@@ -100,7 +87,7 @@ test("pollMinOptions", function(assert) {
   controller.set("pollOptionsCount", 2);
 
   assert.deepEqual(
-    controller.get("pollMinOptions"),
+    controller.pollMinOptions,
     [
       { name: 1, value: 1 },
       { name: 2, value: 2 }
@@ -108,11 +95,11 @@ test("pollMinOptions", function(assert) {
     "it should return the right options"
   );
 
-  controller.set("isNumber", true);
+  controller.set("pollType", controller.numberPollType);
   controller.siteSettings.poll_maximum_options = 2;
 
   assert.deepEqual(
-    controller.get("pollMinOptions"),
+    controller.pollMinOptions,
     [
       { name: 1, value: 1 },
       { name: 2, value: 2 }
@@ -126,13 +113,13 @@ test("pollMaxOptions", function(assert) {
   controller.siteSettings = Discourse.SiteSettings;
 
   controller.setProperties({
-    isMultiple: true,
+    pollType: controller.multiplePollType,
     pollOptionsCount: 1,
     pollMin: 1
   });
 
   assert.deepEqual(
-    controller.get("pollMaxOptions"),
+    controller.pollMaxOptions,
     [],
     "it should return the right options"
   );
@@ -140,21 +127,20 @@ test("pollMaxOptions", function(assert) {
   controller.set("pollOptionsCount", 2);
 
   assert.deepEqual(
-    controller.get("pollMaxOptions"),
+    controller.pollMaxOptions,
     [{ name: 2, value: 2 }],
     "it should return the right options"
   );
 
   controller.siteSettings.poll_maximum_options = 3;
   controller.setProperties({
-    isMultiple: false,
-    isNumber: true,
+    pollType: controller.get("numberPollType"),
     pollStep: 2,
     pollMin: 1
   });
 
   assert.deepEqual(
-    controller.get("pollMaxOptions"),
+    controller.pollMaxOptions,
     [
       { name: 2, value: 2 },
       { name: 3, value: 3 },
@@ -171,18 +157,12 @@ test("pollStepOptions", function(assert) {
   controller.siteSettings = Discourse.SiteSettings;
   controller.siteSettings.poll_maximum_options = 3;
 
-  controller.set("isNumber", false);
+  assert.equal(controller.pollStepOptions, null, "is should return null");
 
-  assert.equal(
-    controller.get("pollStepOptions"),
-    null,
-    "is should return null"
-  );
-
-  controller.setProperties({ isNumber: true });
+  controller.set("pollType", controller.numberPollType);
 
   assert.deepEqual(
-    controller.get("pollStepOptions"),
+    controller.pollStepOptions,
     [
       { name: 1, value: 1 },
       { name: 2, value: 2 },
@@ -196,25 +176,29 @@ test("disableInsert", function(assert) {
   const controller = this.subject();
   controller.siteSettings = Discourse.SiteSettings;
 
-  controller.setProperties({ isRegular: true });
+  assert.equal(controller.disableInsert, true, "it should be true");
 
-  assert.equal(controller.get("disableInsert"), true, "it should be true");
+  controller.set("pollOptionsCount", 2);
 
-  controller.setProperties({ isRegular: true, pollOptionsCount: 2 });
+  assert.equal(controller.disableInsert, false, "it should be false");
 
-  assert.equal(controller.get("disableInsert"), false, "it should be false");
+  controller.set("pollType", controller.numberPollType);
 
-  controller.setProperties({ isNumber: true });
+  assert.equal(controller.disableInsert, false, "it should be false");
 
-  assert.equal(controller.get("disableInsert"), false, "it should be false");
+  controller.setProperties({
+    pollType: controller.regularPollType,
+    pollOptionsCount: 3
+  });
 
-  controller.setProperties({ isNumber: false, pollOptionsCount: 3 });
+  assert.equal(controller.disableInsert, false, "it should be false");
 
-  assert.equal(controller.get("disableInsert"), false, "it should be false");
+  controller.setProperties({
+    pollType: controller.regularPollType,
+    pollOptionsCount: 1
+  });
 
-  controller.setProperties({ isNumber: false, pollOptionsCount: 1 });
-
-  assert.equal(controller.get("disableInsert"), true, "it should be true");
+  assert.equal(controller.disableInsert, true, "it should be true");
 });
 
 test("number pollOutput", function(assert) {
@@ -223,13 +207,12 @@ test("number pollOutput", function(assert) {
   controller.siteSettings.poll_maximum_options = 20;
 
   controller.setProperties({
-    isNumber: true,
-    pollType: controller.get("numberPollType"),
+    pollType: controller.numberPollType,
     pollMin: 1
   });
 
   assert.equal(
-    controller.get("pollOutput"),
+    controller.pollOutput,
     "[poll type=number min=1 max=20 step=1]\n[/poll]\n",
     "it should return the right output"
   );
@@ -237,7 +220,7 @@ test("number pollOutput", function(assert) {
   controller.set("pollStep", 2);
 
   assert.equal(
-    controller.get("pollOutput"),
+    controller.pollOutput,
     "[poll type=number min=1 max=20 step=2]\n[/poll]\n",
     "it should return the right output"
   );
@@ -245,7 +228,7 @@ test("number pollOutput", function(assert) {
   controller.set("publicPoll", true);
 
   assert.equal(
-    controller.get("pollOutput"),
+    controller.pollOutput,
     "[poll type=number min=1 max=20 step=2 public=true]\n[/poll]\n",
     "it should return the right output"
   );
@@ -253,7 +236,7 @@ test("number pollOutput", function(assert) {
   controller.set("pollStep", 0);
 
   assert.equal(
-    controller.get("pollOutput"),
+    controller.pollOutput,
     "[poll type=number min=1 max=20 step=1 public=true]\n[/poll]\n",
     "it should return the right output"
   );
@@ -267,11 +250,11 @@ test("regular pollOutput", function(assert) {
   controller.set("pollOptions", "1\n2");
   controller.setProperties({
     pollOptions: "1\n2",
-    pollType: controller.get("regularPollType")
+    pollType: controller.regularPollType
   });
 
   assert.equal(
-    controller.get("pollOutput"),
+    controller.pollOutput,
     "[poll type=regular chartType=bar]\n* 1\n* 2\n[/poll]\n",
     "it should return the right output"
   );
@@ -279,7 +262,7 @@ test("regular pollOutput", function(assert) {
   controller.set("publicPoll", "true");
 
   assert.equal(
-    controller.get("pollOutput"),
+    controller.pollOutput,
     "[poll type=regular public=true chartType=bar]\n* 1\n* 2\n[/poll]\n",
     "it should return the right output"
   );
@@ -300,13 +283,13 @@ test("multiple pollOutput", function(assert) {
 
   controller.setProperties({
     isMultiple: true,
-    pollType: controller.get("multiplePollType"),
+    pollType: controller.multiplePollType,
     pollMin: 1,
     pollOptions: "\n\n1\n\n2"
   });
 
   assert.equal(
-    controller.get("pollOutput"),
+    controller.pollOutput,
     "[poll type=multiple min=1 max=2 chartType=bar]\n* 1\n* 2\n[/poll]\n",
     "it should return the right output"
   );
@@ -314,7 +297,7 @@ test("multiple pollOutput", function(assert) {
   controller.set("publicPoll", "true");
 
   assert.equal(
-    controller.get("pollOutput"),
+    controller.pollOutput,
     "[poll type=multiple min=1 max=2 public=true chartType=bar]\n* 1\n* 2\n[/poll]\n",
     "it should return the right output"
   );
@@ -325,8 +308,7 @@ test("staff_only option is not present for non-staff", function(assert) {
   controller.currentUser = { staff: false };
 
   assert.ok(
-    controller.pollResults.filter(result => result.value === "staff_only")
-      .length === 0,
+    controller.pollResults.filterBy("value", "staff_only").length === 0,
     "staff_only is not present"
   );
 });
@@ -336,8 +318,7 @@ test("staff_only option is present for staff", function(assert) {
   controller.currentUser = { staff: true };
 
   assert.ok(
-    controller.pollResults.filter(result => result.value === "staff_only")
-      .length === 1,
+    controller.pollResults.filterBy("value", "staff_only").length === 1,
     "staff_only is present"
   );
 });
diff --git a/plugins/poll/test/javascripts/helpers/display-poll-builder-button.js.es6 b/plugins/poll/test/javascripts/helpers/display-poll-builder-button.js.es6
index 313f5b6a801..5288ed9b95d 100644
--- a/plugins/poll/test/javascripts/helpers/display-poll-builder-button.js.es6
+++ b/plugins/poll/test/javascripts/helpers/display-poll-builder-button.js.es6
@@ -1,8 +1,8 @@
 import selectKit from "helpers/select-kit-helper";
 
-export function displayPollBuilderButton() {
-  visit("/");
-  click("#create-topic");
-  click(".d-editor-button-bar .options");
-  selectKit(".toolbar-popup-menu-options").expand();
+export async function displayPollBuilderButton() {
+  await visit("/");
+  await click("#create-topic");
+  await click(".d-editor-button-bar .options");
+  await selectKit(".toolbar-popup-menu-options").expand();
 }
diff --git a/test/javascripts/acceptance/admin-user-index-test.js.es6 b/test/javascripts/acceptance/admin-user-index-test.js.es6
index 36e773f0a30..6322a0da558 100644
--- a/test/javascripts/acceptance/admin-user-index-test.js.es6
+++ b/test/javascripts/acceptance/admin-user-index-test.js.es6
@@ -1,3 +1,4 @@
+import selectKit from "helpers/select-kit-helper";
 import { acceptance } from "helpers/qunit-helpers";
 
 acceptance("Admin - User Index", {
@@ -84,15 +85,10 @@ QUnit.test("will clear unsaved groups when switching user", async assert => {
     "the name should be correct"
   );
 
-  await fillIn(".admin-group-selector .filter-input", "Macdonald");
-  await click(".admin-group-selector .filter-input");
-  await keyEvent(".admin-group-selector .filter-input", "keydown", 13);
-
-  assert.equal(
-    find('.admin-group-selector span[title="Macdonald"]').length,
-    1,
-    "group should be set"
-  );
+  const groupSelector = selectKit(".admin-group-selector");
+  await groupSelector.expand();
+  await groupSelector.selectRowByValue(42);
+  assert.equal(groupSelector.header().value(), 42, "group should be set");
 
   await visit("/admin/users/1/eviltrout");
 
diff --git a/test/javascripts/acceptance/composer-test.js.es6 b/test/javascripts/acceptance/composer-test.js.es6
index 0a5d4d8baec..42291d9fcd0 100644
--- a/test/javascripts/acceptance/composer-test.js.es6
+++ b/test/javascripts/acceptance/composer-test.js.es6
@@ -447,6 +447,8 @@ QUnit.test("Composer can toggle whispers", async assert => {
 
   await click(".toggle-fullscreen");
 
+  await menu.expand();
+
   assert.ok(
     menu.rowByValue("toggleWhisper").exists(),
     "whisper toggling is still present when going fullscreen"
@@ -638,7 +640,6 @@ QUnit.test("Checks for existing draft", async assert => {
 
 QUnit.test("Can switch states without abandon popup", async assert => {
   try {
-    const composerActions = selectKit(".composer-actions");
     toggleCheckDraftPopup(true);
 
     await visit("/t/internationalization-localization/280");
@@ -659,8 +660,9 @@ QUnit.test("Can switch states without abandon popup", async assert => {
 
     await click("article#post_3 button.reply");
 
+    const composerActions = selectKit(".composer-actions");
     await composerActions.expand();
-    await composerActions.selectRowByValue("reply_to_topic");
+    await composerActions.selectRowByValue("reply_as_private_message");
 
     assert.equal(
       find(".modal-body").text(),
@@ -668,9 +670,10 @@ QUnit.test("Can switch states without abandon popup", async assert => {
       "abandon popup shouldn't come"
     );
 
-    assert.equal(
-      find(".d-editor-input").val(),
-      longText,
+    assert.ok(
+      find(".d-editor-input")
+        .val()
+        .includes(longText),
       "entered text should still be there"
     );
 
diff --git a/test/javascripts/acceptance/composer-uncategorized-test.js.es6 b/test/javascripts/acceptance/composer-uncategorized-test.js.es6
index c048509139d..7ca84df311b 100644
--- a/test/javascripts/acceptance/composer-uncategorized-test.js.es6
+++ b/test/javascripts/acceptance/composer-uncategorized-test.js.es6
@@ -48,7 +48,7 @@ QUnit.test("Disable body until category is selected", async assert => {
 
   await fillIn(".d-editor-input", "Now I can type stuff");
   await categoryChooser.expand();
-  await categoryChooser.selectRowByValue("__none__");
+  await categoryChooser.selectRowByIndex(0);
 
   assert.ok(
     find(".d-editor-textarea-wrapper.disabled").length === 0,
diff --git a/test/javascripts/acceptance/group-test.js.es6 b/test/javascripts/acceptance/group-test.js.es6
index 676f3754df2..af5bc39935e 100644
--- a/test/javascripts/acceptance/group-test.js.es6
+++ b/test/javascripts/acceptance/group-test.js.es6
@@ -51,29 +51,22 @@ QUnit.test("Anonymous Viewing Group", async assert => {
   );
   assert.ok(count(".user-stream-item") > 0, "it lists stream items");
 
-  await selectKit(".group-dropdown").expand();
+  const groupDropdown = selectKit(".group-dropdown");
+  await groupDropdown.expand();
+
+  assert.equal(groupDropdown.rowByIndex(1).name(), "discourse");
 
   assert.equal(
-    find(".select-kit-row")
-      .text()
-      .trim(),
-    "discourse",
-    "it displays the right row"
-  );
-
-  assert.equal(
-    find(".group-dropdown-filter")
-      .text()
-      .trim(),
-    I18n.t("groups.index.all").toLowerCase(),
-    "it displays the right header"
+    groupDropdown.rowByIndex(0).name(),
+    I18n.t("groups.index.all").toLowerCase()
   );
 
   Discourse.SiteSettings.enable_group_directory = false;
 
   await visit("/g");
   await visit("/g/discourse");
-  await selectKit(".group-dropdown").expand();
+
+  await groupDropdown.expand();
 
   assert.equal(
     find(".group-dropdown-filter").length,
diff --git a/test/javascripts/acceptance/review-test.js.es6 b/test/javascripts/acceptance/review-test.js.es6
index e4b45f43b69..51857efccfa 100644
--- a/test/javascripts/acceptance/review-test.js.es6
+++ b/test/javascripts/acceptance/review-test.js.es6
@@ -39,8 +39,11 @@ QUnit.test("Settings", async assert => {
 
   assert.ok(find(".reviewable-score-type").length, "has a list of bonuses");
 
-  await fillIn(".reviewable-score-type:eq(0) .field input ", "0.5");
+  const field = selectKit(".reviewable-score-type:eq(0) .field .combo-box");
+  await field.expand();
+  await field.selectRowByValue("5");
   await click(".save-settings");
+
   assert.ok(find(".reviewable-settings .saved").length, "it saved");
 });
 
@@ -124,7 +127,7 @@ QUnit.test("Editing a reviewable", async assert => {
   let tags = selectKit(`${topic} .payload-tags .mini-tag-chooser`);
   await tags.expand();
   await tags.fillInFilter("monkey");
-  await tags.keyboard("enter");
+  await tags.selectRowByValue("monkey");
 
   await fillIn(".editable-field.payload-raw textarea", "new raw contents");
   await click(`${topic} .reviewable-action.save-edit`);
diff --git a/test/javascripts/acceptance/search-full-test.js.es6 b/test/javascripts/acceptance/search-full-test.js.es6
index d2ec23231c5..c9185341b33 100644
--- a/test/javascripts/acceptance/search-full-test.js.es6
+++ b/test/javascripts/acceptance/search-full-test.js.es6
@@ -322,8 +322,9 @@ QUnit.test("update in filter through advanced search ui", async assert => {
   await inSelector.expand();
   await inSelector.selectRowByValue("bookmarks");
 
-  assert.ok(
-    inSelector.rowByName("I bookmarked").exists(),
+  assert.equal(
+    inSelector.header().label(),
+    "I bookmarked",
     'has "I bookmarked" populated'
   );
   assert.equal(
@@ -344,8 +345,9 @@ QUnit.test("update status through advanced search ui", async assert => {
   await statusSelector.expand();
   await statusSelector.selectRowByValue("closed");
 
-  assert.ok(
-    statusSelector.rowByName("are closed").exists(),
+  assert.equal(
+    statusSelector.header().label(),
+    "are closed",
     'has "are closed" populated'
   );
   assert.equal(
@@ -375,8 +377,9 @@ QUnit.test("update post time through advanced search ui", async assert => {
   await postTimeSelector.expand();
   await postTimeSelector.selectRowByValue("after");
 
-  assert.ok(
-    postTimeSelector.rowByName("after").exists(),
+  assert.equal(
+    postTimeSelector.header().label(),
+    "after",
     'has "after" populated'
   );
 
@@ -409,7 +412,7 @@ QUnit.test("validate advanced search when initially empty", async assert => {
   await click(".search-advanced-options .in-likes");
 
   assert.ok(
-    exists(".search-advanced-options .in-likes:checked"),
+    selectKit(".search-advanced-options .in-likes:checked"),
     'has "I liked" populated'
   );
   assert.equal(
diff --git a/test/javascripts/acceptance/topic-edit-timer-test.js.es6 b/test/javascripts/acceptance/topic-edit-timer-test.js.es6
index 005e2615094..39d99e75983 100644
--- a/test/javascripts/acceptance/topic-edit-timer-test.js.es6
+++ b/test/javascripts/acceptance/topic-edit-timer-test.js.es6
@@ -28,15 +28,15 @@ QUnit.test("default", async assert => {
   await click(".toggle-admin-menu");
   await click(".topic-admin-status-update button");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await click("#private-topic-timer");
 
-  assert.equal(timerType.header().title(), "Remind Me");
+  assert.equal(timerType.header().label(), "Remind Me");
   assert.equal(timerType.header().value(), "reminder");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 });
 
@@ -51,7 +51,12 @@ QUnit.test("autoclose - specific time", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex = /will automatically close in/g;
@@ -72,7 +77,12 @@ QUnit.test("autoclose", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex1 = /will automatically close in/g;
@@ -86,7 +96,12 @@ QUnit.test("autoclose", async assert => {
 
   await fillIn(".future-date-input .date-picker", "2099-11-24");
 
-  assert.equal(futureDateInputSelector.header().title(), "Pick date and time");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Pick date and time")
+  );
   assert.equal(futureDateInputSelector.header().value(), "pick_date_and_time");
 
   const regex2 = /will automatically close in/g;
@@ -100,9 +115,11 @@ QUnit.test("autoclose", async assert => {
 
   await fillIn(".future-date-input input[type=number]", "2");
 
-  assert.equal(
-    futureDateInputSelector.header().title(),
-    "Close based on last post"
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Close based on last post")
   );
   assert.equal(
     futureDateInputSelector.header().value(),
@@ -128,13 +145,18 @@ QUnit.test("close temporarily", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("open");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex1 = /will automatically open in/g;
@@ -148,7 +170,7 @@ QUnit.test("close temporarily", async assert => {
 
   await fillIn(".future-date-input .date-picker", "2099-11-24");
 
-  assert.equal(futureDateInputSelector.header().title(), "Pick date and time");
+  assert.equal(futureDateInputSelector.header().label(), "Pick date and time");
   assert.equal(futureDateInputSelector.header().value(), "pick_date_and_time");
 
   const regex2 = /will automatically open in/g;
@@ -171,10 +193,10 @@ QUnit.test("schedule", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("publish_to_category");
 
-  assert.equal(categoryChooser.header().title(), "uncategorized");
+  assert.equal(categoryChooser.header().label(), "uncategorized");
   assert.equal(categoryChooser.header().value(), null);
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await categoryChooser.expand();
@@ -183,7 +205,12 @@ QUnit.test("schedule", async assert => {
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("next_week");
 
-  assert.equal(futureDateInputSelector.header().title(), "Next week");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Next week")
+  );
   assert.equal(futureDateInputSelector.header().value(), "next_week");
 
   const regex = /will be published to #dev/g;
@@ -219,13 +246,18 @@ QUnit.test("auto delete", async assert => {
   await timerType.expand();
   await timerType.selectRowByValue("delete");
 
-  assert.equal(futureDateInputSelector.header().title(), "Select a timeframe");
+  assert.equal(futureDateInputSelector.header().label(), "Select a timeframe");
   assert.equal(futureDateInputSelector.header().value(), null);
 
   await futureDateInputSelector.expand();
   await futureDateInputSelector.selectRowByValue("two_weeks");
 
-  assert.equal(futureDateInputSelector.header().title(), "Two Weeks");
+  assert.ok(
+    futureDateInputSelector
+      .header()
+      .label()
+      .includes("Two Weeks")
+  );
   assert.equal(futureDateInputSelector.header().value(), "two_weeks");
 
   const regex = /will be automatically deleted/g;
diff --git a/test/javascripts/acceptance/topic-notifications-button-test.js.es6 b/test/javascripts/acceptance/topic-notifications-button-test.js.es6
index 3f6e028b0ed..ad2b5e26122 100644
--- a/test/javascripts/acceptance/topic-notifications-button-test.js.es6
+++ b/test/javascripts/acceptance/topic-notifications-button-test.js.es6
@@ -26,7 +26,7 @@ QUnit.test("Updating topic notification level", async assert => {
   await notificationOptions.selectRowByValue("3");
 
   assert.equal(
-    notificationOptions.selectedRow().name(),
+    notificationOptions.header().label(),
     "Watching",
     "it should display the right notification level"
   );
diff --git a/test/javascripts/components/categories-admin-dropdown-test.js.es6 b/test/javascripts/components/categories-admin-dropdown-test.js.es6
deleted file mode 100644
index 198aa5dde51..00000000000
--- a/test/javascripts/components/categories-admin-dropdown-test.js.es6
+++ /dev/null
@@ -1,17 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-moduleForComponent("categories-admin-dropdown", { integration: true });
-
-componentTest("default", {
-  template: "{{categories-admin-dropdown}}",
-
-  async test(assert) {
-    const subject = selectKit();
-
-    assert.equal(subject.el().find(".d-icon-bars").length, 1);
-
-    await subject.expand();
-
-    assert.equal(subject.rowByValue("create").name(), "New Category");
-  }
-});
diff --git a/test/javascripts/components/category-drop-test.js.es6 b/test/javascripts/components/category-drop-test.js.es6
deleted file mode 100644
index 895a176cf54..00000000000
--- a/test/javascripts/components/category-drop-test.js.es6
+++ /dev/null
@@ -1,81 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-import Category from "discourse/models/category";
-
-moduleForComponent("category-drop", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
-
-componentTest("subcatgories - no selection", {
-  template:
-    "{{category-drop onSelect=onSelect category=category parentCategory=parentCategory categories=childCategories subCategory=true noSubcategories=false}}",
-
-  beforeEach() {
-    const parentCategory = Category.findById(2);
-
-    const childCategories = this.site.get("categoriesList").filter(c => {
-      return c.get("parentCategory") === parentCategory;
-    });
-
-    this.set("childCategories", childCategories);
-    this.set("parentCategory", parentCategory);
-  },
-
-  async test(assert) {
-    assert.equal(
-      this.subject.header().title(),
-      I18n.t("categories.all_subcategories")
-    );
-
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.rowByIndex(0).name(),
-      I18n.t("categories.no_subcategory")
-    );
-
-    assert.equal(
-      this.subject.rowByIndex(1).name(),
-      this.get("childCategories.firstObject.name")
-    );
-  }
-});
-
-componentTest("subcatgories - selection", {
-  template:
-    "{{category-drop onSelect=onSelect category=category parentCategory=parentCategory categories=childCategories subCategory=true noSubcategories=false}}",
-
-  beforeEach() {
-    const parentCategory = Category.findById(2);
-
-    const childCategories = this.site.get("categoriesList").filter(c => {
-      return c.get("parentCategory") === parentCategory;
-    });
-
-    this.set("childCategories", childCategories);
-    this.set("category", childCategories.get("firstObject"));
-    this.set("parentCategory", parentCategory);
-  },
-
-  async test(assert) {
-    assert.equal(
-      this.subject.header().title(),
-      this.get("childCategories.firstObject.name")
-    );
-
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.rowByIndex(0).name(),
-      I18n.t("categories.all_subcategories")
-    );
-
-    assert.equal(
-      this.subject.rowByIndex(1).name(),
-      I18n.t("categories.no_subcategory")
-    );
-  }
-});
diff --git a/test/javascripts/components/category-selector-test.js.es6 b/test/javascripts/components/category-selector-test.js.es6
deleted file mode 100644
index 9376b692a33..00000000000
--- a/test/javascripts/components/category-selector-test.js.es6
+++ /dev/null
@@ -1,81 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-import Category from "discourse/models/category";
-
-moduleForComponent("category-selector", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
-
-componentTest("default", {
-  template: "{{category-selector categories=categories}}",
-
-  beforeEach() {
-    this.set("categories", [Category.findById(2)]);
-  },
-
-  test(assert) {
-    assert.equal(this.subject.header().value(), 2);
-    assert.notOk(
-      this.subject.rowByValue(2).exists(),
-      "selected categories are not in the list"
-    );
-  }
-});
-
-componentTest("with blacklist", {
-  template: "{{category-selector categories=categories blacklist=blacklist}}",
-
-  beforeEach() {
-    this.set("categories", [Category.findById(2)]);
-    this.set("blacklist", [Category.findById(8)]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.ok(
-      this.subject.rowByValue(6).exists(),
-      "not blacklisted categories are in the list"
-    );
-    assert.notOk(
-      this.subject.rowByValue(8).exists(),
-      "blacklisted categories are not in the list"
-    );
-  }
-});
-
-componentTest("interactions", {
-  template: "{{category-selector categories=categories}}",
-
-  beforeEach() {
-    this.set("categories", [Category.findById(2), Category.findById(6)]);
-  },
-
-  skip: true,
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.selectRowByValue(8);
-
-    assert.equal(
-      this.subject.header().value(),
-      "2,6,8",
-      "it adds the selected category"
-    );
-    assert.equal(this.categories.length, 3);
-
-    await this.subject.expand();
-
-    await this.subject.keyboard("backspace");
-    await this.subject.keyboard("backspace");
-
-    assert.equal(
-      this.subject.header().value(),
-      "2,6",
-      "it removes the last selected category"
-    );
-    assert.equal(this.categories.length, 2);
-  }
-});
diff --git a/test/javascripts/components/combo-box-test.js.es6 b/test/javascripts/components/combo-box-test.js.es6
deleted file mode 100644
index f943e2b05db..00000000000
--- a/test/javascripts/components/combo-box-test.js.es6
+++ /dev/null
@@ -1,209 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-
-moduleForComponent("combo-box", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
-
-componentTest("default", {
-  template: "{{combo-box content=items}}",
-  beforeEach() {
-    this.set("items", [
-      { id: 1, name: "hello" },
-      { id: 2, name: "world" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.header().name(), "hello");
-    assert.equal(this.subject.rowByValue(1).name(), "hello");
-    assert.equal(this.subject.rowByValue(2).name(), "world");
-  }
-});
-
-componentTest("with valueAttribute", {
-  template: '{{combo-box content=items valueAttribute="value"}}',
-  beforeEach() {
-    this.set("items", [
-      { value: 0, name: "hello" },
-      { value: 1, name: "world" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.rowByValue(0).name(), "hello");
-    assert.equal(this.subject.rowByValue(1).name(), "world");
-  }
-});
-
-componentTest("with nameProperty", {
-  template: '{{combo-box content=items nameProperty="text"}}',
-  beforeEach() {
-    this.set("items", [
-      { id: 0, text: "hello" },
-      { id: 1, text: "world" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.rowByValue(0).name(), "hello");
-    assert.equal(this.subject.rowByValue(1).name(), "world");
-  }
-});
-
-componentTest("with an array as content", {
-  template: "{{combo-box content=items value=value}}",
-  beforeEach() {
-    this.set("items", ["evil", "trout", "hat"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.rowByValue("evil").name(), "evil");
-    assert.equal(this.subject.rowByValue("trout").name(), "trout");
-  }
-});
-
-componentTest("with value and none as a string", {
-  template: '{{combo-box content=items none="test.none" value=value}}',
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { none: "none" };
-    this.set("items", ["evil", "trout", "hat"]);
-    this.set("value", "trout");
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.noneRow().name(), "none");
-    assert.equal(this.subject.rowByValue("evil").name(), "evil");
-    assert.equal(this.subject.rowByValue("trout").name(), "trout");
-    assert.equal(this.subject.header().name(), "trout");
-    assert.equal(this.value, "trout");
-
-    await this.subject.selectNoneRow();
-
-    assert.equal(this.value, null);
-  }
-});
-
-componentTest("with value and none as an object", {
-  template: "{{combo-box content=items none=none value=value}}",
-  beforeEach() {
-    this.set("none", { id: "something", name: "none" });
-    this.set("items", ["evil", "trout", "hat"]);
-    this.set("value", "evil");
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.noneRow().name(), "none");
-    assert.equal(this.subject.rowByValue("evil").name(), "evil");
-    assert.equal(this.subject.rowByValue("trout").name(), "trout");
-    assert.equal(this.subject.header().name(), "evil");
-    assert.equal(this.value, "evil");
-
-    await this.subject.selectNoneRow();
-
-    assert.equal(this.value, null);
-  }
-});
-
-componentTest("with no value and none as an object", {
-  template: "{{combo-box content=items none=none value=value}}",
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { none: "none" };
-    this.set("none", { id: "something", name: "none" });
-    this.set("items", ["evil", "trout", "hat"]);
-    this.set("value", null);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.header().name(), "none");
-  }
-});
-
-componentTest("with no value and none string", {
-  template: "{{combo-box content=items none=none value=value}}",
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { none: "none" };
-    this.set("none", "test.none");
-    this.set("items", ["evil", "trout", "hat"]);
-    this.set("value", null);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.header().name(), "none");
-  }
-});
-
-componentTest("with no value and no none", {
-  template: "{{combo-box content=items value=value}}",
-  beforeEach() {
-    this.set("items", ["evil", "trout", "hat"]);
-    this.set("value", null);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.header().name(),
-      "evil",
-      "it sets the first row as value"
-    );
-  }
-});
-
-componentTest("with empty string as value", {
-  template: "{{combo-box content=items value=value}}",
-  beforeEach() {
-    this.set("items", ["evil", "trout", "hat"]);
-    this.set("value", "");
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.header().name(),
-      "evil",
-      "it sets the first row as value"
-    );
-  }
-});
-
-componentTest("with noneLabel", {
-  template:
-    "{{combo-box content=items allowAutoSelectFirst=false noneLabel=noneLabel}}",
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { none: "none" };
-    this.set("items", ["evil", "trout", "hat"]);
-    this.set("noneLabel", "test.none");
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.header().name(),
-      "none",
-      "it displays noneLabel as the header name"
-    );
-  }
-});
diff --git a/test/javascripts/components/list-setting-test.js.es6 b/test/javascripts/components/list-setting-test.js.es6
deleted file mode 100644
index 2242e8459b5..00000000000
--- a/test/javascripts/components/list-setting-test.js.es6
+++ /dev/null
@@ -1,94 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-
-moduleForComponent("list-setting", { integration: true });
-
-componentTest("default", {
-  template: "{{list-setting settingValue=settingValue choices=choices}}",
-
-  beforeEach() {
-    this.set("settingValue", "bold|italic");
-    this.set("choices", ["bold", "italic", "underline"]);
-  },
-
-  test(assert) {
-    assert.equal(
-      selectKit()
-        .header()
-        .title(),
-      "bold,italic"
-    );
-    assert.equal(
-      selectKit()
-        .header()
-        .value(),
-      "bold,italic"
-    );
-  }
-});
-
-componentTest("with empty string as value", {
-  template: "{{list-setting settingValue=settingValue}}",
-
-  beforeEach() {
-    this.set("settingValue", "");
-  },
-
-  test(assert) {
-    assert.equal(
-      selectKit()
-        .header()
-        .value(),
-      ""
-    );
-  }
-});
-
-componentTest("with only setting value", {
-  template: "{{list-setting settingValue=settingValue}}",
-
-  beforeEach() {
-    this.set("settingValue", "bold|italic");
-  },
-
-  test(assert) {
-    assert.equal(
-      selectKit()
-        .header()
-        .value(),
-      "bold,italic"
-    );
-  }
-});
-
-componentTest("interactions", {
-  template: "{{list-setting settingValue=settingValue choices=choices}}",
-
-  beforeEach() {
-    this.set("settingValue", "bold|italic");
-    this.set("choices", ["bold", "italic", "underline"]);
-  },
-
-  async test(assert) {
-    const listSetting = selectKit();
-
-    await listSetting.expand();
-    await listSetting.selectRowByValue("underline");
-
-    assert.equal(listSetting.header().value(), "bold,italic,underline");
-
-    await listSetting.expand();
-    await listSetting.fillInFilter("strike");
-
-    assert.equal(listSetting.highlightedRow().value(), "strike");
-
-    await listSetting.keyboard("enter");
-
-    assert.equal(listSetting.header().value(), "bold,italic,underline,strike");
-
-    await listSetting.keyboard("backspace");
-    await listSetting.keyboard("backspace");
-
-    assert.equal(listSetting.header().value(), "bold,italic,underline");
-  }
-});
diff --git a/test/javascripts/components/mini-tag-chooser-test.js.es6 b/test/javascripts/components/mini-tag-chooser-test.js.es6
deleted file mode 100644
index 27918e20b26..00000000000
--- a/test/javascripts/components/mini-tag-chooser-test.js.es6
+++ /dev/null
@@ -1,121 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-
-moduleForComponent("mini-tag-chooser", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
-
-componentTest("default", {
-  template: "{{mini-tag-chooser allowAny=true filterable=true tags=tags}}",
-
-  beforeEach() {
-    this.siteSettings.max_tag_length = 24;
-    this.siteSettings.force_lowercase_tags = true;
-    this.siteSettings.tags_sort_alphabetically = true;
-
-    this.site.set("can_create_tag", true);
-    this.set("tags", ["jeff", "neil", "arpit"]);
-
-    const response = object => {
-      return [200, { "Content-Type": "application/json" }, object];
-    };
-
-    // prettier-ignore
-    server.get("/tags/filter/search", (params) => { //eslint-disable-line
-      if (params.queryParams.q === "régis") {
-        return response({
-          results: [{ text: "régis", count: 5 }]
-        });
-      }
-
-      if (params.queryParams.q.toLowerCase() === "joffrey" || params.queryParams.q === "invalid'tag" || params.queryParams.q === "01234567890123456789012345") {
-        return response({results: []});
-      }
-
-      return response({
-        results: [{ text: "penar", count: 3 }, { text: "bianca", count: 3 }, { text: "régis", count: 5 }]
-      });
-    });
-  },
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.rowByIndex(0).name(),
-      "bianca",
-      "it has the correct tag"
-    );
-
-    assert.equal(
-      this.subject.rowByIndex(1).name(),
-      "penar",
-      "it has the correct tag at the correct position after alphabetical sorting"
-    );
-
-    assert.equal(
-      this.subject.rowByIndex(2).name(),
-      "régis",
-      "it has the correct tag"
-    );
-
-    await this.subject.fillInFilter("régis");
-    await this.subject.keyboard("enter");
-    assert.deepEqual(
-      this.tags,
-      ["jeff", "neil", "arpit", "régis"],
-      "it selects the tag"
-    );
-
-    await this.subject.expand();
-    await this.subject.fillInFilter("joffrey");
-    await this.subject.keyboard("enter");
-    assert.deepEqual(
-      this.tags,
-      ["jeff", "neil", "arpit", "régis", "joffrey"],
-      "it creates the tag"
-    );
-
-    await this.subject.expand();
-    await this.subject.fillInFilter("Joffrey");
-    await this.subject.keyboard("enter");
-    await this.subject.collapse();
-    assert.deepEqual(
-      this.tags,
-      ["jeff", "neil", "arpit", "régis", "joffrey"],
-      "it does not allow case insensitive duplicate tags"
-    );
-
-    await this.subject.expand();
-    await this.subject.fillInFilter("invalid' Tag");
-    await this.subject.keyboard("enter");
-    assert.deepEqual(
-      this.tags,
-      ["jeff", "neil", "arpit", "régis", "joffrey", "invalid-tag"],
-      "it strips invalid characters in tag"
-    );
-
-    await this.subject.expand();
-    await this.subject.fillInFilter("01234567890123456789012345");
-    await this.subject.keyboard("enter");
-    assert.deepEqual(
-      this.tags,
-      ["jeff", "neil", "arpit", "régis", "joffrey", "invalid-tag"],
-      "it does not allow creating long tags"
-    );
-
-    await click(
-      this.subject
-        .el()
-        .find(".selected-tag")
-        .last()
-    );
-    assert.deepEqual(
-      this.tags,
-      ["jeff", "neil", "arpit", "régis", "joffrey"],
-      "it removes the tag"
-    );
-  }
-});
diff --git a/test/javascripts/components/multi-select-test.js.es6 b/test/javascripts/components/multi-select-test.js.es6
deleted file mode 100644
index a012e78ce36..00000000000
--- a/test/javascripts/components/multi-select-test.js.es6
+++ /dev/null
@@ -1,323 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-import { withPluginApi } from "discourse/lib/plugin-api";
-import { clearCallbacks } from "select-kit/mixins/plugin-api";
-
-moduleForComponent("multi-select", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
-
-componentTest("with objects and values", {
-  template: "{{multi-select content=items values=values}}",
-
-  beforeEach() {
-    this.set("items", [
-      { id: 1, name: "hello" },
-      { id: 2, name: "world" }
-    ]);
-    this.set("values", [1, 2]);
-  },
-
-  test(assert) {
-    assert.equal(this.subject.header().value(), "1,2");
-  }
-});
-
-componentTest("with title", {
-  template: '{{multi-select title=(i18n "test.title")}}',
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { title: "My title" };
-  },
-
-  test(assert) {
-    assert.equal(
-      selectKit()
-        .header()
-        .title(),
-      "My title"
-    );
-  }
-});
-
-componentTest("interactions", {
-  template: "{{multi-select none=none content=items values=values}}",
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { none: "none" };
-    this.set("items", [
-      { id: 1, name: "regis" },
-      { id: 2, name: "sam" },
-      { id: 3, name: "robin" }
-    ]);
-    this.set("values", [1, 2]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.highlightedRow().name(),
-      "robin",
-      "it highlights the first content row"
-    );
-
-    await this.set("none", "test.none");
-
-    assert.ok(this.subject.noneRow().exists());
-    assert.equal(
-      this.subject.highlightedRow().name(),
-      "robin",
-      "it highlights the first content row"
-    );
-
-    await this.subject.selectRowByValue(3);
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.highlightedRow().name(),
-      "none",
-      "it highlights none row if no content"
-    );
-
-    await this.subject.fillInFilter("joffrey");
-
-    assert.equal(
-      this.subject.highlightedRow().name(),
-      "joffrey",
-      "it highlights create row when filling filter"
-    );
-
-    await this.subject.keyboard("enter");
-
-    assert.equal(
-      this.subject.highlightedRow().name(),
-      "none",
-      "it highlights none row after creating content and no content left"
-    );
-
-    await this.subject.keyboard("backspace");
-
-    const $lastSelectedName = this.subject
-      .header()
-      .el()
-      .find(".selected-name")
-      .last();
-    assert.equal($lastSelectedName.attr("data-name"), "joffrey");
-    assert.ok(
-      $lastSelectedName.hasClass("is-highlighted"),
-      "it highlights the last selected name when using backspace"
-    );
-
-    await this.subject.keyboard("backspace");
-
-    const $lastSelectedName1 = this.subject
-      .header()
-      .el()
-      .find(".selected-name")
-      .last();
-    assert.equal(
-      $lastSelectedName1.attr("data-name"),
-      "robin",
-      "it removes the previous highlighted selected content"
-    );
-    assert.notOk(
-      this.subject.rowByValue("joffrey").exists(),
-      "generated content shouldn’t appear in content when removed"
-    );
-
-    await this.subject.keyboard("selectAll");
-
-    const $highlightedSelectedNames2 = this.subject
-      .header()
-      .el()
-      .find(".selected-name.is-highlighted");
-    assert.equal(
-      $highlightedSelectedNames2.length,
-      3,
-      "it highlights each selected name"
-    );
-
-    await this.subject.keyboard("backspace");
-
-    const $selectedNames = this.subject
-      .header()
-      .el()
-      .find(".selected-name");
-    assert.equal($selectedNames.length, 0, "it removed all selected content");
-
-    assert.ok(this.subject.isFocused());
-    assert.ok(this.subject.isExpanded());
-
-    await this.subject.keyboard("escape");
-
-    assert.ok(this.subject.isFocused());
-    assert.notOk(this.subject.isExpanded());
-
-    await this.subject.keyboard("escape");
-
-    assert.notOk(this.subject.isFocused());
-    assert.notOk(this.subject.isExpanded());
-  }
-});
-
-componentTest("with limitMatches", {
-  template: "{{multi-select content=content limitMatches=2}}",
-
-  beforeEach() {
-    this.set("content", ["sam", "jeff", "neil"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.el().find(".select-kit-row").length, 2);
-  }
-});
-
-componentTest("with minimum", {
-  template: "{{multi-select content=content minimum=1}}",
-
-  beforeEach() {
-    this.set("content", ["sam", "jeff", "neil"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.validationMessage(), "Select at least 1 item.");
-
-    await this.subject.selectRowByValue("sam");
-
-    assert.equal(this.subject.header().label(), "sam");
-  }
-});
-
-componentTest("with minimumLabel", {
-  template:
-    '{{multi-select content=content minimum=1 minimumLabel="test.minimum"}}',
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { minimum: "min %{count}" };
-    this.set("content", ["sam", "jeff", "neil"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.validationMessage(), "min 1");
-
-    await this.subject.selectRowByValue("jeff");
-
-    assert.equal(this.subject.header().label(), "jeff");
-  }
-});
-
-componentTest("with forceEscape", {
-  template: "{{multi-select content=content forceEscape=true}}",
-
-  beforeEach() {
-    this.set("content", ["<div>sam</div>"]);
-  },
-  skip: true,
-  async test(assert) {
-    await this.subject.expand();
-
-    const row = this.subject.rowByIndex(0);
-    assert.equal(
-      row
-        .el()
-        .find(".name")
-        .html()
-        .trim(),
-      "&lt;div&gt;sam&lt;/div&gt;"
-    );
-
-    await this.subject.fillInFilter("<div>jeff</div>");
-    await this.subject.keyboard("enter");
-
-    assert.equal(
-      this.subject
-        .header()
-        .el()
-        .find(".name")
-        .html()
-        .trim(),
-      "&lt;div&gt;jeff&lt;/div&gt;"
-    );
-  }
-});
-
-componentTest("with forceEscape", {
-  template: "{{multi-select content=content forceEscape=false}}",
-
-  beforeEach() {
-    this.set("content", ["<div>sam</div>"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    const row = this.subject.rowByIndex(0);
-    assert.equal(
-      row
-        .el()
-        .find(".name")
-        .html()
-        .trim(),
-      "<div>sam</div>"
-    );
-
-    await this.subject.fillInFilter("<div>jeff</div>");
-    await this.subject.keyboard("enter");
-
-    assert.equal(
-      this.subject
-        .header()
-        .el()
-        .find(".name")
-        .html()
-        .trim(),
-      "<div>jeff</div>"
-    );
-  }
-});
-
-componentTest("support modifying on select behavior through plugin api", {
-  template:
-    '<span class="on-select-test"></span>{{multi-select content=content}}',
-
-  beforeEach() {
-    withPluginApi("0.8.13", api => {
-      api.modifySelectKit("select-kit").onSelect((context, value) => {
-        find(".on-select-test").html(value);
-      });
-    });
-
-    this.set("content", [
-      { id: "1", name: "robin" },
-      { id: "2", name: "arpit", __sk_row_type: "noopRow" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.selectRowByValue(1);
-
-    assert.equal(find(".on-select-test").html(), "1");
-
-    await this.subject.expand();
-    await this.subject.selectRowByValue(2);
-
-    assert.equal(
-      find(".on-select-test").html(),
-      "2",
-      "it calls onSelect for noopRows"
-    );
-
-    clearCallbacks();
-  }
-});
diff --git a/test/javascripts/components/category-chooser-test.js.es6 b/test/javascripts/components/select-kit/category-chooser-test.js.es6
similarity index 60%
rename from test/javascripts/components/category-chooser-test.js.es6
rename to test/javascripts/components/select-kit/category-chooser-test.js.es6
index f311f4d4f1e..10fb3bb5c14 100644
--- a/test/javascripts/components/category-chooser-test.js.es6
+++ b/test/javascripts/components/select-kit/category-chooser-test.js.es6
@@ -1,25 +1,34 @@
-import selectKit from "helpers/select-kit-helper";
 import componentTest from "helpers/component-test";
+import { testSelectKitModule } from "./select-kit-test-helper";
 
-moduleForComponent("category-chooser", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
+testSelectKitModule("category-chooser");
+
+function template(options = []) {
+  return `
+    {{category-chooser
+      value=value
+      options=(hash
+        ${options.join("\n")}
+      )
+    }}
+  `;
+}
 
 componentTest("with value", {
-  template: "{{category-chooser value=2}}",
+  template: template(),
 
-  test(assert) {
+  beforeEach() {
+    this.set("value", 2);
+  },
+
+  async test(assert) {
     assert.equal(this.subject.header().value(), 2);
-    assert.equal(this.subject.header().title(), "feature");
+    assert.equal(this.subject.header().label(), "feature");
   }
 });
 
 componentTest("with excludeCategoryId", {
-  template: "{{category-chooser excludeCategoryId=2}}",
-
+  template: template(["excludeCategoryId=2"]),
   async test(assert) {
     await this.subject.expand();
 
@@ -28,7 +37,7 @@ componentTest("with excludeCategoryId", {
 });
 
 componentTest("with scopedCategoryId", {
-  template: "{{category-chooser scopedCategoryId=2}}",
+  template: template(["scopedCategoryId=2"]),
 
   async test(assert) {
     await this.subject.expand();
@@ -52,7 +61,7 @@ componentTest("with scopedCategoryId", {
 });
 
 componentTest("with allowUncategorized=null", {
-  template: "{{category-chooser allowUncategorized=null}}",
+  template: template(["allowUncategorized=null"]),
 
   beforeEach() {
     this.siteSettings.allow_uncategorized_topics = false;
@@ -60,12 +69,12 @@ componentTest("with allowUncategorized=null", {
 
   test(assert) {
     assert.equal(this.subject.header().value(), null);
-    assert.equal(this.subject.header().title(), "category");
+    assert.equal(this.subject.header().label(), "category…");
   }
 });
 
 componentTest("with allowUncategorized=null rootNone=true", {
-  template: "{{category-chooser allowUncategorized=null rootNone=true}}",
+  template: template(["allowUncategorized=null", "none=true"]),
 
   beforeEach() {
     this.siteSettings.allow_uncategorized_topics = false;
@@ -73,13 +82,12 @@ componentTest("with allowUncategorized=null rootNone=true", {
 
   test(assert) {
     assert.equal(this.subject.header().value(), null);
-    assert.equal(this.subject.header().title(), "(no category)");
+    assert.equal(this.subject.header().label(), "(no category)");
   }
 });
 
-componentTest("with disallowed uncategorized, rootNone and rootNoneLabel", {
-  template:
-    '{{category-chooser allowUncategorized=null rootNone=true rootNoneLabel="test.root"}}',
+componentTest("with disallowed uncategorized, none", {
+  template: template(["allowUncategorized=null", "none='test.root'"]),
 
   beforeEach() {
     I18n.translations[I18n.locale].js.test = { root: "root none label" };
@@ -88,12 +96,12 @@ componentTest("with disallowed uncategorized, rootNone and rootNoneLabel", {
 
   test(assert) {
     assert.equal(this.subject.header().value(), null);
-    assert.equal(this.subject.header().title(), "root none label");
+    assert.equal(this.subject.header().label(), "root none label");
   }
 });
 
 componentTest("with allowed uncategorized", {
-  template: "{{category-chooser allowUncategorized=true}}",
+  template: template(["allowUncategorized=true"]),
 
   beforeEach() {
     this.siteSettings.allow_uncategorized_topics = true;
@@ -101,12 +109,12 @@ componentTest("with allowed uncategorized", {
 
   test(assert) {
     assert.equal(this.subject.header().value(), null);
-    assert.equal(this.subject.header().title(), "uncategorized");
+    assert.equal(this.subject.header().label(), "uncategorized");
   }
 });
 
-componentTest("with allowed uncategorized and rootNone", {
-  template: "{{category-chooser allowUncategorized=true rootNone=true}}",
+componentTest("with allowed uncategorized and none=true", {
+  template: template(["allowUncategorized=true", "none=true"]),
 
   beforeEach() {
     this.siteSettings.allow_uncategorized_topics = true;
@@ -114,13 +122,12 @@ componentTest("with allowed uncategorized and rootNone", {
 
   test(assert) {
     assert.equal(this.subject.header().value(), null);
-    assert.equal(this.subject.header().title(), "(no category)");
+    assert.equal(this.subject.header().label(), "(no category)");
   }
 });
 
-componentTest("with allowed uncategorized rootNone and rootNoneLabel", {
-  template:
-    '{{category-chooser allowUncategorized=true rootNone=true rootNoneLabel="test.root"}}',
+componentTest("with allowed uncategorized and none", {
+  template: template(["allowUncategorized=true", "none='test.root'"]),
 
   beforeEach() {
     I18n.translations[I18n.locale].js.test = { root: "root none label" };
@@ -129,6 +136,6 @@ componentTest("with allowed uncategorized rootNone and rootNoneLabel", {
 
   test(assert) {
     assert.equal(this.subject.header().value(), null);
-    assert.equal(this.subject.header().title(), "root none label");
+    assert.equal(this.subject.header().label(), "root none label");
   }
 });
diff --git a/test/javascripts/components/select-kit/category-drop-test.js.es6 b/test/javascripts/components/select-kit/category-drop-test.js.es6
new file mode 100644
index 00000000000..79cbafdf80b
--- /dev/null
+++ b/test/javascripts/components/select-kit/category-drop-test.js.es6
@@ -0,0 +1,336 @@
+import Category from "discourse/models/category";
+import componentTest from "helpers/component-test";
+import { testSelectKitModule } from "./select-kit-test-helper";
+import {
+  NO_CATEGORIES_ID,
+  ALL_CATEGORIES_ID
+} from "select-kit/components/category-drop";
+
+testSelectKitModule("category-drop");
+
+function initCategories(context) {
+  const categories = context.site.categoriesList;
+  context.setProperties({
+    category: categories.firstObject,
+    categories
+  });
+}
+
+function initCategoriesWithParentCategory(context) {
+  const parentCategory = Category.findById(2);
+  const childCategories = context.site.categoriesList.filter(c => {
+    return c.parentCategory === parentCategory;
+  });
+
+  context.setProperties({
+    parentCategory,
+    category: null,
+    categories: childCategories
+  });
+}
+
+function template(options = []) {
+  return `
+    {{category-drop
+      category=category
+      categories=categories
+      parentCategory=parentCategory
+      options=(hash
+        ${options.join("\n")}
+      )
+    }}
+  `;
+}
+
+componentTest("caretUpIcon", {
+  template: `
+    {{category-drop
+      category=value
+      categories=content
+    }}
+  `,
+
+  async test(assert) {
+    const $header = this.subject.header().el();
+
+    assert.ok(
+      exists($header.find(`.d-icon-caret-right`)),
+      "it uses the correct default icon"
+    );
+  }
+});
+
+componentTest("none", {
+  template: `
+    {{category-drop
+      category=value
+      categories=content
+    }}
+  `,
+
+  async test(assert) {
+    const text = this.subject.header().label();
+    assert.equal(
+      text,
+      I18n.t("category.all").toLowerCase(),
+      "it uses the noneLabel"
+    );
+  }
+});
+
+componentTest("[not staff - TL0] displayCategoryDescription", {
+  template: template(),
+
+  beforeEach() {
+    Ember.set(this.currentUser, "staff", false);
+    Ember.set(this.currentUser, "trustLevel", 0);
+
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const row = this.subject.rowByValue(this.category.id);
+    assert.ok(
+      exists(row.el().find(".category-desc")),
+      "it shows category description for newcomers"
+    );
+  }
+});
+
+componentTest("[not staff - TL1] displayCategoryDescription", {
+  template: template(),
+
+  beforeEach() {
+    Ember.set(this.currentUser, "staff", false);
+    Ember.set(this.currentUser, "trustLevel", 1);
+
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const row = this.subject.rowByValue(this.category.id);
+    assert.ok(
+      exists(row.el().find(".category-desc")),
+      "it doesn't show category description for TL0+"
+    );
+  }
+});
+
+componentTest("[staff - TL0] displayCategoryDescription", {
+  template: template(),
+
+  beforeEach() {
+    Ember.set(this.currentUser, "staff", true);
+    Ember.set(this.currentUser, "trustLevel", 0);
+
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const row = this.subject.rowByValue(this.category.id);
+    assert.ok(
+      exists(row.el().find(".category-desc")),
+      "it doesn't show category description for staff"
+    );
+  }
+});
+
+componentTest("hideParentCategory (default: false)", {
+  template: template(),
+
+  beforeEach() {
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const row = this.subject.rowByValue(this.category.id);
+    assert.equal(row.value(), this.category.id);
+    assert.equal(this.category.parent_category_id, null);
+  }
+});
+
+componentTest("hideParentCategory (true)", {
+  template: template(["hideParentCategory=true"]),
+
+  beforeEach() {
+    initCategoriesWithParentCategory(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const parentRow = this.subject.rowByValue(this.parentCategory.id);
+    assert.notOk(parentRow.exists(), "the parent row is not showing");
+
+    const childCategory = this.categories.firstObject;
+    const childCategoryId = childCategory.id;
+    const childRow = this.subject.rowByValue(childCategoryId);
+    assert.ok(childRow.exists(), "the child row is showing");
+
+    const $categoryStatus = childRow.el().find(".category-status");
+    assert.ok(
+      $categoryStatus
+        .text()
+        .trim()
+        .match(/^spec/)
+    );
+  }
+});
+
+componentTest("allowUncategorized (default: true)", {
+  template: template(),
+
+  beforeEach() {
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const uncategorizedCategoryId = this.site.uncategorized_category_id;
+    const row = this.subject.rowByValue(uncategorizedCategoryId);
+    assert.ok(row.exists(), "the uncategorized row is showing");
+  }
+});
+
+componentTest("allowUncategorized (false)", {
+  template: template(["allowUncategorized=false"]),
+
+  beforeEach() {
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const uncategorizedCategoryId = this.site.uncategorized_category_id;
+    const row = this.subject.rowByValue(uncategorizedCategoryId);
+    assert.notOk(row.exists(), "the uncategorized row is not showing");
+  }
+});
+
+componentTest("countSubcategories (default: false)", {
+  template: template(),
+
+  beforeEach() {
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const category = Category.findById(7);
+    const row = this.subject.rowByValue(category.id);
+    const topicCount = row
+      .el()
+      .find(".topic-count")
+      .text()
+      .trim();
+
+    assert.equal(
+      topicCount,
+      "× 481",
+      "it doesn't include the topic count of subcategories"
+    );
+  }
+});
+
+componentTest("countSubcategories (true)", {
+  template: template(["countSubcategories=true"]),
+
+  beforeEach() {
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const category = Category.findById(7);
+    const row = this.subject.rowByValue(category.id);
+    const topicCount = row
+      .el()
+      .find(".topic-count")
+      .text()
+      .trim();
+
+    assert.equal(
+      topicCount,
+      "× 584",
+      "it includes the topic count of subcategories"
+    );
+  }
+});
+
+componentTest("shortcuts:default", {
+  template: template(),
+
+  beforeEach() {
+    initCategories(this);
+    this.set("category", null);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    assert.equal(
+      this.subject.rowByIndex(0).value(),
+      this.categories.firstObject.id,
+      "Shortcuts are not prepended when no category is selected"
+    );
+  }
+});
+
+componentTest("shortcuts:category is set", {
+  template: template(),
+
+  beforeEach() {
+    initCategories(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    assert.equal(this.subject.rowByIndex(0).value(), ALL_CATEGORIES_ID);
+  }
+});
+
+componentTest("shortcuts with parentCategory/subCategory=true:default", {
+  template: template(["subCategory=true"]),
+
+  beforeEach() {
+    initCategoriesWithParentCategory(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    assert.equal(this.subject.rowByIndex(0).value(), NO_CATEGORIES_ID);
+  }
+});
+
+componentTest(
+  "shortcuts with parentCategory/subCategory=true:category is selected",
+  {
+    template: template(["subCategory=true"]),
+
+    beforeEach() {
+      initCategoriesWithParentCategory(this);
+      this.set("category", this.categories.firstObject);
+    },
+
+    async test(assert) {
+      await this.subject.expand();
+
+      assert.equal(this.subject.rowByIndex(0).value(), ALL_CATEGORIES_ID);
+      assert.equal(this.subject.rowByIndex(1).value(), NO_CATEGORIES_ID);
+    }
+  }
+);
diff --git a/test/javascripts/components/select-kit/combo-box-test.js.es6 b/test/javascripts/components/select-kit/combo-box-test.js.es6
new file mode 100644
index 00000000000..f48cb602499
--- /dev/null
+++ b/test/javascripts/components/select-kit/combo-box-test.js.es6
@@ -0,0 +1,102 @@
+import selectKit from "helpers/select-kit-helper";
+import componentTest from "helpers/component-test";
+
+moduleForComponent("select-kit/combo-box", {
+  integration: true,
+  beforeEach() {
+    this.set("subject", selectKit());
+  }
+});
+
+const DEFAULT_CONTENT = [
+  { id: 1, name: "foo" },
+  { id: 2, name: "bar" },
+  { id: 3, name: "baz" }
+];
+
+const DEFAULT_VALUE = 1;
+
+const setDefaultState = (ctx, options) => {
+  const properties = Object.assign(
+    {
+      content: DEFAULT_CONTENT,
+      value: DEFAULT_VALUE
+    },
+    options || {}
+  );
+  ctx.setProperties(properties);
+};
+
+componentTest("options.clearable", {
+  template: `
+    {{combo-box
+      value=value
+      content=content
+      onChange=onChange
+      options=(hash clearable=clearable)
+    }}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, {
+      clearable: true,
+      onChange: value => {
+        this.set("value", value);
+      }
+    });
+  },
+
+  async test(assert) {
+    const $header = this.subject.header();
+
+    assert.ok(
+      exists($header.el().find(".btn-clear")),
+      "it shows the clear button"
+    );
+    assert.equal($header.value(), DEFAULT_VALUE);
+
+    await click($header.el().find(".btn-clear"));
+
+    assert.notOk(
+      exists($header.el().find(".btn-clear")),
+      "it hides the clear button"
+    );
+    assert.equal($header.value(), null);
+  }
+});
+
+componentTest("options.{caretUpIcon,caretDownIcon}", {
+  template: `
+    {{combo-box
+      value=value
+      content=content
+      options=(hash
+        caretUpIcon=caretUpIcon
+        caretDownIcon=caretDownIcon
+      )
+    }}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, {
+      caretUpIcon: "pencil-alt",
+      caretDownIcon: "trash-alt"
+    });
+  },
+
+  async test(assert) {
+    const $header = this.subject.header().el();
+
+    assert.ok(
+      exists($header.find(`.d-icon-${this.caretDownIcon}`)),
+      "it uses the icon provided"
+    );
+
+    await this.subject.expand();
+
+    assert.ok(
+      exists($header.find(`.d-icon-${this.caretUpIcon}`)),
+      "it uses the icon provided"
+    );
+  }
+});
diff --git a/test/javascripts/components/select-kit/dropdown-select-box-test.js.es6 b/test/javascripts/components/select-kit/dropdown-select-box-test.js.es6
new file mode 100644
index 00000000000..5eaaaa8e30b
--- /dev/null
+++ b/test/javascripts/components/select-kit/dropdown-select-box-test.js.es6
@@ -0,0 +1,111 @@
+import selectKit from "helpers/select-kit-helper";
+import componentTest from "helpers/component-test";
+
+moduleForComponent("select-kit/dropdown-select-box", {
+  integration: true,
+  beforeEach() {
+    this.set("subject", selectKit());
+  }
+});
+
+const DEFAULT_CONTENT = [
+  { id: 1, name: "foo" },
+  { id: 2, name: "bar" },
+  { id: 3, name: "baz" }
+];
+
+const DEFAULT_VALUE = 1;
+
+const setDefaultState = (ctx, options) => {
+  const properties = Object.assign(
+    {
+      content: DEFAULT_CONTENT,
+      value: DEFAULT_VALUE,
+      onChange: value => {
+        this.set("value", value);
+      }
+    },
+    options || {}
+  );
+  ctx.setProperties(properties);
+};
+
+componentTest("selection behavior", {
+  template: `
+    {{dropdown-select-box
+      value=value
+      content=content
+    }}
+  `,
+
+  beforeEach() {
+    setDefaultState(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+    assert.ok(this.subject.isExpanded());
+
+    await this.subject.selectRowByValue(DEFAULT_VALUE);
+    assert.notOk(
+      this.subject.isExpanded(),
+      "it collapses the dropdown on select"
+    );
+  }
+});
+
+componentTest("options.showFullTitle=false", {
+  template: `
+    {{dropdown-select-box
+      value=value
+      content=content
+      options=(hash
+        showFullTitle=showFullTitle
+      )
+    }}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, { showFullTitle: false });
+  },
+
+  async test(assert) {
+    assert.ok(
+      !exists(
+        this.subject
+          .header()
+          .el()
+          .find(".selected-name .body")
+      ),
+      "it hides the text of the selected item"
+    );
+  }
+});
+
+componentTest("options.showFullTitle=true", {
+  template: `
+    {{dropdown-select-box
+      value=value
+      content=content
+      options=(hash
+        showFullTitle=showFullTitle
+      )
+    }}
+  `,
+
+  beforeEach() {
+    setDefaultState(this, { showFullTitle: true });
+  },
+
+  async test(assert) {
+    assert.ok(
+      exists(
+        this.subject
+          .header()
+          .el()
+          .find(".selected-name")
+      ),
+      "it shows the text of the selected item"
+    );
+  }
+});
diff --git a/test/javascripts/components/select-kit/list-setting-test.js.es6 b/test/javascripts/components/select-kit/list-setting-test.js.es6
new file mode 100644
index 00000000000..37e08081d23
--- /dev/null
+++ b/test/javascripts/components/select-kit/list-setting-test.js.es6
@@ -0,0 +1,35 @@
+import componentTest from "helpers/component-test";
+import { testSelectKitModule } from "./select-kit-test-helper";
+
+testSelectKitModule("list-setting");
+
+function template(options = []) {
+  return `
+    {{list-setting
+      value=value
+      choices=choices
+      options=(hash
+        ${options.join("\n")}
+      )
+    }}
+  `;
+}
+
+componentTest("default", {
+  template: template(),
+
+  beforeEach() {
+    this.set("value", ["bold", "italic"]);
+    this.set("choices", ["bold", "italic", "underline"]);
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().name(), "bold,italic");
+    assert.equal(this.subject.header().value(), "bold,italic");
+
+    await this.subject.expand();
+
+    assert.equal(this.subject.rows().length, 1);
+    assert.equal(this.subject.rowByIndex(0).value(), "underline");
+  }
+});
diff --git a/test/javascripts/components/select-kit/multi-select-test.js.es6 b/test/javascripts/components/select-kit/multi-select-test.js.es6
new file mode 100644
index 00000000000..7e636904856
--- /dev/null
+++ b/test/javascripts/components/select-kit/multi-select-test.js.es6
@@ -0,0 +1,63 @@
+import componentTest from "helpers/component-test";
+import { testSelectKitModule } from "./select-kit-test-helper";
+
+testSelectKitModule("multi-select");
+
+function template(options = []) {
+  return `
+    {{multi-select
+      value=value
+      content=content
+      options=(hash
+        ${options.join("\n")}
+      )
+    }}
+  `;
+}
+
+const DEFAULT_CONTENT = [
+  { id: 1, name: "foo" },
+  { id: 2, name: "bar" },
+  { id: 3, name: "baz" }
+];
+
+const setDefaultState = (ctx, options) => {
+  const properties = Object.assign(
+    {
+      content: DEFAULT_CONTENT,
+      value: null
+    },
+    options || {}
+  );
+  ctx.setProperties(properties);
+};
+
+componentTest("content", {
+  template: template(),
+
+  beforeEach() {
+    setDefaultState(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const content = this.subject.displayedContent();
+    assert.equal(content.length, 3, "it shows rows");
+    assert.equal(
+      content[0].name,
+      this.content.firstObject.name,
+      "it has the correct name"
+    );
+    assert.equal(
+      content[0].id,
+      this.content.firstObject.id,
+      "it has the correct value"
+    );
+    assert.equal(
+      this.subject.header().value(),
+      null,
+      "it doesn't set a value from the content"
+    );
+  }
+});
diff --git a/test/javascripts/components/select-kit/notifications-button-test.js.es6 b/test/javascripts/components/select-kit/notifications-button-test.js.es6
new file mode 100644
index 00000000000..44f9cf39747
--- /dev/null
+++ b/test/javascripts/components/select-kit/notifications-button-test.js.es6
@@ -0,0 +1,40 @@
+import componentTest from "helpers/component-test";
+import { testSelectKitModule, setDefaultState } from "./select-kit-test-helper";
+
+testSelectKitModule("notifications-button");
+
+componentTest("default", {
+  template: `
+    {{notifications-button
+      value=value
+      options=(hash
+        i18nPrefix=i18nPrefix
+        i18nPostfix=i18nPostfix
+      )
+    }}
+  `,
+
+  beforeEach() {
+    this.set("value", 1);
+
+    setDefaultState(this, 1, { i18nPrefix: "pre", i18nPostfix: "post" });
+  },
+
+  async test(assert) {
+    assert.ok(this.subject.header().value());
+
+    assert.ok(
+      this.subject
+        .header()
+        .label()
+        .includes(`${this.i18nPrefix}.regular${this.i18nPostfix}`),
+      "it shows the regular choice when value is not set"
+    );
+
+    const icon = this.subject.header().icon()[0];
+    assert.ok(
+      icon.classList.contains("d-icon-d-regular"),
+      "it shows the correct icon"
+    );
+  }
+});
diff --git a/test/javascripts/components/pinned-options-test.js.es6 b/test/javascripts/components/select-kit/pinned-options-test.js.es6
similarity index 85%
rename from test/javascripts/components/pinned-options-test.js.es6
rename to test/javascripts/components/select-kit/pinned-options-test.js.es6
index 25106a2203a..09bf69eb96f 100644
--- a/test/javascripts/components/pinned-options-test.js.es6
+++ b/test/javascripts/components/select-kit/pinned-options-test.js.es6
@@ -11,7 +11,7 @@ const buildTopic = function() {
   });
 };
 
-moduleForComponent("pinned-options", {
+moduleForComponent("select-kit/pinned-options", {
   integration: true,
   beforeEach: function() {
     this.set("subject", selectKit());
@@ -24,12 +24,13 @@ componentTest("updating the content refreshes the list", {
   beforeEach() {
     this.siteSettings.automatically_unpin_topics = false;
     this.set("topic", buildTopic());
-    this.set("pinned", true);
+    this.set("pinned", "pinned");
   },
 
   async test(assert) {
     assert.equal(this.subject.header().name(), "pinned");
 
+    // we do it manually as clearPin is an ajax call
     await this.set("pinned", false);
 
     assert.equal(this.subject.header().name(), "unpinned");
diff --git a/test/javascripts/components/select-kit/select-kit-test-helper.js.es6 b/test/javascripts/components/select-kit/select-kit-test-helper.js.es6
new file mode 100644
index 00000000000..70f81403015
--- /dev/null
+++ b/test/javascripts/components/select-kit/select-kit-test-helper.js.es6
@@ -0,0 +1,33 @@
+import selectKit from "helpers/select-kit-helper";
+
+export function testSelectKitModule(moduleName, options = {}) {
+  moduleForComponent(`select-kit/${moduleName}`, {
+    integration: true,
+    beforeEach() {
+      this.set("subject", selectKit());
+      options.beforeEach && options.beforeEach.call(this);
+    },
+    afterEach() {
+      options.afterEach && options.afterEach.call(this);
+    }
+  });
+}
+
+export const DEFAULT_CONTENT = [
+  { id: 1, name: "foo" },
+  { id: 2, name: "bar" },
+  { id: 3, name: "baz" }
+];
+
+export function setDefaultState(ctx, value, options = {}) {
+  const properties = Object.assign(
+    {
+      onChange: v => {
+        this.set("value", v);
+      }
+    },
+    options || {}
+  );
+
+  ctx.setProperties(properties);
+}
diff --git a/test/javascripts/components/select-kit/single-select-test.js.es6 b/test/javascripts/components/select-kit/single-select-test.js.es6
new file mode 100644
index 00000000000..166660adf7a
--- /dev/null
+++ b/test/javascripts/components/select-kit/single-select-test.js.es6
@@ -0,0 +1,217 @@
+import componentTest from "helpers/component-test";
+import { testSelectKitModule } from "./select-kit-test-helper";
+
+testSelectKitModule("single-select");
+
+function template(options = []) {
+  return `
+    {{single-select
+      value=value
+      content=content
+      nameProperty=nameProperty
+      valueProperty=valueProperty
+      onChange=onChange
+      options=(hash
+        ${options.join("\n")}
+      )
+    }}
+  `;
+}
+
+const DEFAULT_CONTENT = [
+  { id: 1, name: "foo" },
+  { id: 2, name: "bar" },
+  { id: 3, name: "baz" }
+];
+
+const DEFAULT_VALUE = 1;
+
+const setDefaultState = (ctx, options) => {
+  const properties = Object.assign(
+    {
+      content: DEFAULT_CONTENT,
+      value: DEFAULT_VALUE,
+      nameProperty: "name",
+      valueProperty: "id",
+      onChange: value => {
+        ctx.set("value", value);
+      }
+    },
+    options || {}
+  );
+  ctx.setProperties(properties);
+};
+
+componentTest("content", {
+  template: "{{single-select content=content}}",
+
+  beforeEach() {
+    setDefaultState(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const content = this.subject.displayedContent();
+    assert.equal(content.length, 3, "it shows rows");
+    assert.equal(
+      content[0].name,
+      this.content.firstObject.name,
+      "it has the correct name"
+    );
+    assert.equal(
+      content[0].id,
+      this.content.firstObject.id,
+      "it has the correct value"
+    );
+    assert.equal(
+      this.subject.header().value(),
+      null,
+      "it doesn't set a value from the content"
+    );
+  }
+});
+
+componentTest("value", {
+  template: template(),
+
+  beforeEach() {
+    setDefaultState(this);
+  },
+
+  test(assert) {
+    assert.equal(
+      this.subject.header().value(this.content),
+      1,
+      "it selects the correct content to display"
+    );
+  }
+});
+
+componentTest("options.filterable", {
+  template: template(["filterable=filterable"]),
+
+  beforeEach() {
+    setDefaultState(this, { filterable: true });
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+    assert.ok(this.subject.filter().exists(), "it shows the filter");
+
+    const filter = this.subject.displayedContent()[1].name;
+    await this.subject.fillInFilter(filter);
+    assert.equal(
+      this.subject.displayedContent()[0].name,
+      filter,
+      "it filters the list"
+    );
+  }
+});
+
+componentTest("options.limitMatches", {
+  template: template(["limitMatches=limitMatches", "filterable=filterable"]),
+
+  beforeEach() {
+    setDefaultState(this, { limitMatches: 1, filterable: true });
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+    await this.subject.fillInFilter("ba");
+
+    assert.equal(
+      this.subject.displayedContent().length,
+      1,
+      "it returns only 1 result"
+    );
+  }
+});
+
+componentTest("valueAttribute (deprecated)", {
+  template: `
+    {{single-select
+      value=value
+      content=content
+      valueAttribute="value"
+    }}
+  `,
+
+  beforeEach() {
+    this.set("value", "normal");
+
+    const content = [
+      { name: "Smaller", value: "smaller" },
+      { name: "Normal", value: "normal" },
+      { name: "Larger", value: "larger" },
+      { name: "Largest", value: "largest" }
+    ];
+    this.set("content", content);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    assert.equal(this.subject.selectedRow().value(), this.value);
+  }
+});
+
+componentTest("none:string", {
+  template: template(['none="test.none"']),
+
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = { none: "(default)" };
+    setDefaultState(this, { value: 1 });
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const noneRow = this.subject.rowByIndex(0);
+    assert.equal(noneRow.value(), null);
+    assert.equal(noneRow.name(), I18n.t("test.none"));
+  }
+});
+
+componentTest("none:object", {
+  template: template(["none=none"]),
+
+  beforeEach() {
+    setDefaultState(this, { none: { value: null, name: "(default)" } });
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const noneRow = this.subject.rowByIndex(0);
+    assert.equal(noneRow.value(), null);
+    assert.equal(noneRow.name(), "(default)");
+  }
+});
+
+componentTest("content is a basic array", {
+  template: template(['none="test.none"']),
+
+  beforeEach() {
+    I18n.translations[I18n.locale].js.test = { none: "(default)" };
+    setDefaultState(this, {
+      nameProperty: null,
+      valueProperty: null,
+      value: "foo",
+      content: ["foo", "bar", "baz"]
+    });
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    const noneRow = this.subject.rowByIndex(0);
+    assert.equal(noneRow.value(), I18n.t("test.none"));
+    assert.equal(noneRow.name(), I18n.t("test.none"));
+    assert.equal(this.value, "foo");
+
+    await this.subject.selectRowByIndex(0);
+
+    assert.equal(this.value, null);
+  }
+});
diff --git a/test/javascripts/components/select-kit/tag-drop-test.js.es6 b/test/javascripts/components/select-kit/tag-drop-test.js.es6
new file mode 100644
index 00000000000..2a558ade855
--- /dev/null
+++ b/test/javascripts/components/select-kit/tag-drop-test.js.es6
@@ -0,0 +1,78 @@
+import componentTest from "helpers/component-test";
+import { testSelectKitModule } from "./select-kit-test-helper";
+import Site from "discourse/models/site";
+
+testSelectKitModule("tag-drop", {
+  beforeEach() {
+    const site = Site.current();
+    Ember.set(site, "top_tags", ["jeff", "neil", "arpit", "régis"]);
+
+    const response = object => {
+      return [200, { "Content-Type": "application/json" }, object];
+    };
+
+    // prettier-ignore
+    server.get("/tags/filter/search", (params) => { //eslint-disable-line
+      if (params.queryParams.q === "rég") {
+        return response({
+          "results": [
+            { "id": "régis", "text": "régis", "count": 2, "pm_count": 0 }
+          ]
+        });
+      }else if (params.queryParams.q === "dav") {
+        return response({
+          "results": [
+            { "id": "David", "text": "David", "count": 2, "pm_count": 0 }
+          ]
+        });
+      }
+    });
+  }
+});
+
+function initTags(context) {
+  const categories = context.site.categoriesList;
+  const parentCategory = categories.findBy("id", 2);
+  const childCategories = categories.filter(
+    c => c.parentCategory === parentCategory
+  );
+
+  // top_tags
+  context.setProperties({
+    firstCategory: parentCategory,
+    secondCategory: childCategories.firstObject,
+    tagId: "jeff"
+  });
+}
+
+function template(options = []) {
+  return `
+    {{tag-drop
+      firstCategory=firstCategory
+      secondCategory=secondCategory
+      tagId=tagId
+      options=(hash
+        ${options.join("\n")}
+      )
+    }}
+  `;
+}
+
+componentTest("default", {
+  template: template(["tagId=tagId"]),
+
+  beforeEach() {
+    initTags(this);
+  },
+
+  async test(assert) {
+    await this.subject.expand();
+
+    assert.ok(true);
+    // const row = this.subject.rowByValue(this.category.id);
+    // assert.ok(
+    //   exists(row.el().find(".category-desc")),
+    //   "it shows category description for newcomers"
+    // );
+  }
+});
diff --git a/test/javascripts/components/topic-notifications-button-test.js.es6 b/test/javascripts/components/select-kit/topic-notifications-button-test.js.es6
similarity index 86%
rename from test/javascripts/components/topic-notifications-button-test.js.es6
rename to test/javascripts/components/select-kit/topic-notifications-button-test.js.es6
index 63d5df22848..101b0e11044 100644
--- a/test/javascripts/components/topic-notifications-button-test.js.es6
+++ b/test/javascripts/components/select-kit/topic-notifications-button-test.js.es6
@@ -16,7 +16,7 @@ const buildTopic = function(level, archetype = "regular") {
 const originalTranslation =
   I18n.translations.en.js.topic.notifications.tracking_pm.title;
 
-moduleForComponent("topic-notifications-button", {
+moduleForComponent("select-kit/topic-notifications-button", {
   integration: true,
 
   afterEach() {
@@ -36,9 +36,9 @@ componentTest("the header has a localized title", {
     assert.equal(
       selectKit()
         .header()
-        .name(),
+        .label(),
       "Normal",
-      "it has the correct title"
+      "it has the correct label"
     );
 
     await this.set("topic", buildTopic(2));
@@ -46,9 +46,9 @@ componentTest("the header has a localized title", {
     assert.equal(
       selectKit()
         .header()
-        .name(),
+        .label(),
       "Tracking",
-      "it correctly changes the title"
+      "it correctly changes the label"
     );
   }
 });
@@ -66,9 +66,9 @@ componentTest("the header has a localized title", {
     assert.equal(
       selectKit()
         .header()
-        .name(),
+        .label(),
       `${originalTranslation} PM`,
-      "it has the correct title for PMs"
+      "it has the correct label for PMs"
     );
   }
 });
diff --git a/test/javascripts/components/topic-notifications-options-test.js.es6 b/test/javascripts/components/select-kit/topic-notifications-options-test.js.es6
similarity index 88%
rename from test/javascripts/components/topic-notifications-options-test.js.es6
rename to test/javascripts/components/select-kit/topic-notifications-options-test.js.es6
index 25bf0af9b72..454ea3e9885 100644
--- a/test/javascripts/components/topic-notifications-options-test.js.es6
+++ b/test/javascripts/components/select-kit/topic-notifications-options-test.js.es6
@@ -27,15 +27,20 @@ function getTranslations(type = "") {
   });
 }
 
-moduleForComponent("topic-notifications-options", { integration: true });
+moduleForComponent("select-kit/topic-notifications-options", {
+  integration: true
+});
 
 componentTest("regular topic notification level descriptions", {
   template:
     "{{topic-notifications-options value=topic.details.notification_level topic=topic}}",
 
+  beforeEach() {
+    this.set("topic", buildTopic("regular"));
+  },
+
   async test(assert) {
     await selectKit().expand();
-    await this.set("topic", buildTopic("regular"));
 
     const uiTexts = extractDescs(selectKit().rows());
     const descriptions = getTranslations();
@@ -59,9 +64,12 @@ componentTest("PM topic notification level descriptions", {
   template:
     "{{topic-notifications-options value=topic.details.notification_level topic=topic}}",
 
+  beforeEach() {
+    this.set("topic", buildTopic("private_message"));
+  },
+
   async test(assert) {
     await selectKit().expand();
-    await this.set("topic", buildTopic("private_message"));
 
     const uiTexts = extractDescs(selectKit().rows());
     const descriptions = getTranslations("_pm");
diff --git a/test/javascripts/components/single-select-test.js.es6 b/test/javascripts/components/single-select-test.js.es6
deleted file mode 100644
index 24a472621f8..00000000000
--- a/test/javascripts/components/single-select-test.js.es6
+++ /dev/null
@@ -1,822 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-import { withPluginApi } from "discourse/lib/plugin-api";
-import { clearCallbacks } from "select-kit/mixins/plugin-api";
-
-moduleForComponent("single-select", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
-
-componentTest("updating the content refreshes the list", {
-  template: "{{single-select value=1 content=content}}",
-
-  beforeEach() {
-    this.set("content", [{ id: 1, name: "BEFORE" }]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.rowByValue(1).name(), "BEFORE");
-
-    await this.set("content", [{ id: 1, name: "AFTER" }]);
-
-    assert.equal(this.subject.rowByValue(1).name(), "AFTER");
-  }
-});
-
-componentTest("accepts a value by reference", {
-  template: "{{single-select value=value content=content}}",
-
-  beforeEach() {
-    this.set("value", 1);
-    this.set("content", [
-      { id: 1, name: "robin" },
-      { id: 2, name: "regis" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.selectedRow().name(),
-      "robin",
-      "it highlights the row corresponding to the value"
-    );
-
-    await this.subject.selectRowByValue(1);
-
-    assert.equal(this.value, 1, "it mutates the value");
-  }
-});
-
-componentTest("no default icon", {
-  template: "{{single-select}}",
-
-  test(assert) {
-    assert.equal(
-      this.subject.header().icon().length,
-      0,
-      "it doesn’t have an icon if not specified"
-    );
-  }
-});
-
-componentTest("default search icon", {
-  template: "{{single-select filterable=true}}",
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.ok(exists(this.subject.filter().icon()), "it has an icon");
-  }
-});
-
-componentTest("with no search icon", {
-  template: "{{single-select filterable=true filterIcon=null}}",
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.notOk(exists(this.subject.filter().icon()), "it has no icon");
-  }
-});
-
-componentTest("custom search icon", {
-  template: '{{single-select filterable=true filterIcon="shower"}}',
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.ok(
-      this.subject
-        .filter()
-        .icon()
-        .hasClass("d-icon-shower"),
-      "it has a the correct icon"
-    );
-  }
-});
-
-componentTest("is expandable", {
-  template: "{{single-select}}",
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.ok(this.subject.isExpanded());
-
-    await this.subject.collapse();
-
-    assert.notOk(this.subject.isExpanded());
-  }
-});
-
-componentTest("accepts custom value/name keys", {
-  template:
-    '{{single-select value=value nameProperty="item" content=content valueAttribute="identifier"}}',
-
-  beforeEach() {
-    this.set("value", 1);
-    this.set("content", [{ identifier: 1, item: "robin" }]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.selectedRow().name(), "robin");
-  }
-});
-
-componentTest("doesn’t render collection content before first expand", {
-  template: "{{single-select value=1 content=content}}",
-
-  beforeEach() {
-    this.set("content", [{ value: 1, name: "robin" }]);
-  },
-
-  async test(assert) {
-    assert.notOk(exists(find(".select-kit-collection")));
-
-    await this.subject.expand();
-
-    assert.ok(exists(find(".select-kit-collection")));
-  }
-});
-
-componentTest("dynamic headerText", {
-  template: "{{single-select value=1 content=content}}",
-
-  beforeEach() {
-    this.set("content", [
-      { id: 1, name: "robin" },
-      { id: 2, name: "regis" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.header().name(), "robin");
-
-    await this.subject.selectRowByValue(2);
-
-    assert.equal(
-      this.subject.header().name(),
-      "regis",
-      "it changes header text"
-    );
-  }
-});
-
-componentTest("supports custom row template", {
-  template: "{{single-select content=content templateForRow=templateForRow}}",
-
-  beforeEach() {
-    this.set("content", [{ id: 1, name: "robin" }]);
-    this.set("templateForRow", rowComponent => {
-      return `<b>${rowComponent.get("computedContent.name")}</b>`;
-    });
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject
-        .rowByValue(1)
-        .el()
-        .html()
-        .trim(),
-      "<b>robin</b>"
-    );
-  }
-});
-
-componentTest("supports converting select value to integer", {
-  template: "{{single-select value=value content=content castInteger=true}}",
-
-  beforeEach() {
-    this.set("value", 2);
-    this.set("content", [
-      { id: "1", name: "robin" },
-      { id: "2", name: "régis" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.selectedRow().name(), "régis");
-
-    await this.set("value", 1);
-
-    assert.equal(
-      this.subject.selectedRow().name(),
-      "robin",
-      "it works with dynamic content"
-    );
-  }
-});
-
-componentTest("supports converting string as boolean to boolean", {
-  template: "{{single-select value=value content=content castBoolean=true}}",
-
-  beforeEach() {
-    this.set("value", true);
-    this.set("content", [
-      { id: "true", name: "ASC" },
-      { id: "false", name: "DESC" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.selectedRow().name(), "ASC");
-
-    await this.set("value", false);
-
-    assert.equal(
-      this.subject.selectedRow().name(),
-      "DESC",
-      "it works with dynamic content"
-    );
-  }
-});
-
-componentTest("supports keyboard events", {
-  template: "{{single-select content=content filterable=true}}",
-
-  beforeEach() {
-    this.set("content", [
-      { id: 1, name: "robin" },
-      { id: 2, name: "regis" }
-    ]);
-  },
-
-  skip: true,
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.keyboard("down");
-
-    assert.equal(
-      this.subject.highlightedRow().title(),
-      "regis",
-      "the next row is highlighted"
-    );
-
-    await this.subject.keyboard("down");
-
-    assert.equal(
-      this.subject.highlightedRow().title(),
-      "robin",
-      "it returns to the first row"
-    );
-
-    await this.subject.keyboard("up");
-
-    assert.equal(
-      this.subject.highlightedRow().title(),
-      "regis",
-      "it highlights the last row"
-    );
-
-    await this.subject.keyboard("enter");
-
-    assert.equal(
-      this.subject.selectedRow().title(),
-      "regis",
-      "it selects the row when pressing enter"
-    );
-    assert.notOk(
-      this.subject.isExpanded(),
-      "it collapses the select box when selecting a row"
-    );
-
-    await this.subject.expand();
-    await this.subject.keyboard("escape");
-
-    assert.notOk(this.subject.isExpanded(), "it collapses the select box");
-
-    await this.subject.expand();
-    await this.subject.fillInFilter("regis");
-    await this.subject.keyboard("tab");
-
-    assert.notOk(
-      this.subject.isExpanded(),
-      "it collapses the select box when selecting a row"
-    );
-  }
-});
-
-componentTest("with allowInitialValueMutation", {
-  template:
-    "{{single-select value=value content=content allowInitialValueMutation=true}}",
-
-  beforeEach() {
-    this.set("value", "");
-    this.set("content", [
-      { id: "1", name: "robin" },
-      { id: "2", name: "régis" }
-    ]);
-  },
-
-  test(assert) {
-    assert.equal(this.value, "1", "it mutates the value on initial rendering");
-  }
-});
-
-componentTest("support appending content through plugin api", {
-  template: "{{single-select content=content}}",
-
-  beforeEach() {
-    withPluginApi("0.8.13", api => {
-      api
-        .modifySelectKit("select-kit")
-        .appendContent([{ id: "2", name: "regis" }]);
-    });
-
-    this.set("content", [{ id: "1", name: "robin" }]);
-  },
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.rows().length, 2);
-    assert.equal(this.subject.rowByIndex(1).name(), "regis");
-
-    clearCallbacks();
-  }
-});
-
-componentTest("support modifying content through plugin api", {
-  template: "{{single-select content=content}}",
-
-  beforeEach() {
-    withPluginApi("0.8.13", api => {
-      api
-        .modifySelectKit("select-kit")
-        .modifyContent((context, existingContent) => {
-          existingContent.splice(1, 0, { id: "2", name: "sam" });
-          return existingContent;
-        });
-    });
-
-    this.set("content", [
-      { id: "1", name: "robin" },
-      { id: "3", name: "regis" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.rows().length, 3);
-    assert.equal(this.subject.rowByIndex(1).name(), "sam");
-
-    clearCallbacks();
-  }
-});
-
-componentTest("support prepending content through plugin api", {
-  template: "{{single-select content=content}}",
-
-  beforeEach() {
-    withPluginApi("0.8.13", api => {
-      api
-        .modifySelectKit("select-kit")
-        .prependContent([{ id: "2", name: "regis" }]);
-    });
-
-    this.set("content", [{ id: "1", name: "robin" }]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.rows().length, 2);
-    assert.equal(this.subject.rowByIndex(0).name(), "regis");
-
-    clearCallbacks();
-  }
-});
-
-componentTest("support modifying on select behavior through plugin api", {
-  template:
-    '<span class="on-select-test"></span>{{single-select content=content}}',
-
-  beforeEach() {
-    withPluginApi("0.8.13", api => {
-      api.modifySelectKit("select-kit").onSelect((context, value) => {
-        find(".on-select-test").html(value);
-      });
-    });
-
-    this.set("content", [
-      { id: "1", name: "robin" },
-      { id: "2", name: "arpit", __sk_row_type: "noopRow" }
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.selectRowByValue(1);
-
-    assert.equal(find(".on-select-test").html(), "1");
-
-    await this.subject.expand();
-    await this.subject.selectRowByValue(2);
-
-    assert.equal(
-      find(".on-select-test").html(),
-      "2",
-      "it calls onSelect for noopRows"
-    );
-
-    clearCallbacks();
-  }
-});
-
-componentTest("support modifying on select none behavior through plugin api", {
-  template:
-    '<span class="on-select-none-test"></span>{{single-select none="none" content=content}}',
-
-  beforeEach() {
-    withPluginApi("0.8.25", api => {
-      api.modifySelectKit("select-kit").onSelectNone(() => {
-        find(".on-select-none-test").html("NONE");
-      });
-    });
-
-    this.set("content", [{ id: "1", name: "robin" }]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.selectRowByValue(1);
-    await this.subject.expand();
-    await this.subject.selectNoneRow();
-
-    assert.equal(find(".on-select-none-test").html(), "NONE");
-
-    clearCallbacks();
-  }
-});
-
-componentTest("with nameChanges", {
-  template: "{{single-select content=content nameChanges=true}}",
-
-  beforeEach() {
-    this.set("robin", { id: "1", name: "robin" });
-    this.set("content", [this.robin]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.header().name(), "robin");
-
-    await this.set("robin.name", "robin2");
-
-    assert.equal(this.subject.header().name(), "robin2");
-  }
-});
-
-componentTest("with null value", {
-  template: "{{single-select content=content}}",
-
-  beforeEach() {
-    this.set("content", [{ name: "robin" }]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.header().name(), "robin");
-    assert.equal(this.subject.header().value(), undefined);
-  }
-});
-
-componentTest("with collection header", {
-  template: "{{single-select collectionHeader=collectionHeader}}",
-
-  beforeEach() {
-    this.set("collectionHeader", "<h2>Hello</h2>");
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.ok(exists(".collection-header h2"));
-  }
-});
-
-componentTest("with title", {
-  template: '{{single-select title=(i18n "test.title")}}',
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { title: "My title" };
-  },
-
-  test(assert) {
-    assert.equal(this.subject.header().title(), "My title");
-  }
-});
-
-componentTest("support modifying header computed content through plugin api", {
-  template: "{{single-select content=content}}",
-
-  beforeEach() {
-    withPluginApi("0.8.15", api => {
-      api
-        .modifySelectKit("select-kit")
-        .modifyHeaderComputedContent((context, computedContent) => {
-          computedContent.title = "Not so evil";
-          return computedContent;
-        });
-    });
-
-    this.set("content", [{ id: "1", name: "robin" }]);
-  },
-
-  test(assert) {
-    assert.equal(this.subject.header().title(), "Not so evil");
-
-    clearCallbacks();
-  }
-});
-
-componentTest("with limitMatches", {
-  template: "{{single-select content=content limitMatches=2}}",
-
-  beforeEach() {
-    this.set("content", ["sam", "jeff", "neil"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.el().find(".select-kit-row").length, 2);
-  }
-});
-
-componentTest("with minimum", {
-  template:
-    "{{single-select content=content minimum=1 allowAutoSelectFirst=false}}",
-
-  beforeEach() {
-    this.set("content", ["sam", "jeff", "neil"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.validationMessage(), "Select at least 1 item.");
-
-    await this.subject.selectRowByValue("sam");
-
-    assert.equal(this.subject.header().label(), "sam");
-  }
-});
-
-componentTest("with minimumLabel", {
-  template:
-    '{{single-select content=content minimum=1 minimumLabel="test.minimum" allowAutoSelectFirst=false}}',
-
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = { minimum: "min %{count}" };
-    this.set("content", ["sam", "jeff", "neil"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.validationMessage(), "min 1");
-
-    await this.subject.selectRowByValue("jeff");
-
-    assert.equal(this.subject.header().label(), "jeff");
-  }
-});
-
-componentTest("with accents in filter", {
-  template: "{{single-select content=content filterable=true}}",
-
-  beforeEach() {
-    this.set("content", ["sam", "jeff", "neil"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.fillInFilter("jéff");
-
-    assert.equal(this.subject.rows().length, 1);
-    assert.equal(this.subject.rowByIndex(0).name(), "jeff");
-  }
-});
-
-componentTest("with accents in content", {
-  template: "{{single-select content=content filterable=true}}",
-
-  beforeEach() {
-    this.set("content", ["sam", "jéff", "neil"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.fillInFilter("jeff");
-
-    assert.equal(this.subject.rows().length, 1);
-    assert.equal(this.subject.rowByIndex(0).name(), "jéff");
-  }
-});
-
-componentTest("with no content and allowAny", {
-  template: "{{single-select allowAny=true}}",
-
-  skip: true,
-  async test(assert) {
-    await click(this.subject.header().el());
-
-    const $filter = this.subject.filter().el();
-
-    assert.ok($filter.hasClass("is-focused"));
-    assert.ok(!$filter.hasClass("is-hidden"));
-  }
-});
-
-componentTest("with forceEscape", {
-  template: "{{single-select content=content forceEscape=true}}",
-
-  beforeEach() {
-    this.set("content", ["<div>sam</div>"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    const row = this.subject.rowByIndex(0);
-    assert.equal(
-      row
-        .el()
-        .find(".name")
-        .html()
-        .trim(),
-      "&lt;div&gt;sam&lt;/div&gt;"
-    );
-
-    assert.equal(
-      this.subject
-        .header()
-        .el()
-        .find(".selected-name")
-        .html()
-        .trim(),
-      "&lt;div&gt;sam&lt;/div&gt;"
-    );
-  }
-});
-
-componentTest("without forceEscape", {
-  template: "{{single-select content=content forceEscape=false}}",
-
-  beforeEach() {
-    this.set("content", ["<div>sam</div>"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    const row = this.subject.rowByIndex(0);
-    assert.equal(
-      row
-        .el()
-        .find(".name")
-        .html()
-        .trim(),
-      "<div>sam</div>"
-    );
-
-    assert.equal(
-      this.subject
-        .header()
-        .el()
-        .find(".selected-name")
-        .html()
-        .trim(),
-      "<div>sam</div>"
-    );
-  }
-});
-
-componentTest("onSelect", {
-  template:
-    "<div class='test-external-action'></div>{{single-select content=content onSelect=(action externalAction)}}",
-
-  beforeEach() {
-    this.set("externalAction", actual => {
-      find(".test-external-action").text(actual);
-    });
-
-    this.set("content", ["red", "blue"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.selectRowByValue("red");
-
-    assert.equal(
-      find(".test-external-action")
-        .text()
-        .trim(),
-      "red"
-    );
-  }
-});
-
-componentTest("onDeselect", {
-  template:
-    "<div class='test-external-action'></div>{{single-select content=content onDeselect=(action externalAction)}}",
-
-  beforeEach() {
-    this.set("externalAction", actual => {
-      find(".test-external-action").text(actual);
-    });
-
-    this.set("content", ["red", "blue"]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.selectRowByValue("red");
-    await this.subject.expand();
-    await this.subject.selectRowByValue("blue");
-
-    assert.equal(
-      find(".test-external-action")
-        .text()
-        .trim(),
-      "red"
-    );
-  }
-});
-
-componentTest("noopRow", {
-  template: "{{single-select value=value content=content}}",
-
-  beforeEach() {
-    this.set("value", "blue");
-    this.set("content", [
-      { id: "red", name: "Red", __sk_row_type: "noopRow" },
-      "blue",
-      "green"
-    ]);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-    await this.subject.selectRowByValue("red");
-    assert.equal(this.value, "blue", "it doesn’t change the value");
-
-    await this.subject.expand();
-    await this.subject.selectRowByValue("green");
-    assert.equal(this.value, "green");
-  }
-});
-
-componentTest("onSelectAny", {
-  template: `<div class='test-external-action'></div>{{single-select none="none" content=content onSelectAny=(action externalAction)}}`,
-
-  beforeEach() {
-    this.set("externalAction", actual => {
-      find(".test-external-action").text(actual.value);
-    });
-
-    this.set("content", ["blue"]);
-  },
-
-  async test(assert) {
-    await this.get("subject").expand();
-    await this.get("subject").selectRowByValue("blue");
-
-    assert.equal(
-      find(".test-external-action")
-        .text()
-        .trim(),
-      "blue"
-    );
-
-    await this.get("subject").expand();
-    await this.get("subject").selectNoneRow();
-
-    assert.equal(
-      find(".test-external-action")
-        .text()
-        .trim(),
-      "__none__"
-    );
-  }
-});
diff --git a/test/javascripts/components/tag-drop-test.js.es6 b/test/javascripts/components/tag-drop-test.js.es6
deleted file mode 100644
index 57f8f755228..00000000000
--- a/test/javascripts/components/tag-drop-test.js.es6
+++ /dev/null
@@ -1,133 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-import DiscourseURL from "discourse/lib/url";
-
-moduleForComponent("tag-drop", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
-
-componentTest("default", {
-  template: "{{tag-drop}}",
-
-  beforeEach() {
-    this.site.set("can_create_tag", true);
-    this.set("site.top_tags", ["jeff", "neil", "arpit", "régis"]);
-
-    const response = object => {
-      return [200, { "Content-Type": "application/json" }, object];
-    };
-
-    // prettier-ignore
-    server.get("/tags/filter/search", (params) => { //eslint-disable-line
-      if (params.queryParams.q === "rég") {
-        return response({
-          "results": [
-            { "id": "régis", "text": "régis", "count": 2, "pm_count": 0, target_tag: null }
-          ]
-        });
-      } else if (params.queryParams.q === "dav") {
-        return response({
-          "results": [
-            { "id": "David", "text": "David", "count": 2, "pm_count": 0, target_tag: null }
-          ]
-        });
-      }
-    });
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.rowByIndex(1).name(),
-      "jeff",
-      "it has the correct tag"
-    );
-
-    assert.equal(
-      this.subject.rowByIndex(2).name(),
-      "neil",
-      "it has the correct tag"
-    );
-
-    await this.subject.fillInFilter("rég");
-    assert.equal(
-      this.subject.rowByIndex(0).name(),
-      "régis",
-      "it displays the searched tag"
-    );
-
-    await this.subject.fillInFilter("");
-    assert.equal(
-      this.subject.rowByIndex(1).name(),
-      "jeff",
-      "it returns top tags for an empty search"
-    );
-
-    sandbox.stub(DiscourseURL, "routeTo");
-    await this.subject.fillInFilter("dav");
-    await this.subject.keyboard("enter");
-    assert.ok(
-      DiscourseURL.routeTo.calledWith("/tag/david"),
-      "it uses lowercase URLs for tags"
-    );
-  }
-});
-
-componentTest("synonym", {
-  template: "{{tag-drop}}",
-
-  beforeEach() {
-    this.site.set("can_create_tag", true);
-    this.set("site.top_tags", ["jeff", "neil", "arpit", "régis"]);
-
-    const response = object => {
-      return [200, { "Content-Type": "application/json" }, object];
-    };
-
-    // prettier-ignore
-    server.get("/tags/filter/search", (params) => { //eslint-disable-line
-      if (params.queryParams.q === "robin") {
-        return response({
-          "results": [
-            { "id": "Robin", "text": "Robin", "count": 2, "pm_count": 0, target_tag: 'EvilTrout' }
-          ]
-        });
-      }
-    });
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    sandbox.stub(DiscourseURL, "routeTo");
-    await this.subject.fillInFilter("robin");
-    await this.subject.keyboard("enter");
-    assert.ok(
-      DiscourseURL.routeTo.calledWith("/tag/eviltrout"),
-      "it routes to the target tag"
-    );
-  }
-});
-
-componentTest("no tags", {
-  template: "{{tag-drop}}",
-
-  beforeEach() {
-    this.site.set("can_create_tag", true);
-    this.set("site.top_tags", undefined);
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(
-      this.subject.rowByIndex(1).name(),
-      undefined,
-      "it has no tags and doesn’t crash"
-    );
-  }
-});
diff --git a/test/javascripts/components/topic-footer-buttons-desktop-test.js.es6 b/test/javascripts/components/topic-footer-buttons-desktop-test.js.es6
deleted file mode 100644
index 9f44d196eaf..00000000000
--- a/test/javascripts/components/topic-footer-buttons-desktop-test.js.es6
+++ /dev/null
@@ -1,184 +0,0 @@
-import { withPluginApi } from "discourse/lib/plugin-api";
-import componentTest from "helpers/component-test";
-import Topic from "discourse/models/topic";
-import { clearTopicFooterButtons } from "discourse/lib/register-topic-footer-button";
-
-const buildTopic = function() {
-  return Topic.create({
-    id: 1234,
-    title: "Qunit Test Topic"
-  });
-};
-
-moduleForComponent("topic-footer-buttons-desktop", {
-  integration: true,
-  beforeEach() {
-    I18n.translations[I18n.locale].js.test = {
-      title: "My title",
-      label: "My Label"
-    };
-  },
-
-  afterEach() {
-    clearTopicFooterButtons();
-  }
-});
-
-componentTest("default", {
-  template: "{{topic-footer-buttons topic=topic}}",
-  beforeEach() {
-    withPluginApi("0.8.28", api => {
-      api.registerTopicFooterButton({
-        id: "my-button",
-        icon: "user",
-        label: "test.label",
-        title: "test.title"
-      });
-    });
-
-    this.set("topic", buildTopic());
-  },
-  async test(assert) {
-    const button = await find("#topic-footer-button-my-button");
-    assert.ok(exists(button), "it creates an inline button");
-
-    const icon = await button.find(".d-icon-user");
-    assert.ok(exists(icon), "the button has the correct icon");
-
-    const label = await button.find(".d-button-label");
-    assert.ok(exists(label), "the button has a label");
-    assert.equal(
-      label.text(),
-      I18n.t("test.label"),
-      "the button has the correct label"
-    );
-
-    const title = button.attr("title");
-    assert.equal(
-      title,
-      I18n.t("test.title"),
-      "the button has the correct title"
-    );
-  }
-});
-
-componentTest("priority", {
-  template: "{{topic-footer-buttons topic=topic}}",
-  beforeEach() {
-    withPluginApi("0.8.28", api => {
-      api.registerTopicFooterButton({
-        id: "my-second-button",
-        priority: 750,
-        icon: "user"
-      });
-
-      api.registerTopicFooterButton({
-        id: "my-third-button",
-        priority: 500,
-        icon: "flag"
-      });
-
-      api.registerTopicFooterButton({
-        id: "my-first-button",
-        priority: 1000,
-        icon: "times"
-      });
-    });
-
-    this.set("topic", buildTopic());
-  },
-  async test(assert) {
-    const buttons = await find(".topic-footer-button");
-    const firstButton = find("#topic-footer-button-my-first-button");
-    const secondButton = find("#topic-footer-button-my-second-button");
-    const thirdButton = find("#topic-footer-button-my-third-button");
-
-    assert.ok(buttons.index(firstButton) < buttons.index(secondButton));
-    assert.ok(buttons.index(secondButton) < buttons.index(thirdButton));
-  }
-});
-
-componentTest("with functions", {
-  template: "{{topic-footer-buttons topic=topic}}",
-  beforeEach() {
-    withPluginApi("0.8.28", api => {
-      api.registerTopicFooterButton({
-        id: "my-button",
-        icon() {
-          return "user";
-        },
-        label() {
-          return "test.label";
-        },
-        title() {
-          return "test.title";
-        }
-      });
-    });
-
-    this.set("topic", buildTopic());
-  },
-  async test(assert) {
-    const button = await find("#topic-footer-button-my-button");
-    assert.ok(exists(button), "it creates an inline button");
-
-    const icon = await button.find(".d-icon-user");
-    assert.ok(exists(icon), "the button has the correct icon");
-
-    const label = await button.find(".d-button-label");
-    assert.ok(exists(label), "the button has a label");
-    assert.equal(
-      label.text(),
-      I18n.t("test.label"),
-      "the button has the correct label"
-    );
-
-    const title = button.attr("title");
-    assert.equal(
-      title,
-      I18n.t("test.title"),
-      "the button has the correct title"
-    );
-  }
-});
-
-componentTest("action", {
-  template: "<div id='test-action'></div>{{topic-footer-buttons topic=topic}}",
-  beforeEach() {
-    withPluginApi("0.8.28", api => {
-      api.registerTopicFooterButton({
-        id: "my-button",
-        icon: "flag",
-        action() {
-          $("#test-action").text(this.get("topic.title"));
-        }
-      });
-    });
-
-    this.set("topic", buildTopic());
-  },
-  async test(assert) {
-    await click("#topic-footer-button-my-button");
-
-    assert.equal(find("#test-action").text(), this.get("topic.title"));
-  }
-});
-
-componentTest("dropdown", {
-  template: "{{topic-footer-buttons topic=topic}}",
-  beforeEach() {
-    withPluginApi("0.8.28", api => {
-      api.registerTopicFooterButton({
-        id: "my-button",
-        icon: "flag",
-        dropdown: true
-      });
-    });
-
-    this.set("topic", buildTopic());
-  },
-  async test(assert) {
-    const button = await find("#topic-footer-button-my-button");
-    assert.notOk(exists(button), "it doesn’t create an inline button");
-  }
-});
diff --git a/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6 b/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6
deleted file mode 100644
index 5cfd498fd5f..00000000000
--- a/test/javascripts/components/topic-footer-mobile-dropdown-test.js.es6
+++ /dev/null
@@ -1,35 +0,0 @@
-import selectKit from "helpers/select-kit-helper";
-import componentTest from "helpers/component-test";
-import Topic from "discourse/models/topic";
-
-const buildTopic = function() {
-  return Topic.create({
-    id: 1234,
-    title: "Qunit Test Topic"
-  });
-};
-
-moduleForComponent("topic-footer-mobile-dropdown", {
-  integration: true,
-  beforeEach: function() {
-    this.set("subject", selectKit());
-  }
-});
-
-componentTest("default", {
-  template: "{{topic-footer-mobile-dropdown topic=topic}}",
-  beforeEach() {
-    this.set("topic", buildTopic());
-  },
-
-  async test(assert) {
-    await this.subject.expand();
-
-    assert.equal(this.subject.header().title(), "Topic Controls");
-    assert.equal(this.subject.header().value(), null);
-    assert.notOk(
-      this.subject.selectedRow().exists(),
-      "it doesn’t preselect first row"
-    );
-  }
-});
diff --git a/test/javascripts/components/value-list-test.js.es6 b/test/javascripts/components/value-list-test.js.es6
index 76185bbee8b..0c605ef0761 100644
--- a/test/javascripts/components/value-list-test.js.es6
+++ b/test/javascripts/components/value-list-test.js.es6
@@ -6,9 +6,12 @@ componentTest("adding a value", {
   template: "{{value-list values=values}}",
 
   skip: true,
-  async test(assert) {
-    this.set("values", "vinkas\nosama");
 
+  beforeEach() {
+    this.set("values", "vinkas\nosama");
+  },
+
+  async test(assert) {
     await selectKit().expand();
     await selectKit().fillInFilter("eviltrout");
     await selectKit().keyboard("enter");
@@ -29,9 +32,11 @@ componentTest("adding a value", {
 componentTest("removing a value", {
   template: "{{value-list values=values}}",
 
-  async test(assert) {
+  beforeEach() {
     this.set("values", "vinkas\nosama");
+  },
 
+  async test(assert) {
     await click(".values .value[data-index='0'] .remove-value-btn");
 
     assert.ok(
@@ -46,10 +51,14 @@ componentTest("removing a value", {
 componentTest("selecting a value", {
   template: "{{value-list values=values choices=choices}}",
 
-  async test(assert) {
-    this.set("values", "vinkas\nosama");
-    this.set("choices", ["maja", "michael"]);
+  beforeEach() {
+    this.setProperties({
+      values: "vinkas\nosama",
+      choices: ["maja", "michael"]
+    });
+  },
 
+  async test(assert) {
     await selectKit().expand();
     await selectKit().selectRowByValue("maja");
 
@@ -69,6 +78,10 @@ componentTest("selecting a value", {
 componentTest("array support", {
   template: "{{value-list values=values inputType='array'}}",
 
+  beforeEach() {
+    this.set("values", ["vinkas", "osama"]);
+  },
+
   async test(assert) {
     this.set("values", ["vinkas", "osama"]);
 
@@ -92,10 +105,13 @@ componentTest("array support", {
 componentTest("delimiter support", {
   template: "{{value-list values=values inputDelimiter='|'}}",
 
-  skip: true,
-  async test(assert) {
+  beforeEach() {
     this.set("values", "vinkas|osama");
+  },
 
+  skip: true,
+
+  async test(assert) {
     await selectKit().expand();
     await selectKit().fillInFilter("eviltrout");
     await selectKit().keyboard("enter");
diff --git a/test/javascripts/helpers/select-kit-helper.js.es6 b/test/javascripts/helpers/select-kit-helper.js.es6
index 47243a55185..c5e1664de92 100644
--- a/test/javascripts/helpers/select-kit-helper.js.es6
+++ b/test/javascripts/helpers/select-kit-helper.js.es6
@@ -24,7 +24,10 @@ async function collapseSelectKit(selector) {
 
 async function selectKitFillInFilter(filter, selector) {
   checkSelectKitIsNotCollapsed(selector);
-  await fillIn(`${selector} .filter-input`, filter);
+  await fillIn(
+    `${selector} .filter-input`,
+    find(`${selector} .filter-input`).val() + filter
+  );
 }
 
 async function selectKitSelectRowByValue(value, selector) {
@@ -66,7 +69,11 @@ async function keyboardHelper(value, target, selector) {
       tab: { keyCode: 9 }
     };
 
-    await triggerEvent(target, "keydown", mapping[value]);
+    await triggerEvent(
+      target,
+      "keydown",
+      mapping[value] || { keyCode: value.charCodeAt(0) }
+    );
   }
 }
 
@@ -82,7 +89,8 @@ function rowHelper(row) {
       return row.attr("title");
     },
     value() {
-      return row.attr("data-value");
+      const value = row.attr("data-value");
+      return Ember.isEmpty(value) ? null : value;
     },
     exists() {
       return exists(row);
@@ -96,7 +104,8 @@ function rowHelper(row) {
 function headerHelper(header) {
   return {
     value() {
-      return header.attr("data-value");
+      const value = header.attr("data-value");
+      return Ember.isEmpty(value) ? null : value;
     },
     name() {
       return header.attr("data-name");
@@ -105,7 +114,7 @@ function headerHelper(header) {
       return header.text().trim();
     },
     icon() {
-      return header.find(".icon");
+      return header.find(".d-icon");
     },
     title() {
       return header.attr("title");
@@ -124,6 +133,9 @@ function filterHelper(filter) {
     exists() {
       return exists(filter);
     },
+    value() {
+      return filter.find("input").val();
+    },
     el() {
       return filter;
     }
@@ -194,6 +206,17 @@ export default function selectKit(selector) {
       return find(selector).find(".select-kit-row");
     },
 
+    displayedContent() {
+      return this.rows()
+        .map((_, row) => {
+          return {
+            name: row.getAttribute("data-name"),
+            id: row.getAttribute("data-value")
+          };
+        })
+        .toArray();
+    },
+
     rowByValue(value) {
       return rowHelper(
         find(selector).find('.select-kit-row[data-value="' + value + '"]')
diff --git a/test/javascripts/test_helper.js b/test/javascripts/test_helper.js
index 696f8d0a91a..6183d08cb3a 100644
--- a/test/javascripts/test_helper.js
+++ b/test/javascripts/test_helper.js
@@ -164,7 +164,9 @@ QUnit.testDone(function() {
   Object.keys(events).forEach(function(eventKey) {
     var event = events[eventKey];
     event.forEach(function(listener) {
-      appEvents.off(eventKey, listener.target, listener.fn);
+      if (appEvents.has(eventKey)) {
+        appEvents.off(eventKey, listener.target, listener.fn);
+      }
     });
   });
 
diff --git a/vendor/assets/javascripts/popper.js b/vendor/assets/javascripts/popper.js
new file mode 100644
index 00000000000..b87668b590d
--- /dev/null
+++ b/vendor/assets/javascripts/popper.js
@@ -0,0 +1,1655 @@
+/**
+ * @popperjs/core v2.0.0 - MIT License
+ */
+
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = global || self, factory(global.Popper = {}));
+}(this, (function (exports) { 'use strict';
+
+  function getBoundingClientRect(element) {
+    var rect = element.getBoundingClientRect();
+    return {
+      width: rect.width,
+      height: rect.height,
+      top: rect.top,
+      right: rect.right,
+      bottom: rect.bottom,
+      left: rect.left,
+      x: rect.left,
+      y: rect.top
+    };
+  }
+
+  function getWindow(node) {
+    if ({}.toString.call(node) !== '[object Window]') {
+      var ownerDocument = node.ownerDocument;
+      return ownerDocument ? ownerDocument.defaultView : window;
+    }
+
+    return node;
+  }
+
+  function getWindowScroll(node) {
+    var win = getWindow(node);
+    var scrollLeft = win.pageXOffset;
+    var scrollTop = win.pageYOffset;
+    return {
+      scrollLeft: scrollLeft,
+      scrollTop: scrollTop
+    };
+  }
+
+  /*:: declare function isElement(node: mixed): boolean %checks(node instanceof
+    Element); */
+
+  function isElement(node) {
+    var OwnElement = getWindow(node).Element;
+    return node instanceof OwnElement;
+  }
+  /*:: declare function isHTMLElement(node: mixed): boolean %checks(node instanceof
+    HTMLElement); */
+
+
+  function isHTMLElement(node) {
+    var OwnElement = getWindow(node).HTMLElement;
+    return node instanceof OwnElement;
+  }
+
+  function getHTMLElementScroll(element) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+
+  function getNodeScroll(node) {
+    if (node === getWindow(node) || !isHTMLElement(node)) {
+      return getWindowScroll(node);
+    } else {
+      return getHTMLElementScroll(node);
+    }
+  }
+
+  function getNodeName(element) {
+    return element ? (element.nodeName || '').toLowerCase() : null;
+  }
+
+  function getComputedStyle(element) {
+    return getWindow(element).getComputedStyle(element);
+  }
+
+  function toNumber(cssValue) {
+    return parseFloat(cssValue) || 0;
+  }
+
+  function getBorders(element) {
+    var computedStyle = isHTMLElement(element) ? getComputedStyle(element) : {};
+    return {
+      top: toNumber(computedStyle.borderTopWidth),
+      right: toNumber(computedStyle.borderRightWidth),
+      bottom: toNumber(computedStyle.borderBottomWidth),
+      left: toNumber(computedStyle.borderLeftWidth)
+    };
+  }
+
+  function getInnerOffsets(offsetParent) {
+    var rect = getBoundingClientRect(offsetParent);
+    var borders = getBorders(offsetParent);
+    return {
+      x: rect.x + borders.left,
+      y: rect.y + borders.top
+    };
+  } // Returns the composite rect of an element relative to its offsetParent.
+  // Composite means it takes into account transforms as well as layout.
+
+
+  function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
+    if (isFixed === void 0) {
+      isFixed = false;
+    }
+
+    var rect = getBoundingClientRect(elementOrVirtualElement);
+    var scroll = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
+    var offsets = {
+      x: 0,
+      y: 0
+    };
+
+    if (!isFixed) {
+      if (getNodeName(offsetParent) !== 'body') {
+        scroll = getNodeScroll(offsetParent);
+      }
+
+      if (isHTMLElement(offsetParent)) {
+        offsets = getInnerOffsets(offsetParent);
+      }
+    }
+
+    return {
+      x: rect.left + scroll.scrollLeft - offsets.x,
+      y: rect.top + scroll.scrollTop - offsets.y,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+
+  // Returns the layout rect of an element relative to its offsetParent. Layout
+  // means it doesn't take into account transforms.
+  function getLayoutRect(element) {
+    return {
+      x: element.offsetLeft,
+      y: element.offsetTop,
+      width: element.offsetWidth,
+      height: element.offsetHeight
+    };
+  }
+
+  function getParentNode(element) {
+    if (getNodeName(element) === 'html') {
+      return element;
+    }
+
+    return element.parentNode || // DOM Element detected
+    // $FlowFixMe: need a better way to handle this...
+    element.host || // ShadowRoot detected
+    document.ownerDocument || // Fallback to ownerDocument if available
+    document.documentElement // Or to documentElement if everything else fails
+    ;
+  }
+
+  function getScrollParent(node) {
+    if (['html', 'body', '#document'].includes(getNodeName(node))) {
+      return node.ownerDocument.body;
+    }
+
+    if (isHTMLElement(node)) {
+      // Firefox wants us to check `-x` and `-y` variations as well
+      var _getComputedStyle = getComputedStyle(node),
+          overflow = _getComputedStyle.overflow,
+          overflowX = _getComputedStyle.overflowX,
+          overflowY = _getComputedStyle.overflowY;
+
+      if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) {
+        return node;
+      }
+    }
+
+    return getScrollParent(getParentNode(node));
+  }
+
+  function listScrollParents(element, list) {
+    if (list === void 0) {
+      list = [];
+    }
+
+    var scrollParent = getScrollParent(element);
+    var isBody = getNodeName(scrollParent) === 'body';
+    var target = isBody ? getWindow(scrollParent) : scrollParent;
+    var updatedList = list.concat(target);
+    return isBody ? updatedList : updatedList.concat(listScrollParents(getParentNode(target)));
+  }
+
+  function isTableElement(element) {
+    return ['table', 'td', 'th'].includes(getNodeName(element));
+  }
+
+  var isFirefox = function isFirefox() {
+    return typeof window.InstallTrigger !== 'undefined';
+  };
+
+  function getTrueOffsetParent(element) {
+    var offsetParent;
+
+    if (!isHTMLElement(element) || !(offsetParent = element.offsetParent) || // https://github.com/popperjs/popper.js/issues/837
+    isFirefox() && getComputedStyle(offsetParent).position === 'fixed') {
+      return null;
+    }
+
+    return offsetParent;
+  }
+
+  function getOffsetParent(element) {
+    var window = getWindow(element);
+    var offsetParent = getTrueOffsetParent(element); // Find the nearest non-table offsetParent
+
+    while (offsetParent && isTableElement(offsetParent)) {
+      offsetParent = getTrueOffsetParent(offsetParent);
+    }
+
+    if (offsetParent && getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static') {
+      return window;
+    }
+
+    return offsetParent || window;
+  }
+
+  var top = 'top';
+  var bottom = 'bottom';
+  var right = 'right';
+  var left = 'left';
+  var auto = 'auto';
+  var basePlacements = [top, bottom, right, left];
+  var start = 'start';
+  var end = 'end';
+  var clippingParents = 'clippingParents';
+  var viewport = 'viewport';
+  var popper = 'popper';
+  var reference = 'reference';
+  var variationPlacements =
+  /*#__PURE__*/
+  basePlacements.reduce(function (acc, placement) {
+    return acc.concat([placement + "-" + start, placement + "-" + end]);
+  }, []);
+  var placements =
+  /*#__PURE__*/
+  [].concat(basePlacements, [auto]).reduce(function (acc, placement) {
+    return acc.concat([placement, placement + "-" + start, placement + "-" + end]);
+  }, []); // modifiers that need to read the DOM
+
+  var beforeRead = 'beforeRead';
+  var read = 'read';
+  var afterRead = 'afterRead'; // pure-logic modifiers
+
+  var beforeMain = 'beforeMain';
+  var main = 'main';
+  var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state)
+
+  var beforeWrite = 'beforeWrite';
+  var write = 'write';
+  var afterWrite = 'afterWrite';
+  var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite];
+
+  function order(modifiers) {
+    var map = new Map();
+    var visited = new Set();
+    var result = [];
+    modifiers.forEach(function (modifier) {
+      map.set(modifier.name, modifier);
+    }); // On visiting object, check for its dependencies and visit them recursively
+
+    function sort(modifier) {
+      visited.add(modifier.name);
+      var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);
+      requires.forEach(function (dep) {
+        if (!visited.has(dep)) {
+          var depModifier = map.get(dep);
+
+          if (depModifier) {
+            sort(depModifier);
+          }
+        }
+      });
+      result.push(modifier);
+    }
+
+    modifiers.forEach(function (modifier) {
+      if (!visited.has(modifier.name)) {
+        // check for visited object
+        sort(modifier);
+      }
+    });
+    return result;
+  }
+
+  function orderModifiers(modifiers) {
+    // order based on dependencies
+    var orderedModifiers = order(modifiers); // order based on phase
+
+    return modifierPhases.reduce(function (acc, phase) {
+      return acc.concat(orderedModifiers.filter(function (modifier) {
+        return modifier.phase === phase;
+      }));
+    }, []);
+  }
+
+  function debounce(fn) {
+    var pending;
+    return function () {
+      if (!pending) {
+        pending = new Promise(function (resolve) {
+          Promise.resolve().then(function () {
+            pending = undefined;
+            resolve(fn());
+          });
+        });
+      }
+
+      return pending;
+    };
+  }
+
+  function format(str) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return [].concat(args).reduce(function (p, c) {
+      return p.replace(/%s/, c);
+    }, str);
+  }
+
+  var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
+  var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
+  var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
+  function validateModifiers(modifiers) {
+    modifiers.forEach(function (modifier) {
+      Object.keys(modifier).forEach(function (key) {
+        switch (key) {
+          case 'name':
+            if (typeof modifier.name !== 'string') {
+              console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\""));
+            }
+
+            break;
+
+          case 'enabled':
+            if (typeof modifier.enabled !== 'boolean') {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
+            }
+
+          case 'phase':
+            if (!modifierPhases.includes(modifier.phase)) {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
+            }
+
+            break;
+
+          case 'fn':
+            if (typeof modifier.fn !== 'function') {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\""));
+            }
+
+            break;
+
+          case 'effect':
+            if (typeof modifier.effect !== 'function') {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
+            }
+
+            break;
+
+          case 'requires':
+            if (!Array.isArray(modifier.requires)) {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
+            }
+
+            break;
+
+          case 'requiresIfExists':
+            if (!Array.isArray(modifier.requiresIfExists)) {
+              console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\""));
+            }
+
+            break;
+
+          case 'options':
+          case 'data':
+            break;
+
+          default:
+            console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) {
+              return "\"" + s + "\"";
+            }).join(', ') + "; but \"" + key + "\" was provided.");
+        }
+
+        modifier.requires && modifier.requires.forEach(function (requirement) {
+          if (modifiers.find(function (mod) {
+            return mod.name === requirement;
+          }) == null) {
+            console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
+          }
+        });
+      });
+    });
+  }
+
+  function uniqueBy(arr, fn) {
+    var identifiers = new Set();
+    return arr.filter(function (item) {
+      var identifier = fn(item);
+
+      if (!identifiers.has(identifier)) {
+        identifiers.add(identifier);
+        return true;
+      }
+    });
+  }
+
+  function getBasePlacement(placement) {
+    return placement.split('-')[0];
+  }
+
+  var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided to Popper, they must be either a valid DOM element, virtual element, or a jQuery-wrapped DOM element.';
+  var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
+  var DEFAULT_OPTIONS = {
+    placement: 'bottom',
+    modifiers: [],
+    strategy: 'absolute'
+  };
+
+  function areValidElements() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return !args.some(function (element) {
+      return !(element && typeof element.getBoundingClientRect === 'function');
+    });
+  }
+
+  function popperGenerator(generatorOptions) {
+    if (generatorOptions === void 0) {
+      generatorOptions = {};
+    }
+
+    var _generatorOptions = generatorOptions,
+        _generatorOptions$def = _generatorOptions.defaultModifiers,
+        defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
+        _generatorOptions$def2 = _generatorOptions.defaultOptions,
+        defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
+    return function createPopper(reference, popper, options) {
+      if (options === void 0) {
+        options = defaultOptions;
+      }
+
+      var state = {
+        placement: 'bottom',
+        orderedModifiers: [],
+        options: Object.assign({}, DEFAULT_OPTIONS, {}, defaultOptions),
+        modifiersData: {},
+        elements: {
+          reference: reference,
+          popper: popper
+        },
+        attributes: {},
+        styles: {}
+      };
+      var effectCleanupFns = [];
+      var isDestroyed = false;
+      var instance = {
+        state: state,
+        setOptions: function setOptions(options) {
+          cleanupModifierEffects();
+          state.options = Object.assign({}, defaultOptions, {}, state.options, {}, options);
+          state.scrollParents = {
+            reference: isElement(reference) ? listScrollParents(reference) : [],
+            popper: listScrollParents(popper)
+          }; // Orders the modifiers based on their dependencies and `phase`
+          // properties
+
+          var orderedModifiers = orderModifiers([].concat(state.options.modifiers.filter(function (modifier) {
+            return !defaultModifiers.find(function (_ref) {
+              var name = _ref.name;
+              return name === modifier.name;
+            });
+          }), defaultModifiers.map(function (defaultModifier) {
+            return Object.assign({}, defaultModifier, {}, state.options.modifiers.find(function (_ref2) {
+              var name = _ref2.name;
+              return name === defaultModifier.name;
+            }));
+          }))); // Validate the provided modifiers so that the consumer will get warned
+          // if one of the modifiers is invalid for any reason
+
+          {
+            var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref3) {
+              var name = _ref3.name;
+              return name;
+            });
+            validateModifiers(modifiers);
+
+            if (getBasePlacement(state.options.placement) === auto) {
+              var flipModifier = orderedModifiers.find(function (_ref4) {
+                var name = _ref4.name;
+                return name === 'flip';
+              });
+
+              if (!flipModifier) {
+                console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
+              }
+            }
+          } // Strip out disabled modifiers
+
+
+          state.orderedModifiers = orderedModifiers.filter(function (m) {
+            return m.enabled;
+          });
+          runModifierEffects();
+          return instance.update();
+        },
+        // Sync update – it will always be executed, even if not necessary. This
+        // is useful for low frequency updates where sync behavior simplifies the
+        // logic.
+        // For high frequency updates (e.g. `resize` and `scroll` events), always
+        // prefer the async Popper#update method
+        forceUpdate: function forceUpdate() {
+          if (isDestroyed) {
+            return;
+          }
+
+          var _state$elements = state.elements,
+              reference = _state$elements.reference,
+              popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements
+          // anymore
+
+          if (!areValidElements(reference, popper)) {
+            {
+              console.error(INVALID_ELEMENT_ERROR);
+            }
+
+            return;
+          } // Store the reference and popper rects to be read by modifiers
+
+
+          state.rects = {
+            reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
+            popper: getLayoutRect(popper)
+          }; // Modifiers have the ability to reset the current update cycle. The
+          // most common use case for this is the `flip` modifier changing the
+          // placement, which then needs to re-run all the modifiers, because the
+          // logic was previously ran for the previous placement and is therefore
+          // stale/incorrect
+
+          state.reset = false;
+          state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier
+          // is filled with the initial data specified by the modifier. This means
+          // it doesn't persist and is fresh on each update.
+          // To ensure persistent data, use `${name}#persistent`
+
+          state.orderedModifiers.forEach(function (modifier) {
+            return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
+          });
+          var __debug_loops__ = 0;
+
+          for (var index = 0; index < state.orderedModifiers.length; index++) {
+            {
+              __debug_loops__ += 1;
+
+              if (__debug_loops__ > 100) {
+                console.error(INFINITE_LOOP_ERROR);
+                break;
+              }
+            }
+
+            if (state.reset === true) {
+              state.reset = false;
+              index = -1;
+              continue;
+            }
+
+            var _state$orderedModifie = state.orderedModifiers[index],
+                fn = _state$orderedModifie.fn,
+                _state$orderedModifie2 = _state$orderedModifie.options,
+                _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
+                name = _state$orderedModifie.name;
+
+            if (typeof fn === 'function') {
+              state = fn({
+                state: state,
+                options: _options,
+                name: name,
+                instance: instance
+              }) || state;
+            }
+          }
+        },
+        // Async and optimistically optimized update – it will not be executed if
+        // not necessary (debounced to run at most once-per-tick)
+        update: debounce(function () {
+          return new Promise(function (resolve) {
+            instance.forceUpdate();
+            resolve(state);
+          });
+        }),
+        destroy: function destroy() {
+          cleanupModifierEffects();
+          isDestroyed = true;
+        }
+      };
+
+      if (!areValidElements(reference, popper)) {
+        {
+          console.error(INVALID_ELEMENT_ERROR);
+        }
+
+        return instance;
+      }
+
+      instance.setOptions(options).then(function (state) {
+        if (!isDestroyed && options.onFirstUpdate) {
+          options.onFirstUpdate(state);
+        }
+      }); // Modifiers have the ability to execute arbitrary code before the first
+      // update cycle runs. They will be executed in the same order as the update
+      // cycle. This is useful when a modifier adds some persistent data that
+      // other modifiers need to use, but the modifier is run after the dependent
+      // one.
+
+      function runModifierEffects() {
+        state.orderedModifiers.forEach(function (_ref5) {
+          var name = _ref5.name,
+              _ref5$options = _ref5.options,
+              options = _ref5$options === void 0 ? {} : _ref5$options,
+              effect = _ref5.effect;
+
+          if (typeof effect === 'function') {
+            var cleanupFn = effect({
+              state: state,
+              name: name,
+              instance: instance,
+              options: options
+            });
+
+            var noopFn = function noopFn() {};
+
+            effectCleanupFns.push(cleanupFn || noopFn);
+          }
+        });
+      }
+
+      function cleanupModifierEffects() {
+        effectCleanupFns.forEach(function (fn) {
+          return fn();
+        });
+        effectCleanupFns = [];
+      }
+
+      return instance;
+    };
+  }
+
+  var passive = {
+    passive: true
+  };
+
+  function effect(_ref) {
+    var state = _ref.state,
+        instance = _ref.instance,
+        options = _ref.options;
+    var _options$scroll = options.scroll,
+        scroll = _options$scroll === void 0 ? true : _options$scroll,
+        _options$resize = options.resize,
+        resize = _options$resize === void 0 ? true : _options$resize;
+    var window = getWindow(state.elements.popper);
+    var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
+
+    if (scroll) {
+      scrollParents.forEach(function (scrollParent) {
+        scrollParent.addEventListener('scroll', instance.update, passive);
+      });
+    }
+
+    if (resize) {
+      window.addEventListener('resize', instance.update, passive);
+    }
+
+    return function () {
+      if (scroll) {
+        scrollParents.forEach(function (scrollParent) {
+          scrollParent.removeEventListener('scroll', instance.update, passive);
+        });
+      }
+
+      if (resize) {
+        window.removeEventListener('resize', instance.update, passive);
+      }
+    };
+  }
+
+  var eventListeners = {
+    name: 'eventListeners',
+    enabled: true,
+    phase: 'write',
+    fn: function fn() {},
+    effect: effect,
+    data: {}
+  };
+
+  function getVariation(placement) {
+    return placement.split('-')[1];
+  }
+
+  function getMainAxisFromPlacement(placement) {
+    return ['top', 'bottom'].includes(placement) ? 'x' : 'y';
+  }
+
+  function computeOffsets(_ref) {
+    var reference = _ref.reference,
+        element = _ref.element,
+        placement = _ref.placement;
+    var basePlacement = placement ? getBasePlacement(placement) : null;
+    var variation = placement ? getVariation(placement) : null;
+    var commonX = reference.x + reference.width / 2 - element.width / 2;
+    var commonY = reference.y + reference.height / 2 - element.height / 2;
+    var offsets;
+
+    switch (basePlacement) {
+      case top:
+        offsets = {
+          x: commonX,
+          y: reference.y - element.height
+        };
+        break;
+
+      case bottom:
+        offsets = {
+          x: commonX,
+          y: reference.y + reference.height
+        };
+        break;
+
+      case right:
+        offsets = {
+          x: reference.x + reference.width,
+          y: commonY
+        };
+        break;
+
+      case left:
+        offsets = {
+          x: reference.x - element.width,
+          y: commonY
+        };
+        break;
+
+      default:
+        offsets = {
+          x: reference.x,
+          y: reference.y
+        };
+    }
+
+    var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
+
+    if (mainAxis != null) {
+      var len = mainAxis === 'y' ? 'height' : 'width';
+
+      switch (variation) {
+        case start:
+          offsets[mainAxis] = Math.floor(offsets[mainAxis]) - Math.floor(reference[len] / 2 - element[len] / 2);
+          break;
+
+        case end:
+          offsets[mainAxis] = Math.floor(offsets[mainAxis]) + Math.ceil(reference[len] / 2 - element[len] / 2);
+          break;
+      }
+    }
+
+    return offsets;
+  }
+
+  function popperOffsets(_ref) {
+    var state = _ref.state,
+        name = _ref.name;
+    // Offsets are the actual position the popper needs to have to be
+    // properly positioned near its reference element
+    // This is the most basic placement, and will be adjusted by
+    // the modifiers in the next step
+    state.modifiersData[name] = computeOffsets({
+      reference: state.rects.reference,
+      element: state.rects.popper,
+      strategy: 'absolute',
+      placement: state.placement
+    });
+  }
+
+  var popperOffsets$1 = {
+    name: 'popperOffsets',
+    enabled: true,
+    phase: 'read',
+    fn: popperOffsets,
+    data: {}
+  };
+
+  function getDocumentElement(element) {
+    return element.ownerDocument.documentElement;
+  }
+
+  var unsetSides = {
+    top: 'auto',
+    right: 'auto',
+    bottom: 'auto',
+    left: 'auto'
+  }; // Round the offsets to the nearest suitable subpixel based on the DPR.
+  // Zooming can change the DPR, but it seems to report a value that will
+  // cleanly divide the values into the appropriate subpixels.
+
+  function roundOffsets(_ref) {
+    var x = _ref.x,
+        y = _ref.y;
+    var dpr = window.devicePixelRatio || 1;
+    return {
+      x: Math.round(x * dpr) / dpr || 0,
+      y: Math.round(y * dpr) / dpr || 0
+    };
+  }
+
+  function mapToStyles(_ref2) {
+    var _Object$assign2;
+
+    var popper = _ref2.popper,
+        popperRect = _ref2.popperRect,
+        placement = _ref2.placement,
+        offsets = _ref2.offsets,
+        position = _ref2.position,
+        gpuAcceleration = _ref2.gpuAcceleration,
+        adaptive = _ref2.adaptive;
+
+    var _roundOffsets = roundOffsets(offsets),
+        x = _roundOffsets.x,
+        y = _roundOffsets.y;
+
+    var hasX = offsets.hasOwnProperty('x');
+    var hasY = offsets.hasOwnProperty('y');
+    var sideX = left;
+    var sideY = top;
+
+    if (adaptive) {
+      var offsetParent = getOffsetParent(popper);
+
+      if (offsetParent === getWindow(popper)) {
+        offsetParent = getDocumentElement(popper);
+      }
+
+      if (placement === top) {
+        y = y - offsetParent.clientHeight + popperRect.height;
+        sideY = bottom;
+      }
+
+      if (placement === left) {
+        x = x - offsetParent.clientWidth + popperRect.width;
+        sideX = right;
+      }
+    }
+
+    var commonStyles = Object.assign({
+      position: position
+    }, adaptive && unsetSides);
+
+    if (gpuAcceleration) {
+      var _Object$assign;
+
+      return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (window.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
+    }
+
+    return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
+  }
+
+  function computeStyles(_ref3) {
+    var state = _ref3.state,
+        options = _ref3.options;
+    var _options$gpuAccelerat = options.gpuAcceleration,
+        gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
+        _options$adaptive = options.adaptive,
+        adaptive = _options$adaptive === void 0 ? true : _options$adaptive;
+    var commonStyles = {
+      placement: getBasePlacement(state.placement),
+      popper: state.elements.popper,
+      popperRect: state.rects.popper,
+      gpuAcceleration: gpuAcceleration
+    }; // popper offsets are always available
+
+    state.styles.popper = Object.assign({}, state.styles.popper, {}, mapToStyles(Object.assign({}, commonStyles, {
+      offsets: state.modifiersData.popperOffsets,
+      position: state.options.strategy,
+      adaptive: adaptive
+    }))); // arrow offsets may not be available
+
+    if (state.modifiersData.arrow != null) {
+      state.styles.arrow = Object.assign({}, state.styles.arrow, {}, mapToStyles(Object.assign({}, commonStyles, {
+        offsets: state.modifiersData.arrow,
+        position: 'absolute',
+        adaptive: false
+      })));
+    }
+
+    state.attributes.popper = Object.assign({}, state.attributes.popper, {
+      'data-popper-placement': state.placement
+    });
+  }
+
+  var computeStyles$1 = {
+    name: 'computeStyles',
+    enabled: true,
+    phase: 'beforeWrite',
+    fn: computeStyles,
+    data: {}
+  };
+
+  // and applies them to the HTMLElements such as popper and arrow
+
+  function applyStyles(_ref) {
+    var state = _ref.state;
+    Object.keys(state.elements).forEach(function (name) {
+      var style = state.styles[name] || {};
+      var attributes = state.attributes[name] || {};
+      var element = state.elements[name]; // arrow is optional + virtual elements
+
+      if (!isHTMLElement(element) || !getNodeName(element)) {
+        return;
+      } // Flow doesn't support to extend this property, but it's the most
+      // effective way to apply styles to an HTMLElement
+      // $FlowFixMe
+
+
+      Object.assign(element.style, style);
+      Object.entries(attributes).forEach(function (_ref2) {
+        var name = _ref2[0],
+            value = _ref2[1];
+
+        if (value === false) {
+          element.removeAttribute(name);
+        } else {
+          element.setAttribute(name, value === true ? '' : value);
+        }
+      });
+    });
+  }
+
+  function effect$1(_ref3) {
+    var state = _ref3.state;
+    var initialStyles = {
+      position: 'absolute',
+      left: '0',
+      top: '0'
+    };
+    Object.assign(state.elements.popper.style, initialStyles);
+    return function () {
+      Object.keys(state.elements).forEach(function (name) {
+        var element = state.elements[name];
+        var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? Object.assign({}, state.styles[name]) : initialStyles);
+        var attributes = state.attributes[name] || {}; // Set all values to an empty string to unset them
+
+        var style = styleProperties.reduce(function (style, property) {
+          var _Object$assign;
+
+          return Object.assign({}, style, (_Object$assign = {}, _Object$assign[String(property)] = '', _Object$assign));
+        }, {}); // arrow is optional + virtual elements
+
+        if (!isHTMLElement(element) || !getNodeName(element)) {
+          return;
+        } // Flow doesn't support to extend this property, but it's the most
+        // effective way to apply styles to an HTMLElement
+        // $FlowFixMe
+
+
+        Object.assign(element.style, style);
+        Object.keys(attributes).forEach(function (attribute) {
+          return element.removeAttribute(attribute);
+        });
+      });
+    };
+  }
+
+  var applyStyles$1 = {
+    name: 'applyStyles',
+    enabled: true,
+    phase: 'write',
+    fn: applyStyles,
+    effect: effect$1,
+    requires: ['computeStyles']
+  };
+
+  function distanceAndSkiddingToXY(placement, rects, offset) {
+    var basePlacement = getBasePlacement(placement);
+    var invertDistance = [left, top].includes(basePlacement) ? -1 : 1;
+
+    var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
+      placement: placement
+    })) : offset,
+        skidding = _ref[0],
+        distance = _ref[1];
+
+    skidding = skidding || 0;
+    distance = (distance || 0) * invertDistance;
+    return [left, right].includes(basePlacement) ? {
+      x: distance,
+      y: skidding
+    } : {
+      x: skidding,
+      y: distance
+    };
+  }
+
+  function offset(_ref2) {
+    var state = _ref2.state,
+        options = _ref2.options,
+        name = _ref2.name;
+    var _options$offset = options.offset,
+        offset = _options$offset === void 0 ? [0, 0] : _options$offset;
+    var data = placements.reduce(function (acc, placement) {
+      acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
+      return acc;
+    }, {});
+    var _data$state$placement = data[state.placement],
+        x = _data$state$placement.x,
+        y = _data$state$placement.y;
+    state.modifiersData.popperOffsets.x += x;
+    state.modifiersData.popperOffsets.y += y;
+    state.modifiersData[name] = data;
+  }
+
+  var offset$1 = {
+    name: 'offset',
+    enabled: true,
+    phase: 'main',
+    requires: ['popperOffsets'],
+    fn: offset
+  };
+
+  var hash = {
+    left: 'right',
+    right: 'left',
+    bottom: 'top',
+    top: 'bottom'
+  };
+  function getOppositePlacement(placement) {
+    return placement.replace(/left|right|bottom|top/g, function (matched) {
+      return hash[matched];
+    });
+  }
+
+  var hash$1 = {
+    start: 'end',
+    end: 'start'
+  };
+  function getOppositeVariationPlacement(placement) {
+    return placement.replace(/start|end/g, function (matched) {
+      return hash$1[matched];
+    });
+  }
+
+  function getViewportRect(element) {
+    var win = getWindow(element);
+    return {
+      width: win.innerWidth,
+      height: win.innerHeight,
+      x: 0,
+      y: 0
+    };
+  }
+
+  function getDocumentRect(element) {
+    var win = getWindow(element);
+    var winScroll = getWindowScroll(element);
+    var documentRect = getCompositeRect(getDocumentElement(element), win);
+    documentRect.height = Math.max(documentRect.height, win.innerHeight);
+    documentRect.width = Math.max(documentRect.width, win.innerWidth);
+    documentRect.x = -winScroll.scrollLeft;
+    documentRect.y = -winScroll.scrollTop;
+    return documentRect;
+  }
+
+  function getDecorations(element) {
+    var borders = getBorders(element);
+    return {
+      top: borders.top,
+      right: element.offsetWidth - (element.clientWidth + borders.right),
+      bottom: element.offsetHeight - (element.clientHeight + borders.bottom),
+      left: borders.left
+    };
+  }
+
+  function contains(parent, child) {
+    // $FlowFixMe: hasOwnProperty doesn't seem to work in tests
+    var isShadow = Boolean(child.getRootNode && child.getRootNode().host); // First, attempt with faster native method
+
+    if (parent.contains(child)) {
+      return true;
+    } // then fallback to custom implementation with Shadow DOM support
+    else if (isShadow) {
+        var next = child;
+
+        do {
+          if (next && next.isSameNode(parent)) {
+            return true;
+          } // $FlowFixMe: need a better way to handle this...
+
+
+          next = next.parentNode || next.host;
+        } while (next);
+      } // Give up, the result is false
+
+
+    return false;
+  }
+
+  function rectToClientRect(rect) {
+    return Object.assign({}, rect, {
+      left: rect.x,
+      top: rect.y,
+      right: rect.x + rect.width,
+      bottom: rect.y + rect.height
+    });
+  }
+
+  function getFreshSideObject() {
+    return {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    };
+  }
+
+  function getClientRectFromMixedType(element, clippingParent) {
+    return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+  } // A "clipping parent" is an overflowable container with the characteristic of
+  // clipping (or hiding) overflowing elements with a position different from
+  // `initial`
+
+
+  function getClippingParents(element) {
+    var clippingParents = listScrollParents(element);
+    var canEscapeClipping = ['absolute', 'fixed'].includes(getComputedStyle(element).position);
+    var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+
+    if (!isElement(clipperElement)) {
+      return [];
+    }
+
+    return clippingParents.filter(function (clippingParent) {
+      return isElement(clippingParent) && contains(clippingParent, clipperElement);
+    });
+  } // Gets the maximum area that the element is visible in due to any number of
+  // clipping parents
+
+
+  function getClippingRect(element, boundary, rootBoundary) {
+    var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
+    var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
+    var firstClippingParent = clippingParents[0];
+    var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
+      var rect = getClientRectFromMixedType(element, clippingParent);
+      var decorations = isHTMLElement(clippingParent) ? getDecorations(clippingParent) : getFreshSideObject();
+      accRect.top = Math.max(rect.top + decorations.top, accRect.top);
+      accRect.right = Math.min(rect.right - decorations.right, accRect.right);
+      accRect.bottom = Math.min(rect.bottom - decorations.bottom, accRect.bottom);
+      accRect.left = Math.max(rect.left + decorations.left, accRect.left);
+      return accRect;
+    }, getClientRectFromMixedType(element, firstClippingParent));
+    clippingRect.width = clippingRect.right - clippingRect.left;
+    clippingRect.height = clippingRect.bottom - clippingRect.top;
+    clippingRect.x = clippingRect.left;
+    clippingRect.y = clippingRect.top;
+    return clippingRect;
+  }
+
+  function mergePaddingObject(paddingObject) {
+    return Object.assign({}, getFreshSideObject(), {}, paddingObject);
+  }
+
+  function expandToHashMap(value, keys) {
+    return keys.reduce(function (hashMap, key) {
+      hashMap[key] = value;
+      return hashMap;
+    }, {});
+  }
+
+  function detectOverflow(state, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    var _options = options,
+        _options$placement = _options.placement,
+        placement = _options$placement === void 0 ? state.placement : _options$placement,
+        _options$boundary = _options.boundary,
+        boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
+        _options$rootBoundary = _options.rootBoundary,
+        rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary,
+        _options$elementConte = _options.elementContext,
+        elementContext = _options$elementConte === void 0 ? popper : _options$elementConte,
+        _options$altBoundary = _options.altBoundary,
+        altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,
+        _options$padding = _options.padding,
+        padding = _options$padding === void 0 ? 0 : _options$padding;
+    var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+    var altContext = elementContext === popper ? reference : popper;
+    var referenceElement = state.elements.reference;
+    var popperRect = state.rects.popper;
+    var element = state.elements[altBoundary ? altContext : elementContext];
+    var clippingClientRect = getClippingRect(isElement(element) ? element : getDocumentElement(state.elements.popper), boundary, rootBoundary);
+    var referenceClientRect = getBoundingClientRect(referenceElement);
+    var popperOffsets = computeOffsets({
+      reference: referenceClientRect,
+      element: popperRect,
+      strategy: 'absolute',
+      placement: placement
+    });
+    var popperClientRect = rectToClientRect(Object.assign({}, popperRect, {}, popperOffsets));
+    var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
+    // 0 or negative = within the clipping rect
+
+    var overflowOffsets = {
+      top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
+      bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
+      left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
+      right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+    };
+    var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element
+
+    if (elementContext === popper && offsetData) {
+      var offset = offsetData[placement];
+      Object.keys(overflowOffsets).forEach(function (key) {
+        var multiply = [right, bottom].includes(key) ? 1 : -1;
+        var axis = [top, bottom].includes(key) ? 'y' : 'x';
+        overflowOffsets[key] += offset[axis] * multiply;
+      });
+    }
+
+    return overflowOffsets;
+  }
+
+  function computeAutoPlacement(state, options) {
+    if (options === void 0) {
+      options = {};
+    }
+
+    var _options = options,
+        placement = _options.placement,
+        boundary = _options.boundary,
+        rootBoundary = _options.rootBoundary,
+        padding = _options.padding,
+        flipVariations = _options.flipVariations;
+    var variation = getVariation(placement);
+    var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) {
+      return placement.includes(variation);
+    }) : basePlacements; // $FlowFixMe: Flow seems to have problems with two array unions...
+
+    var overflows = placements.reduce(function (acc, placement) {
+      acc[placement] = detectOverflow(state, {
+        placement: placement,
+        boundary: boundary,
+        rootBoundary: rootBoundary,
+        padding: padding
+      })[getBasePlacement(placement)];
+      return acc;
+    }, {});
+    return Object.keys(overflows).sort(function (a, b) {
+      return overflows[a] - overflows[b];
+    });
+  }
+
+  function getExpandedFallbackPlacements(placement) {
+    if (getBasePlacement(placement) === auto) {
+      return [];
+    }
+
+    var oppositePlacement = getOppositePlacement(placement);
+    return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
+  }
+
+  function flip(_ref) {
+    var state = _ref.state,
+        options = _ref.options,
+        name = _ref.name;
+
+    if (state.modifiersData[name]._skip) {
+      return;
+    }
+
+    var specifiedFallbackPlacements = options.fallbackPlacements,
+        padding = options.padding,
+        boundary = options.boundary,
+        rootBoundary = options.rootBoundary,
+        _options$flipVariatio = options.flipVariations,
+        flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio;
+    var preferredPlacement = state.options.placement;
+    var basePlacement = getBasePlacement(preferredPlacement);
+    var isBasePlacement = basePlacement === preferredPlacement;
+    var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
+    var placements = uniqueBy([preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
+      return getBasePlacement(placement) === auto ? acc.concat(computeAutoPlacement(state, {
+        placement: placement,
+        boundary: boundary,
+        rootBoundary: rootBoundary,
+        padding: padding,
+        flipVariations: flipVariations
+      })) : acc.concat(placement);
+    }, []), function (placement) {
+      return placement;
+    });
+    var referenceRect = state.rects.reference;
+    var popperRect = state.rects.popper;
+    var checksMap = new Map();
+    var makeFallbackChecks = true;
+    var firstFittingPlacement = placements[0];
+
+    for (var i = 0; i < placements.length; i++) {
+      var placement = placements[i];
+
+      var _basePlacement = getBasePlacement(placement);
+
+      var isStartVariation = getVariation(placement) === start;
+      var isVertical = [top, bottom].includes(_basePlacement);
+      var len = isVertical ? 'width' : 'height';
+      var overflow = detectOverflow(state, {
+        placement: placement,
+        boundary: boundary,
+        rootBoundary: rootBoundary,
+        padding: padding
+      });
+      var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : top;
+
+      if (referenceRect[len] > popperRect[len]) {
+        mainVariationSide = getOppositePlacement(mainVariationSide);
+      }
+
+      var altVariationSide = getOppositePlacement(mainVariationSide);
+      var checks = [overflow[_basePlacement] <= 0, overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0];
+
+      if (checks.every(function (check) {
+        return check;
+      })) {
+        firstFittingPlacement = placement;
+        makeFallbackChecks = false;
+        break;
+      }
+
+      checksMap.set(placement, checks);
+    }
+
+    if (makeFallbackChecks) {
+      // `2` may be desired in some cases – research later
+      var numberOfChecks = flipVariations ? 3 : 1;
+
+      var _loop = function _loop(_i) {
+        var fittingPlacement = placements.find(function (placement) {
+          var checks = checksMap.get(placement);
+
+          if (checks) {
+            return checks.slice(0, _i).every(function (check) {
+              return check;
+            });
+          }
+        });
+
+        if (fittingPlacement) {
+          firstFittingPlacement = fittingPlacement;
+          return "break";
+        }
+      };
+
+      for (var _i = numberOfChecks; _i > 0; _i--) {
+        var _ret = _loop(_i);
+
+        if (_ret === "break") break;
+      }
+    }
+
+    if (state.placement !== firstFittingPlacement) {
+      state.modifiersData[name]._skip = true;
+      state.placement = firstFittingPlacement;
+      state.reset = true;
+    }
+  }
+
+  var flip$1 = {
+    name: 'flip',
+    enabled: true,
+    phase: 'main',
+    fn: flip,
+    requiresIfExists: ['offset'],
+    data: {
+      _skip: false
+    }
+  };
+
+  function getAltAxis(axis) {
+    return axis === 'x' ? 'y' : 'x';
+  }
+
+  function within(min, value, max) {
+    return Math.max(min, Math.min(value, max));
+  }
+
+  function preventOverflow(_ref) {
+    var state = _ref.state,
+        options = _ref.options,
+        name = _ref.name;
+    var _options$mainAxis = options.mainAxis,
+        checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
+        _options$altAxis = options.altAxis,
+        checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,
+        boundary = options.boundary,
+        rootBoundary = options.rootBoundary,
+        padding = options.padding,
+        _options$tether = options.tether,
+        tether = _options$tether === void 0 ? true : _options$tether,
+        _options$tetherOffset = options.tetherOffset,
+        tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
+    var overflow = detectOverflow(state, {
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      padding: padding
+    });
+    var basePlacement = getBasePlacement(state.placement);
+    var variation = getVariation(state.placement);
+    var isBasePlacement = !variation;
+    var mainAxis = getMainAxisFromPlacement(basePlacement);
+    var altAxis = getAltAxis(mainAxis);
+    var popperOffsets = state.modifiersData.popperOffsets;
+    var referenceRect = state.rects.reference;
+    var popperRect = state.rects.popper;
+    var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
+      placement: state.placement
+    })) : tetherOffset;
+    var data = {
+      x: 0,
+      y: 0
+    };
+
+    if (checkMainAxis) {
+      var mainSide = mainAxis === 'y' ? top : left;
+      var altSide = mainAxis === 'y' ? bottom : right;
+      var len = mainAxis === 'y' ? 'height' : 'width';
+      var offset = popperOffsets[mainAxis];
+      var min = popperOffsets[mainAxis] + overflow[mainSide];
+      var max = popperOffsets[mainAxis] - overflow[altSide];
+      var additive = tether ? -popperRect[len] / 2 : 0;
+      var minLen = variation === start ? referenceRect[len] : popperRect[len];
+      var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
+      // outside the reference bounds
+
+      var arrowElement = state.elements.arrow;
+      var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {
+        width: 0,
+        height: 0
+      };
+      var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject();
+      var arrowPaddingMin = arrowPaddingObject[mainSide];
+      var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want
+      // to include its full size in the calculation. If the reference is small
+      // and near the edge of a boundary, the popper can overflow even if the
+      // reference is not overflowing as well (e.g. virtual elements with no
+      // width or height)
+
+      var arrowLen = within(0, Math.abs(referenceRect[len] - arrowRect[len]), arrowRect[len]);
+      var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
+      var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
+      var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
+      var tetherMin = state.modifiersData.popperOffsets[mainAxis] + minOffset - offsetModifierValue;
+      var tetherMax = state.modifiersData.popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
+      var preventedOffset = within(tether ? Math.min(min, tetherMin) : min, offset, tether ? Math.max(max, tetherMax) : max);
+      state.modifiersData.popperOffsets[mainAxis] = preventedOffset;
+      data[mainAxis] = preventedOffset - offset;
+    }
+
+    if (checkAltAxis) {
+      var _mainSide = mainAxis === 'x' ? top : left;
+
+      var _altSide = mainAxis === 'x' ? bottom : right;
+
+      var _offset = popperOffsets[altAxis];
+
+      var _min = _offset + overflow[_mainSide];
+
+      var _max = _offset - overflow[_altSide];
+
+      var _preventedOffset = within(_min, _offset, _max);
+
+      state.modifiersData.popperOffsets[altAxis] = _preventedOffset;
+      data[altAxis] = _preventedOffset - _offset;
+    }
+
+    state.modifiersData[name] = data;
+  }
+
+  var preventOverflow$1 = {
+    name: 'preventOverflow',
+    enabled: true,
+    phase: 'main',
+    fn: preventOverflow,
+    requiresIfExists: ['offset']
+  };
+
+  function arrow(_ref) {
+    var _state$modifiersData$;
+
+    var state = _ref.state,
+        name = _ref.name;
+    var arrowElement = state.elements.arrow;
+    var popperOffsets = state.modifiersData.popperOffsets;
+    var basePlacement = getBasePlacement(state.placement);
+    var axis = getMainAxisFromPlacement(basePlacement);
+    var isVertical = [left, right].includes(basePlacement);
+    var len = isVertical ? 'height' : 'width';
+
+    if (!arrowElement) {
+      return;
+    }
+
+    var paddingObject = state.modifiersData[name + "#persistent"].padding;
+    var arrowRect = getLayoutRect(arrowElement);
+    var minProp = axis === 'y' ? top : left;
+    var maxProp = axis === 'y' ? bottom : right;
+    var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
+    var startDiff = popperOffsets[axis] - state.rects.reference[axis];
+    var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is
+    // outside of the popper bounds
+
+    var center = within(paddingObject[minProp], state.rects.popper[len] / 2 - arrowRect[len] / 2 + centerToReference, state.rects.popper[len] - arrowRect[len] - paddingObject[maxProp]); // Prevents breaking syntax highlighting...
+
+    var axisProp = axis;
+    state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = center, _state$modifiersData$);
+  }
+
+  function effect$2(_ref2) {
+    var state = _ref2.state,
+        options = _ref2.options,
+        name = _ref2.name;
+    var _options$element = options.element,
+        arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element,
+        _options$padding = options.padding,
+        padding = _options$padding === void 0 ? 0 : _options$padding; // CSS selector
+
+    if (typeof arrowElement === 'string') {
+      arrowElement = state.elements.popper.querySelector(arrowElement);
+
+      if (!arrowElement) {
+        return;
+      }
+    }
+
+    if (!contains(state.elements.popper, arrowElement)) {
+      {
+        console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
+      }
+
+      return;
+    }
+
+    state.elements.arrow = arrowElement;
+    state.modifiersData[name + "#persistent"] = {
+      padding: mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements))
+    };
+  }
+
+  var arrow$1 = {
+    name: 'arrow',
+    enabled: true,
+    phase: 'main',
+    fn: arrow,
+    effect: effect$2,
+    requires: ['popperOffsets'],
+    requiresIfExists: ['preventOverflow']
+  };
+
+  function getSideOffsets(overflow, rect, preventedOffsets) {
+    if (preventedOffsets === void 0) {
+      preventedOffsets = {
+        x: 0,
+        y: 0
+      };
+    }
+
+    return {
+      top: overflow.top - rect.height - preventedOffsets.y,
+      right: overflow.right - rect.width + preventedOffsets.x,
+      bottom: overflow.bottom - rect.height + preventedOffsets.y,
+      left: overflow.left - rect.width - preventedOffsets.x
+    };
+  }
+
+  function isAnySideFullyClipped(overflow) {
+    return [top, right, bottom, left].some(function (side) {
+      return overflow[side] >= 0;
+    });
+  }
+
+  function hide(_ref) {
+    var state = _ref.state,
+        name = _ref.name;
+    var referenceRect = state.rects.reference;
+    var popperRect = state.rects.popper;
+    var preventedOffsets = state.modifiersData.preventOverflow;
+    var referenceOverflow = detectOverflow(state, {
+      elementContext: 'reference'
+    });
+    var popperAltOverflow = detectOverflow(state, {
+      altBoundary: true
+    });
+    var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
+    var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
+    var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
+    var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
+    state.modifiersData[name] = {
+      referenceClippingOffsets: referenceClippingOffsets,
+      popperEscapeOffsets: popperEscapeOffsets,
+      isReferenceHidden: isReferenceHidden,
+      hasPopperEscaped: hasPopperEscaped
+    };
+    state.attributes.popper = Object.assign({}, state.attributes.popper, {
+      'data-popper-reference-hidden': isReferenceHidden,
+      'data-popper-escaped': hasPopperEscaped
+    });
+  }
+
+  var hide$1 = {
+    name: 'hide',
+    enabled: true,
+    phase: 'main',
+    requiresIfExists: ['preventOverflow'],
+    fn: hide
+  };
+
+  var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
+  var createPopper =
+  /*#__PURE__*/
+  popperGenerator({
+    defaultModifiers: defaultModifiers
+  }); // eslint-disable-next-line import/no-unused-modules
+
+  exports.createPopper = createPopper;
+  exports.defaultModifiers = defaultModifiers;
+  exports.popperGenerator = popperGenerator;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+})));
+//# sourceMappingURL=popper.js.map