FIX: ensures mini-tag-chooser is respecting max_tags_per_topic (#9018)

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

@@ -39,7 +39,7 @@ export default ComboBox.extend(TagsMixin, {
     everyTag: false,
     none: "tagging.choose_for_topic",
     closeOnChange: false,
-    maximum: 10,
+    maximum: "maximumSelectedTags",
     autoInsertNoneItem: false
   },
 
@@ -91,8 +91,6 @@ export default ComboBox.extend(TagsMixin, {
   }),
 
   modifySelection(content) {
-    let joinedTags = makeArray(this.value).join(", ");
-
     const minimum = this.selectKit.options.minimum;
     if (minimum && makeArray(this.value).length < parseInt(minimum, 10)) {
       const key =
@@ -101,7 +99,8 @@ export default ComboBox.extend(TagsMixin, {
       const label = I18n.t(key, { count: this.selectKit.options.minimum });
       content.title = content.name = content.label = label;
     } else {
-      content.title = content.name = content.value = content.label = joinedTags;
+      content.name = content.value = makeArray(this.value).join(",");
+      content.title = content.label = makeArray(this.value).join(", ");
 
       if (content.label.length > 32) {
         content.label = `${content.label.slice(0, 32)}...`;

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

@@ -0,0 +1,63 @@
+import componentTest from "helpers/component-test";
+import { testSelectKitModule } from "./select-kit-test-helper";
+
+testSelectKitModule("mini-tag-chooser");
+
+function template() {
+  return `{{mini-tag-chooser value=value}}`;
+}
+
+componentTest("displays tags", {
+  template: template(),
+
+  beforeEach() {
+    this.set("value", ["foo", "bar"]);
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().value(), "foo,bar");
+  }
+});
+
+componentTest("create a tag", {
+  template: template(),
+
+  beforeEach() {
+    this.set("value", ["foo", "bar"]);
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().value(), "foo,bar");
+
+    await this.subject.expand();
+    await this.subject.fillInFilter("monkey");
+    await this.subject.keyboard("enter");
+
+    assert.equal(this.subject.header().value(), "foo,bar,monkey");
+  }
+});
+
+componentTest("max_tags_per_topic", {
+  template: template(),
+
+  beforeEach() {
+    this.set("value", ["foo", "bar"]);
+    this.siteSettings.max_tags_per_topic = 2;
+  },
+
+  async test(assert) {
+    assert.equal(this.subject.header().value(), "foo,bar");
+
+    await this.subject.expand();
+    await this.subject.fillInFilter("baz");
+    await this.subject.keyboard("enter");
+
+    const error = find(".select-kit-error").text();
+    assert.equal(
+      error,
+      I18n.t("select_kit.max_content_reached", {
+        count: this.siteSettings.max_tags_per_topic
+      })
+    );
+  }
+});