fix : Meta tags input in help center clears the input value after clicking outside (#6552)

* chore: supports preserving input value after clicking out

Co-authored-by: BikashSah999 <51731962+BikashSah999@users.noreply.github.com>

* chore: supports tag addition on blur

Co-authored-by: BikashSah999 <51731962+BikashSah999@users.noreply.github.com>

* feat: use search-change instead of vue-multiselect refs

Co-authored-by: BikashSah999 <51731962+BikashSah999@users.noreply.github.com>

---------

Co-authored-by: BikashSah999 <51731962+BikashSah999@users.noreply.github.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ArticleSettings.vue

@@ -87,6 +87,9 @@
             track-by="name"
             :multiple="true"
             :taggable="true"
+            :close-on-select="false"
+            @search-change="handleSearchChange"
+            @close="onBlur"
             @tag="addTagValue"
           />
         </label>
@@ -136,6 +139,7 @@ export default {
       metaDescription: '',
       metaTags: [],
       metaOptions: [],
+      tagInputValue: '',
     };
   },
   computed: {
@@ -184,13 +188,22 @@ export default {
       }));
     },
     addTagValue(tagValue) {
-      const tag = {
+      const tags = tagValue
-        name: tagValue,
+        .split(',')
-      };
+        .map(tag => tag.trim())
-      this.metaTags.push(tag);
+        .filter(tag => tag && !this.allTags.includes(tag));
-      this.$refs.tagInput.$el.focus();
+
+      this.metaTags.push(...this.formattedTags({ tags: [...new Set(tags)] }));
       this.saveArticle();
     },
+    handleSearchChange(value) {
+      this.tagInputValue = value;
+    },
+    onBlur() {
+      if (this.tagInputValue) {
+        this.addTagValue(this.tagInputValue);
+      }
+    },
     onClickSelectCategory({ id }) {
       this.$emit('save-article', { category_id: id });
     },