FIX: ensure s2 is working with wizard (#8886)

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

@@ -774,13 +774,17 @@ export default Component.extend(
           `[data-select-kit-id=${this.selectKit.uniqueID}-body]`
         );
 
-        if (!this.site.mobileView && popper.offsetWidth < anchor.offsetWidth) {
+        if (
+          this.site &&
+          !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) {
+        if (this.site && !this.site.mobileView && inModal) {
           popper.style.width = `${anchor.offsetWidth}px`;
         }
 

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

@@ -1,4 +1,3 @@
-import { fmt } from "discourse/lib/computed";
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import { isEmpty } from "@ember/utils";
@@ -11,7 +10,9 @@ export default Component.extend(UtilsMixin, {
   classNames: ["select-kit-filter"],
   classNameBindings: ["isExpanded:is-expanded"],
   attributeBindings: ["selectKitId:data-select-kit-id"],
-  selectKitId: fmt("selectKit.uniqueID", "%@-filter"),
+  selectKitId: computed("selectKit.uniqueID", function() {
+    return `${this.selectKit.uniqueID}-filter`;
+  }),
 
   isHidden: computed(
     "selectKit.options.{filterable,allowAny,autoFilterable}",

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

@@ -1,5 +1,4 @@
 import Component from "@ember/component";
-import { propertyEqual } from "discourse/lib/computed";
 import { computed } from "@ember/object";
 import { makeArray } from "discourse-common/lib/helpers";
 import { guidFor } from "@ember/object/internals";
@@ -74,9 +73,13 @@ export default Component.extend(UtilsMixin, {
     return this.getValue(this.selectKit.highlighted);
   }),
 
-  isHighlighted: propertyEqual("rowValue", "highlightedValue"),
+  isHighlighted: computed("rowValue", "highlightedValue", function() {
+    return this.rowValue === this.highlightedValue;
+  }),
 
-  isSelected: propertyEqual("rowValue", "value"),
+  isSelected: computed("rowValue", "value", function() {
+    return this.rowValue === this.value;
+  }),
 
   mouseEnter() {
     if (!this.isDestroying || !this.isDestroyed) {

app/assets/javascripts/select-kit/templates/components/single-select.hbs

@@ -27,7 +27,9 @@
       {{/each}}
     {{else}}
       <span class="is-loading">
-        {{loading-spinner size="small"}}
+        {{#if site}}
+          {{loading-spinner size="small"}}
+        {{/if}}
       </span>
     {{/unless}}
   {{/select-kit/select-kit-body}}

app/assets/javascripts/wizard-vendor.js

@@ -4,3 +4,4 @@
 //= require sweetalert.js
 //= require virtual-dom
 //= require virtual-dom-amd
+//= require popper