FIX: sk3 wizard regressions (#14120)

discourse · Aug 23, 2021 · a230362 · a230362
1 parent 3d6cbb5
commit a230362
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit.js b/app/assets/javascripts/select-kit/addon/components/select-kit.js
@@ -77,7 +77,7 @@ export default Component.extend(
       this.set(
         "selectKit",
         EmberObject.create({
-          uniqueID: this.attrs?.id || guidFor(this),
+          uniqueID: this.attrs?.id?.value || this.attrs?.id || guidFor(this),
           valueProperty: this.valueProperty,
           nameProperty: this.nameProperty,
           labelProperty: this.labelProperty,
@@ -838,7 +838,7 @@ export default Component.extend(
       this.clearErrors();
 
       const inModal = this.element.closest("#discourse-modal");
-      if (inModal && this.site.mobileView) {
+      if (inModal && this?.site?.mobileView) {
         const modalBody = inModal.querySelector(".modal-body");
         modalBody.style = "";
       }
@@ -870,7 +870,7 @@ export default Component.extend(
           `#${this.selectKit.uniqueID}-body`
         );
 
-        const placementStrategy = this.site.mobileView ? "absolute" : "fixed";
+        const placementStrategy = this?.site?.mobileView ? "absolute" : "fixed";
         const verticalOffset = 3;
 
         this.popper = createPopper(anchor, popper, {

diff --git a/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js b/app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js
@@ -1,4 +1,3 @@
-import { propertyEqual } from "discourse/lib/computed";
 import { action, computed } from "@ember/object";
 import Component from "@ember/component";
 import I18n from "I18n";
@@ -36,7 +35,7 @@ export default Component.extend(UtilsMixin, {
   didInsertElement() {
     this._super(...arguments);
 
-    if (!this.site.mobileView) {
+    if (!this?.site?.mobileView) {
       this.element.addEventListener("mouseenter", this.handleMouseEnter);
       this.element.addEventListener("focus", this.handleMouseEnter);
       this.element.addEventListener("blur", this.handleBlur);
@@ -45,7 +44,7 @@ export default Component.extend(UtilsMixin, {
 
   willDestroyElement() {
     this._super(...arguments);
-    if (!this.site.mobileView && this.element) {
+    if (!this?.site?.mobileView && this.element) {
       this.element.removeEventListener("mouseenter", this.handleBlur);
       this.element.removeEventListener("focus", this.handleMouseEnter);
       this.element.removeEventListener("blur", this.handleMouseEnter);
@@ -115,9 +114,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;
+  }),
 
   @action
   handleMouseEnter() {

diff --git a/app/assets/stylesheets/common/select-kit/select-kit.scss b/app/assets/stylesheets/common/select-kit/select-kit.scss
@@ -69,14 +69,15 @@
     overflow: hidden;
     transition: all 0.25s;
     cursor: pointer;
+    display: flex;
+    align-items: stretch;
 
     .select-kit-header-wrapper {
       box-sizing: border-box;
       min-height: 28px;
       display: flex;
-      align-items: center;
       flex: 1 0 auto;
-      width: 100%;
+      align-items: center;
       height: 100%;
     }
 
@@ -262,6 +263,8 @@
       border-radius: 0;
       box-shadow: none;
       width: 100%;
+      box-sizing: border-box;
+      min-height: 30px;
     }
 
     &.is-hidden {