tags are correctly restored on the taginput

(cherry picked from commit d88bae8536)

src/components/Event/OrganizerPickerWrapper.vue

@@ -32,7 +32,7 @@
         <div class="flex-1" v-else>
           {{ `@${selectedActor.preferredUsername}` }}
         </div>
-        <o-button type="text" @click="isComponentModalActive = true">
+        <o-button @click="isComponentModalActive = true">
           {{ $t("Change") }}
         </o-button>
       </div>

src/components/Event/TagInput.vue

@@ -15,7 +15,8 @@
     </template>
     <o-taginput
       :modelValue="tagsStrings"
-      @update:modelValue="updateTags"
+      @remove="remove"
+      @add="add"
       :data="filteredTags"
       :allow-autocomplete="true"
       :allow-new="true"
@@ -69,6 +70,8 @@ const id = computed((): string => {
 
 const { load: fetchTags } = useFetchTags();
 
+initTagsStringsValue();
+
 const getFilteredTags = async (newText: string): Promise<void> => {
   text.value = newText;
   const res = await fetchTags(
@@ -91,11 +94,16 @@ const filteredTags = computed((): ITag[] => {
   );
 });
 
-watch(props.modelValue, (newValue, oldValue) => {
-  if (newValue != oldValue) {
-    tagsStrings.value = propsValue.value.map((tag: ITag) => tag.title);
+// TODO It seems that '@update:modelValue="updateTags"' does not works anymore...
+// so temporarily call the function updateTags() at remove and add tag event
+// https://github.com/oruga-ui/oruga/issues/967
+function remove() {
+  updateTags(tagsStrings.value);
+}
+
+function add() {
+  updateTags(tagsStrings.value);
 }
-});
 
 const updateTags = (newTagsStrings: string[]) => {
   const tagEntities = newTagsStrings.map((tag: string | ITag) => {
@@ -106,4 +114,34 @@ const updateTags = (newTagsStrings: string[]) => {
   });
   emit("update:modelValue", tagEntities);
 };
+
+function isArraysEquals(array1: string[], array2: string[]) {
+  if (array1.length !== array2.length) {
+    return false;
+  }
+
+  for (let i = 0; i < array1.length; i++) {
+    if (array1[i] !== array2[i]) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function initTagsStringsValue() {
+  // This is useful when tag data is already cached from the API during navigation inside the app
+  tagsStrings.value = propsValue.value.map((tag: ITag) => tag.title);
+
+  // This watch() function is useful when tag data loads directly from the API upon page load
+  watch(propsValue, () => {
+    const newTagsStrings = propsValue.value.map((tag: ITag) => tag.title);
+
+    // Changing tagsStrings.value triggers updateTags(), updateTags() triggers this watch() function again.
+    // To stop the loop, edit tagsStrings.value only if it has changed !
+    if (!isArraysEquals(tagsStrings.value, newTagsStrings)) {
+      tagsStrings.value = newTagsStrings;
+    }
+  });
+}
 </script>

src/views/Posts/EditView.vue

@@ -195,6 +195,10 @@ onMounted(async () => {
   pictureFile.value = await buildFileFromIMedia(post.value?.picture);
 });
 
+// This is useful when post data is already cached from the API during navigation inside the app
+editablePost.value = { ...editablePost.value, ...post.value };
+
+// This watch() function is useful when post data loads directly from the API upon page load
 watch(post, async (newPost: IPost | undefined, oldPost: IPost | undefined) => {
   if (oldPost?.picture !== newPost?.picture) {
     pictureFile.value = await buildFileFromIMedia(post.value?.picture);