FIX: displays an error when reaching tags limit

app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6

@@ -14,16 +14,33 @@ export default ComboBox.extend({
   filterable: true,
   noTags: Ember.computed.empty("computedTags"),
   allowAny: true,
+  maximumSelectionSize: Ember.computed.alias("siteSettings.max_tags_per_topic"),
   caretUpIcon: Ember.computed.alias("caretIcon"),
   caretDownIcon: Ember.computed.alias("caretIcon"),
 
-  @computed("computedTags", "siteSettings.max_tags_per_topic")
+  @computed("limitReached", "maximumSelectionSize")
-  caretIcon(computedTags, maxTagsPerTopic) {
+  maxContentRow(limitReached, count) {
-    if (computedTags.length >= maxTagsPerTopic) {
+    if (limitReached) {
-      return null;
+      return I18n.t("select_kit.max_content_reached", { count });
+    }
+  },
+
+  mutateAttributes() {
+    this.set("value", null);
+  },
+
+  @computed("limitReached")
+  caretIcon(limitReached) {
+    return limitReached ? null : "plus";
+  },
+
+  @computed("computedTags.[]", "maximumSelectionSize")
+  limitReached(computedTags, maximumSelectionSize) {
+    if (computedTags.length >= maximumSelectionSize) {
+      return true;
     }
 
-    return "plus";
+    return false;
   },
 
   init() {
@@ -46,6 +63,10 @@ export default ComboBox.extend({
   },
 
   validateCreate(term) {
+    if (this.get("limitReached")) {
+      return false;
+    }
+
     const filterRegexp = new RegExp(this.site.tags_filter_regexp, "g");
     term = term.replace(filterRegexp, "").trim().toLowerCase();
 
@@ -65,6 +86,10 @@ export default ComboBox.extend({
            this.site.get("can_create_tag");
   },
 
+  filterComputedContent(computedContent) {
+    return computedContent;
+  },
+
   didRender() {
     this._super();
 
@@ -143,13 +168,16 @@ export default ComboBox.extend({
 
   computeHeaderContent() {
     let content = this.baseHeaderComputedContent();
+    const joinedTags = this.get("computedTags").join(", ");
 
     if (isEmpty(this.get("computedTags"))) {
       content.label = I18n.t("tagging.choose_for_topic");
     } else {
-      content.label = this.get("computedTags").join(", ");
+      content.label = joinedTags;
     }
 
+    content.title = content.name = content.value = joinedTags;
+
     return content;
   },
 
@@ -183,10 +211,6 @@ export default ComboBox.extend({
     }
   },
 
-  muateAttributes() {
-    this.set("value", null);
-  },
-
   _searchTags(query) {
     this.startLoading();
 

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

@@ -37,7 +37,6 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   tabindex: 0,
   none: null,
   highlightedValue: null,
-  noContentLabel: "select_kit.no_content",
   valueAttribute: "id",
   nameProperty: "name",
   autoFilterable: false,
@@ -70,6 +69,8 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   allowContentReplacement: false,
   collectionHeader: null,
   allowAutoSelectFirst: true,
+  maximumSelectionSize: null,
+  maxContentRow: null,
 
   init() {
     this._super();
@@ -155,8 +156,10 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
   },
 
   @computed("filter", "filteredComputedContent.[]")
-  shouldDisplayNoContentRow(filter, filteredComputedContent) {
+  noContentRow(filter, filteredComputedContent) {
-    return filter.length > 0 && filteredComputedContent.length === 0;
+    if (filter.length > 0 && filteredComputedContent.length === 0) {
+      return I18n.t("select_kit.no_content");
+    }
   },
 
   @computed("filter", "filterable", "autoFilterable", "renderedFilterOnce")

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

@@ -40,11 +40,11 @@
       select=(action "select")
       highlight=(action "highlight")
       create=(action "create")
-      noContentLabel=noContentLabel
       highlightedValue=highlightedValue
       computedValue=computedValue
-      shouldDisplayNoContentRow=shouldDisplayNoContentRow
       rowComponentOptions=rowComponentOptions
+      noContentRow=noContentRow
+      maxContentRow=maxContentRow
     }}
   {{/if}}
 </div>

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

@@ -30,22 +30,26 @@
   }}
 {{/if}}
 
-{{#each filteredComputedContent as |computedContent|}}
+{{#if maxContentRow}}
-  {{component rowComponent
+  <li class="select-kit-row max-content">
-    computedContent=computedContent
+    {{maxContentRow}}
-    highlightedValue=highlightedValue
+  </li>
-    computedValue=computedValue
+{{else}}
-    templateForRow=templateForRow
+  {{#if noContentRow}}
-    select=select
-    highlight=highlight
-    options=rowComponentOptions
-  }}
-{{/each}}
-
-{{#if shouldDisplayNoContentRow}}
-  {{#if noContentLabel}}
     <li class="select-kit-row no-content">
-      {{i18n noContentLabel}}
+      {{noContentRow}}
     </li>
+  {{else}}
+    {{#each filteredComputedContent as |computedContent|}}
+      {{component rowComponent
+        computedContent=computedContent
+        highlightedValue=highlightedValue
+        computedValue=computedValue
+        templateForRow=templateForRow
+        select=select
+        highlight=highlight
+        options=rowComponentOptions
+      }}
+    {{/each}}
   {{/if}}
 {{/if}}

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

@@ -165,6 +165,11 @@
       white-space: nowrap;
     }
 
+    &.max-content {
+      white-space: nowrap;
+      color: $danger;
+    }
+
     .name {
       margin: 0;
       overflow: hidden;

config/locales/client.en.yml

@@ -1184,6 +1184,7 @@ en:
       no_content: No matches found
       filter_placeholder: Search...
       create: "Create: '{{content}}'"
+      max_content_reached: "You can only select {{count}} items."
 
     emoji_picker:
       filter_placeholder: Search for emoji