1 files changed, 18 insertions, 13 deletions

diff --git a/plugins/CorePluginsAdmin/vue/src/FormField/FieldTextarea.vue b/plugins/CorePluginsAdmin/vue/src/FormField/FieldTextarea.vue
index ad2610b200..521431cd8f 100644
--- a/plugins/CorePluginsAdmin/vue/src/FormField/FieldTextarea.vue
+++ b/plugins/CorePluginsAdmin/vue/src/FormField/FieldTextarea.vue
@@ -20,14 +20,16 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, nextTick } from 'vue';
+import { defineComponent } from 'vue';
 import { debounce } from 'CoreHome';
+import AbortableModifiers from './AbortableModifiers';
 
 export default defineComponent({
   props: {
     name: String,
     uiControlAttributes: Object,
     modelValue: String,
+    modelModifiers: Object,
     title: String,
   },
   inheritAttrs: false,
@@ -38,20 +40,23 @@ export default defineComponent({
   methods: {
     onKeydown(event: Event) {
       const newValue = (event.target as HTMLTextAreaElement).value;
+      if (newValue !== this.modelValue) {
+        if (!(this.modelModifiers as AbortableModifiers)?.abortable) {
+          this.$emit('update:modelValue', newValue);
+          return;
+        }
 
-      // change to previous value so the parent component can determine if this change should
-      // go through
-      (event.target as HTMLInputElement).value = this.modelValueText;
-
-      this.$emit('update:modelValue', newValue);
+        const emitEventData = {
+          value: newValue,
+          abort: () => {
+            if ((event.target as HTMLInputElement).value !== this.modelValue) {
+              (event.target as HTMLInputElement).value = this.modelValueText;
+            }
+          },
+        };
 
-      nextTick(() => {
-        if ((event.target as HTMLInputElement).value !== this.modelValueText) {
-          // change to previous value if the parent component did not update the model value
-          // (done manually because Vue will not notice if a value does NOT change)
-          (event.target as HTMLInputElement).value = this.modelValueText;
-        }
-      });
+        this.$emit('update:modelValue', emitEventData);
+      }
     },
   },
   computed: {