Fix multi value field changes not re-evaluating conditional fields

client/web/compose/src/components/ModuleFields/Editor/DateTime.vue

@@ -40,7 +40,7 @@
       :errors="errors"
     >
       <c-input-date-time
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         :no-date="field.options.onlyTime"
         :no-time="field.options.onlyDate"
         :only-future="field.options.onlyFutureValues"
@@ -51,6 +51,7 @@
           now: $t('general:label.now'),
           today: $t('general:label.today'),
         }"
+        @input="setMultiValue($event, ctx.index)"
       />
     </multi>
 

client/web/compose/src/components/ModuleFields/Editor/Email.vue

@@ -40,9 +40,10 @@
       :errors="errors"
     >
       <b-form-input
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         type="email"
         class="mr-2"
+        @input="setMultiValue($event, ctx.index)"
       />
     </multi>
 

client/web/compose/src/components/ModuleFields/Editor/Number.vue

@@ -44,11 +44,12 @@
         :append="field.options.suffix"
       >
         <b-form-input
-          v-model="value[ctx.index]"
+          :value="value[ctx.index]"
           autocomplete="off"
           type="number"
           number
           class="mr-2"
+          @input="setMultiValue($event, ctx.index)"
         />
       </b-input-group>
     </multi>

client/web/compose/src/components/ModuleFields/Editor/Record.vue

@@ -101,7 +101,6 @@
           :get-option-label="getOptionLabel"
           :disabled="!module"
           :loading="processing"
-          :clearable="false"
           :filterable="false"
           :searchable="searchable"
           :selectable="isSelectable"
@@ -338,6 +337,8 @@ export default {
           }
         }
       }
+
+      this.$emit('change', this.value)
     },
 
     isSelectable ({ recordID } = {}) {
@@ -510,6 +511,8 @@ export default {
       if (this.$refs.singleSelect) {
         this.$refs.singleSelect._data._value = undefined
       }
+
+      this.$emit('change', this.value)
     },
 
     goToPage (next = true) {

client/web/compose/src/components/ModuleFields/Editor/Select.vue

@@ -76,12 +76,13 @@
         <template #default="ctx">
           <c-input-select
             v-if="field.options.selectType === 'each'"
-            v-model="value[ctx.index]"
+            :value="value[ctx.index]"
             :options="selectOptions"
             :reduce="o => o.value"
             :placeholder="$t('kind.select.placeholder')"
             :selectable="isSelectable"
             label="text"
+            @input="setMultiValue($event, ctx.index)"
           />
 
           <span v-else>{{ findLabel(value[ctx.index]) }}</span>

client/web/compose/src/components/ModuleFields/Editor/String.vue

@@ -42,20 +42,23 @@
     >
       <c-rich-text-input
         v-if="field.options.useRichTextEditor"
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         class="mr-2"
+        @input="setMultiValue($event, ctx.index)"
       />
 
       <b-form-textarea
         v-else-if="field.options.multiLine"
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         class="mr-2"
+        @input="setMultiValue($event, ctx.index)"
       />
 
       <b-form-input
         v-else
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         class="mr-2"
+        @input="setMultiValue($event, ctx.index)"
       />
     </multi>
 

client/web/compose/src/components/ModuleFields/Editor/Url.vue

@@ -39,12 +39,13 @@
       :errors="errors"
     >
       <b-form-input
-        v-model="value[ctx.index]"
+        :value="value[ctx.index]"
         type="url"
         class="mr-2"
         :placeholder="$t('kind.url.example')"
         :formatter="fixUrl"
         lazy-formatter
+        @input="setMultiValue($event, ctx.index)"
       />
     </multi>
     <template

client/web/compose/src/components/ModuleFields/Editor/User.vue

@@ -323,6 +323,8 @@ export default {
           this.value = undefined
         }
       }
+
+      this.$emit('change', this.value)
     },
 
     /**

client/web/compose/src/components/ModuleFields/Editor/base.vue

@@ -145,6 +145,12 @@ export default {
     getFieldCypressId (field) {
       return `field-${field.toLowerCase().split(' ').join('-')}`
     },
+
+    setMultiValue (value, index) {
+      this.$set(this.value, index, value)
+
+      this.$emit('change', this.value)
+    },
   },
 }
 </script>

client/web/compose/src/components/ModuleFields/Editor/multi.vue

@@ -15,7 +15,7 @@
       <div
         v-for="(v, index) of val"
         :key="index"
-        class="d-flex w-100 align-items-center mb-1"
+        class="d-flex w-100 align-items-center mb-1 px-2"
       >
         <font-awesome-icon
           v-b-tooltip.noninteractive.hover="{ title: $t('tooltip.dragAndDrop'), container: '#body' }"
@@ -47,7 +47,7 @@
       variant="primary"
       size="sm"
       :class="{ 'mt-2': val.length }"
-      @click="val.push(defaultValue)"
+      @click="addValue()"
     >
       + {{ $t('label.addValue') }}
     </b-button>
@@ -114,13 +114,20 @@ export default {
   },
 
   methods: {
+    addValue () {
+      this.val.push(this.defaultValue)
+
+      this.$emit('update:value', this.val)
+    },
+
     removeValue (index) {
       if (index > -1) {
         this.val.splice(index, 1)
       }
+
+      this.$emit('update:value', this.val)
     },
   },
-
 }
 </script>
 <style lang="scss" scoped>