FIX: improves handling of filter with invalid tag chars (#17640)

Tags mixin is already filtering a lot of data from the user submitted filter in `createContentFromInput()` which can lead to sk receiving an empty filter while the input actually has a value.

app/assets/javascripts/discourse/tests/integration/components/select-kit/mini-tag-chooser-test.js

@@ -1,7 +1,7 @@
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { render } from "@ember/test-helpers";
-import { query, queryAll } from "discourse/tests/helpers/qunit-helpers";
+import { exists, query, queryAll } from "discourse/tests/helpers/qunit-helpers";
 import I18n from "I18n";
 import { hbs } from "ember-cli-htmlbars";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
@@ -93,5 +93,37 @@ module(
         I18n.t("select_kit.filter_placeholder")
       );
     });
+
+    test("creating a tag using invalid character", async function (assert) {
+      await render(hbs`<MiniTagChooser @options={{hash allowAny=true}} />`);
+      await this.subject.expand();
+      await this.subject.fillInFilter("#");
+
+      assert.notOk(exists(".select-kit-error"), "it doesn’t show any error");
+      assert.notOk(
+        exists(".select-kit-row[data-value='#']"),
+        "it doesn’t allow to create this tag"
+      );
+
+      await this.subject.fillInFilter("test");
+
+      assert.equal(this.subject.filter().value(), "#test");
+      assert.ok(
+        exists(".select-kit-row[data-value='test']"),
+        "it filters out the invalid char from the suggested tag"
+      );
+    });
+
+    test("creating a tag over the length limit", async function (assert) {
+      this.siteSettings.max_tag_length = 1;
+      await render(hbs`<MiniTagChooser @options={{hash allowAny=true}} />`);
+      await this.subject.expand();
+      await this.subject.fillInFilter("foo");
+
+      assert.ok(
+        exists(".select-kit-row[data-value='f']"),
+        "it forces the max length of the tag"
+      );
+    });
   }
 );

app/assets/javascripts/select-kit/addon/mixins/tags.js

@@ -25,6 +25,10 @@ export default Mixin.create({
   allowAnyTag: reads("site.can_create_tag"),
 
   validateCreate(filter, content) {
+    if (!filter.length) {
+      return;
+    }
+
     const maximum = this.selectKit.options.maximum;
     if (maximum && makeArray(this.value).length >= parseInt(maximum, 10)) {
       this.addError(
@@ -42,18 +46,6 @@ export default Mixin.create({
       return false;
     }
 
-    if (
-      !filter.length ||
-      this.get("siteSettings.max_tag_length") < filter.length
-    ) {
-      this.addError(
-        I18n.t("select_kit.invalid_selection_length", {
-          count: `[1 - ${this.get("siteSettings.max_tag_length")}]`,
-        })
-      );
-      return false;
-    }
-
     const toLowerCaseOrUndefined = (string) => {
       return isEmpty(string) ? undefined : string.toLowerCase();
     };

config/locales/client.en.yml

@@ -2106,9 +2106,6 @@ en:
       min_content_not_reached:
         one: "Select at least %{count} item."
         other: "Select at least %{count} items."
-      invalid_selection_length:
-        one: "Selection must be at least %{count} character."
-        other: "Selection must be at least %{count} characters."
       components:
         tag_drop:
           filter_for_more: Filter for more...