FIX: improves tag-list setting (#9574)

- Prevents setting to display an empty tag
- Updates dropdown when selecting/removing tag

app/assets/javascripts/admin/components/site-settings/tag-list.js

@@ -1,15 +1,17 @@
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
+import { action } from "@ember/object";
 
 export default Component.extend({
   @discourseComputed("value")
   selectedTags: {
     get(value) {
-      return value.split("|");
+      return value.split("|").filter(Boolean);
-    },
-    set(value) {
-      this.set("value", value.join("|"));
-      return value;
     }
+  },
+
+  @action
+  changeSelectedTags(tags) {
+    this.set("value", tags.join("|"));
   }
 });

app/assets/javascripts/admin/templates/components/site-settings/tag-list.hbs

@@ -1,3 +1,9 @@
-{{tag-chooser tags=selectedTags allowCreate=false}}
+{{tag-chooser
+  tags=selectedTags
+  onChange=(action "changeSelectedTags")
+  options=(hash
+    allowAny=false
+  )
+}}
 <div class="desc">{{html-safe setting.description}}</div>
 {{setting-validation-message message=validationMessage}}

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

@@ -66,8 +66,12 @@ export default MultiSelectComponent.extend(TagsMixin, {
   }),
 
   actions: {
-    onChange(value) {
+    onChange(value, items) {
-      this.set("tags", value);
+      if (this.attrs.onChange) {
+        this.attrs.onChange(value, items);
+      } else {
+        this.set("tags", value);
+      }
     }
   },