From b12849abde80c6029931cf809f43b60f834d2129 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Tue, 10 Sep 2024 11:14:20 -0300
Subject: [PATCH] Fixes to value update logic in text-based metadata inputs.

---
 .../components/metadata-types/text/TainacanText.vue | 11 +++++++----
 .../metadata-types/textarea/TainacanTextarea.vue    | 11 ++++++++++-
 .../components/metadata-types/url/TainacanUrl.vue   | 13 +++++++++----
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/views/admin/components/metadata-types/text/TainacanText.vue b/src/views/admin/components/metadata-types/text/TainacanText.vue
index e1aa123f4..d3f71dcee 100644
--- a/src/views/admin/components/metadata-types/text/TainacanText.vue
+++ b/src/views/admin/components/metadata-types/text/TainacanText.vue
@@ -8,7 +8,7 @@
                     v-imask="getMask"
                     class="input"
                     :disabled="disabled"
-                    :value="value"
+                    :value="localValue"
                     :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
                     :maxlength="getMaxlength"
                     @focus="onMobileSpecialFocus"
@@ -16,17 +16,17 @@
                     @input="($event) => getMask ? null : onInput($event.target.value)"
                     @blur="onBlur">
             <small
-                    v-if="value && getMaxlength"
+                    v-if="localValue && getMaxlength"
                     class="help counter"
                     :class="{ 'is-invisible': !isInputFocused }">
-                {{ value.length }} / {{ getMaxlength }}
+                {{ localValue.length }} / {{ getMaxlength }}
             </small>
         </div>
         <b-autocomplete
                 v-else
                 :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
                 :disabled="disabled"
-                :model-value="value"
+                :model-value="localValue"
                 :data="options"
                 :loading="isLoadingOptions"
                 field="label"
@@ -80,6 +80,7 @@
         ],
         data() {
             return {
+                localValue: '',
                 selected:'',
                 options: [],
                 label: '',
@@ -120,6 +121,7 @@
             // These values are set to allow the usage of the getValuesPlainText function from the DynamicFilterTypeMixin
             this.currentCollectionId = this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.collection_id ? this.itemMetadatum.metadatum.collection_id : null;
             this.filter = { collection_id: this.currentCollectionId };
+            this.localValue = this.value ? JSON.parse(JSON.stringify(this.value)) : '';
         },
         methods: {
             onInput(value) {
@@ -127,6 +129,7 @@
                 if ( inputRef && this.getMaxlength && !inputRef.checkHtml5Validity() )
                     return;
 
+                this.localValue = value;
                 this.changeValue(value);
             },
             changeValue: _.debounce(function(value) {
diff --git a/src/views/admin/components/metadata-types/textarea/TainacanTextarea.vue b/src/views/admin/components/metadata-types/textarea/TainacanTextarea.vue
index c802f9af7..1ec63f6c2 100644
--- a/src/views/admin/components/metadata-types/textarea/TainacanTextarea.vue
+++ b/src/views/admin/components/metadata-types/textarea/TainacanTextarea.vue
@@ -4,7 +4,7 @@
             :ref="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
             :disabled="disabled"
             :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : ''"
-            :model-value="value"
+            :model-value="localValue"
             type="textarea"
             :maxlength="getMaxlength"
             @update:model-value="onInput($event)"
@@ -24,6 +24,11 @@
             'blur',
             'mobile-special-focus'
         ],
+        data() {
+            return {
+                localValue: ''
+            }
+        },
         computed: {
             getMaxlength() {
                 if ( this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== null && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== undefined && this.itemMetadatum.metadatum.metadata_type_options.maxlength !== '' )
@@ -32,12 +37,16 @@
                     return undefined;
             }
         },
+        created() {
+            this.localValue = this.value ? JSON.parse(JSON.stringify(this.value)) : '';
+        },
         methods: {
             onInput(value) {
                 const inputRef = this.$refs['tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '')];
                 if ( inputRef && this.getMaxlength && !inputRef.checkHtml5Validity() )
                     return;
 
+                this.localValue = value;
                 this.changeValue(value);
             },
             changeValue: _.debounce(function(value) {
diff --git a/src/views/admin/components/metadata-types/url/TainacanUrl.vue b/src/views/admin/components/metadata-types/url/TainacanUrl.vue
index 4514248d7..e1f8d652b 100644
--- a/src/views/admin/components/metadata-types/url/TainacanUrl.vue
+++ b/src/views/admin/components/metadata-types/url/TainacanUrl.vue
@@ -3,7 +3,7 @@
         <b-input 
                 :id="'tainacan-item-metadatum_id-' + itemMetadatum.metadatum.id + (itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + itemMetadatum.parent_meta_id) : '')"
                 :disabled="disabled"
-                :model-value="value"
+                :model-value="localValue"
                 :placeholder="itemMetadatum.metadatum.placeholder ? itemMetadatum.metadatum.placeholder : '[link](https://url.com)'"
                 @update:model-value="($event) => onInput($event)"
                 @blur="onBlur" />
@@ -11,7 +11,7 @@
                 v-if="itemMetadatum.item.id"
                 class="add-new-term">
             <a
-                    v-if="value"
+                    v-if="localValue"
                     class="add-link"
                     @click="previewHtml">
                 <span class="icon">
@@ -39,15 +39,20 @@ export default {
     emits: [ 'update:value', 'blur' ],
     data() {
         return {
+            localValue: '',
             isPreviewingHtml: false,
             singleHTMLPreview: ''
         }
     },
+    created() {
+        this.localValue = this.value ? JSON.parse(JSON.stringify(this.value)) : '';
+    },
     methods: {
         onInput(value) {
             this.isPreviewingHtml = false;
             this.singleHTMLPreview = '';
             
+            this.localValue = value;
             this.changeValue(value);
         },
         changeValue: _.debounce(function(value) {
@@ -63,7 +68,7 @@ export default {
         },
         previewHtml() {
             // If we are going to display preview, renders it
-            if (!this.isPreviewingHtml) {
+            if ( !this.isPreviewingHtml ) {
 
                 // Multivalued metadata need to be split as the values_as_html shows every value
                 if (this.itemMetadatum.metadatum.multiple == 'yes') {
@@ -71,7 +76,7 @@ export default {
                     const valuesAsHtml = this.createElementFromHTML(this.itemMetadatum.value_as_html);
                     const valuesAsArray = Object.values(valuesAsHtml.children).filter((aValue) => aValue.outerHTML != '<span class="multivalue-separator"> | </span>');
 
-                    const singleValueIndex = this.itemMetadatum.value.findIndex((aValue) => aValue == this.value);
+                    const singleValueIndex = this.itemMetadatum.value.findIndex((aValue) => aValue == this.localValue);
 
                     if (singleValueIndex >= 0)
                     this.singleHTMLPreview = valuesAsArray[singleValueIndex].outerHTML;