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}}