DEV: adds support for lang attribute in select-kit (#11741)

app/assets/javascripts/discourse/app/templates/preferences/interface.hbs

@@ -99,6 +99,7 @@
     <div class="controls">
       {{combo-box
         valueProperty="value"
+        langProperty="value"
         content=availableLocales
         value=model.locale
         onChange=(action (mut model.locale))

app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js

@@ -313,4 +313,35 @@ discourseModule("Integration | Component | select-kit/single-select", function (
       assert.equal(row.title(), "JACKSON");
     },
   });
+
+  componentTest("langProperty", {
+    template:
+      '{{single-select langProperty="foo" value=value content=content}}',
+
+    beforeEach() {
+      this.setProperties({
+        content: [{ id: 1, name: "john", foo: "be" }],
+        value: null,
+      });
+    },
+
+    async test(assert) {
+      assert.equal(
+        this.subject.header().el()[0].querySelector(".selected-name").lang,
+        ""
+      );
+
+      await this.subject.expand();
+
+      const row = this.subject.rowByValue(1);
+      assert.equal(row.el()[0].lang, "be");
+
+      await this.subject.selectRowByValue(1);
+
+      assert.equal(
+        this.subject.header().el()[0].querySelector(".selected-name").lang,
+        "be"
+      );
+    },
+  });
 });

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

@@ -58,6 +58,7 @@ export default Component.extend(
     multiSelect: false,
     labelProperty: null,
     titleProperty: null,
+    langProperty: null,
 
     init() {
       this._super(...arguments);
@@ -79,6 +80,7 @@ export default Component.extend(
           nameProperty: this.nameProperty,
           labelProperty: this.labelProperty,
           titleProperty: this.titleProperty,
+          langProperty: this.langProperty,
           options: EmberObject.create(),
 
           isLoading: false,

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

@@ -5,6 +5,7 @@ import UtilsMixin from "select-kit/mixins/utils";
 import { guidFor } from "@ember/object/internals";
 import layout from "select-kit/templates/components/select-kit/select-kit-row";
 import { makeArray } from "discourse-common/lib/helpers";
+import { reads } from "@ember/object/computed";
 
 export default Component.extend(UtilsMixin, {
   layout,
@@ -18,6 +19,7 @@ export default Component.extend(UtilsMixin, {
     "rowName:data-name",
     "ariaLabel:aria-label",
     "guid:data-guid",
+    "rowLang:lang",
   ],
   classNameBindings: [
     "isHighlighted",
@@ -47,6 +49,8 @@ export default Component.extend(UtilsMixin, {
     return guidFor(this.item);
   }),
 
+  lang: reads("item.lang"),
+
   ariaLabel: computed("item.ariaLabel", "title", function () {
     return this.getProperty(this.item, "ariaLabel") || this.title;
   }),
@@ -82,6 +86,7 @@ export default Component.extend(UtilsMixin, {
       rowValue: this.getValue(this.item),
       rowLabel: this.getProperty(this.item, "labelProperty"),
       rowTitle: this.getProperty(this.item, "titleProperty"),
+      rowLang: this.getProperty(this.item, "langProperty"),
     });
   },
 

app/assets/javascripts/select-kit/addon/components/selected-name.js

@@ -3,12 +3,16 @@ import Component from "@ember/component";
 import UtilsMixin from "select-kit/mixins/utils";
 import layout from "select-kit/templates/components/selected-name";
 import { makeArray } from "discourse-common/lib/helpers";
+import { reads } from "@ember/object/computed";
 
 export default Component.extend(UtilsMixin, {
   tagName: "",
   layout,
   name: null,
   value: null,
+  headerTitle: null,
+  headerLang: null,
+  headerLabel: null,
 
   @action
   onSelectedNameClick() {
@@ -25,12 +29,15 @@ export default Component.extend(UtilsMixin, {
     this.setProperties({
       headerLabel: this.getProperty(this.item, "labelProperty"),
       headerTitle: this.getProperty(this.item, "titleProperty"),
+      headerLang: this.getProperty(this.item, "langProperty"),
       name: this.getName(this.item),
       value:
         this.item === this.selectKit.noneItem ? null : this.getValue(this.item),
     });
   },
 
+  lang: reads("headerLang"),
+
   ariaLabel: computed("item", "sanitizedTitle", function () {
     return this._safeProperty("ariaLabel", this.item) || this.sanitizedTitle;
   }),

app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs

@@ -1,5 +1,5 @@
 {{#if selectKit.options.showFullTitle}}
-  <div {{action "onSelectedNameClick"}} tabindex="0" title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
+  <div lang={{lang}} {{action "onSelectedNameClick"}} tabindex="0" title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
     {{#if item.icon}}
       {{d-icon item.icon}}
     {{/if}}
@@ -23,7 +23,7 @@
   </div>
 {{else}}
   {{#if item.icon}}
-    <div tabindex="0" class="select-kit-selected-name selected-name choice">
+    <div lang={{lang}} tabindex="0" class="select-kit-selected-name selected-name choice">
       {{d-icon item.icon}}
     </div>
   {{/if}}