FIX: displays a title on sk header if no selected name (#9794)

none has to be defined.

app/assets/javascripts/select-kit/components/categories-admin-dropdown.js

@@ -12,7 +12,8 @@ export default DropdownSelectBoxComponent.extend({
     icon: "bars",
     showFullTitle: false,
     autoFilterable: false,
-    filterable: false
+    filterable: false,
+    none: "select_kit.components.categories_admin_dropdown.title"
   },
 
   content: computed(function() {

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

@@ -27,7 +27,7 @@ export default Component.extend(UtilsMixin, {
     "roleButton:role",
     "selectedValue:data-value",
     "selectedNames:data-name",
-    "serializedNames:title"
+    "buttonTitle:title"
   ],
 
   selectedValue: computed("value", function() {
@@ -42,6 +42,16 @@ export default Component.extend(UtilsMixin, {
       .join(",");
   }),
 
+  buttonTitle: computed("value", "selectKit.noneItem", function() {
+    if (
+      !this.value &&
+      this.selectKit.noneItem &&
+      !this.selectKit.options.showFullTitle
+    ) {
+      return this.selectKit.noneItem.title || this.selectKit.noneItem.name;
+    }
+  }),
+
   icons: computed("selectKit.options.{icon,icons}", function() {
     const icon = makeArray(this.selectKit.options.icon);
     const icons = makeArray(this.selectKit.options.icons);

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

@@ -1,17 +1,16 @@
-import { computed, get } from "@ember/object";
+import { computed, get, action } from "@ember/object";
 import Component from "@ember/component";
 import { makeArray } from "discourse-common/lib/helpers";
 import UtilsMixin from "select-kit/mixins/utils";
 
 export default Component.extend(UtilsMixin, {
+  tagName: "",
   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() {
+  @action
+  onSelectedNameClick() {
     if (this.selectKit.options.clearOnClick) {
       this.selectKit.deselect(this.item);
       return false;

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

@@ -1,26 +1,30 @@
 {{#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
-      }}
+  <div {{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}}
-  {{/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}}
+  </div>
 {{else}}
   {{#if item.icon}}
-    {{d-icon item.icon}}
+    <div tabindex="0" class="select-kit-selected-name selected-name choice">
+      {{d-icon item.icon}}
+    </div>
   {{/if}}
 {{/if}}

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

@@ -68,6 +68,7 @@
       flex: 0 1 auto;
       color: inherit;
       display: flex;
+      outline: none;
 
       .d-icon + .name {
         margin-left: 0.5em;

config/locales/client.en.yml

@@ -1670,6 +1670,9 @@ en:
         one: "Select at least {{count}} item."
         other: "Select at least {{count}} items."
       invalid_selection_length: "Selection must be at least {{count}} characters."
+      components:
+        categories_admin_dropdown:
+          title: "Categories admin dropdown"
 
     date_time_picker:
       from: From

test/javascripts/components/select-kit/dropdown-select-box-test.js

@@ -60,13 +60,19 @@ componentTest("options.showFullTitle=false", {
       value=value
       content=content
       options=(hash
+        icon="times"
         showFullTitle=showFullTitle
+        none=none
       )
     }}
   `,
 
   beforeEach() {
-    setDefaultState(this, { showFullTitle: false });
+    setDefaultState(this, {
+      value: null,
+      showFullTitle: false,
+      none: "test_none"
+    });
   },
 
   async test(assert) {
@@ -75,10 +81,19 @@ componentTest("options.showFullTitle=false", {
         this.subject
           .header()
           .el()
-          .find(".selected-name .body")
+          .find(".selected-name")
       ),
       "it hides the text of the selected item"
     );
+
+    assert.equal(
+      this.subject
+        .header()
+        .el()
+        .attr("title"),
+      "[en_US.test_none]",
+      "it adds a title attribute to the button"
+    );
   }
 });