[3.x] #1957: Fix keepalive.

frontend/js/components/BrowserField.vue

@@ -195,6 +195,9 @@
         } else {
           this.$root.$refs.browser.open(this.endpoints.length <= 0)
         }
+      },
+      destroyValue: function () {
+        this.deleteAll()
       }
     },
     watch: {

frontend/js/components/ConnectorField.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <template v-if="!keepAlive">
-      <div v-if="open">
+      <div v-if="open" ref="fieldContainer">
         <slot></slot>
       </div>
     </template>
@@ -81,6 +81,32 @@
     },
     methods: {
       toggleVisibility: function (value) {
+
+        if (this.$refs.fieldContainer) {
+          this.$slots.default.forEach((child) => {
+            // Base input fields.
+            if (
+              child.componentInstance !== undefined &&
+              child.componentInstance.$refs &&
+              child.componentInstance.$refs.field
+            ) {
+              if (child.componentInstance.$refs.field[0]) {
+                child.componentInstance.$refs.field[0].destroyValue()
+              }
+            }
+            // Special fields such as browsers.
+            else if (
+              child.componentInstance !== undefined
+            ) {
+              child.componentInstance.$slots.default.forEach((subChild) => {
+                if (subChild.componentInstance.destroyValue) {
+                  subChild.componentInstance.destroyValue()
+                }
+              })
+            }
+          })
+        }
+
         if (this.isBrowser) {
           const browserLength = (value && value.length) ?? 0
           if (this.matchEmptyBrowser && (browserLength === 0)) {

frontend/js/components/LocaleField.vue

@@ -10,6 +10,7 @@
             :name="`${attributes.name}[${language.value}]`"
             :fieldName="attributes.name"
             :locale="language"
+            ref="field"
             @localize="updateLocale"
             @change="updateValue(language.value, ...arguments)"
             @blur="$emit('blur')"
@@ -22,6 +23,7 @@
     <template v-else>
       <component v-bind:is="`${type}`"
                  :name="attributes.name"
+                 ref="field"
                  v-bind="attributesNoLang()"
                  @change="updateValue(false, ...arguments)"
                  @blur="$emit('blur')"

frontend/js/components/MediaField.vue

@@ -523,6 +523,10 @@
       metadatasInfos: function () {
         this.metadatas.active = !this.metadatas.active
         this.metadatas.text = this.metadatas.active ? this.metadatas.textClose : this.metadatas.textOpen
+      },
+      destroyValue: function () {
+        if (this.isSlide) return // for Slideshows : the medias are deleted when the slideshow component is destroyed (so no need to do it here)
+        if (!this.isDestroyed) this.deleteMedia()
       }
     },
     beforeMount: function () {

frontend/js/components/Slideshow.vue

@@ -110,6 +110,10 @@
       deleteSlideshow: function () {
         // destroy all the medias of the slideshow
         this.$store.commit(MEDIA_LIBRARY.DESTROY_MEDIAS, this.name)
+      },
+      destroyValue: function () {
+        if (this.isSlide) return // for Slideshows : the medias are deleted when the slideshow component is destroyed (so no need to do it here)
+        if (!this.isDestroyed) this.deleteMedia()
       }
     }
   }

frontend/js/components/files/FileField.vue

@@ -133,6 +133,9 @@
           name: this.name,
           index: index
         })
+      },
+      destroyValue: function () {
+        this.deleteAll()
       }
     }
   }

frontend/js/mixins/formStore.js

@@ -77,6 +77,13 @@ export default {
     },
     allowSubmit: function () {
       this.$store.commit(FORM.ALLOW_SUBMIT)
+    },
+    destroyValue: function () {
+      if (this.inStore !== '') {
+        // Delete form field from store because the field has been removed
+        if (this.inModal) this.$store.commit(FORM.REMOVE_MODAL_FIELD, this.getFieldName())
+        else this.$store.commit(FORM.REMOVE_FORM_FIELD, this.getFieldName())
+      }
     }
   },
   beforeMount: function () {