[25.1] Use focus/blur to prevent prop updates from changing FormText values while typing

Fixes #21205

Author: ahmedhamidawan

client/src/components/Form/Elements/FormText.vue

@@ -8,7 +8,9 @@
                 :class="['ui-text-area', cls]"
                 :readonly="readonly"
                 :placeholder="placeholder"
-                :style="style" />
+                :style="style"
+                @focus="onFocus"
+                @blur="onBlur" />
             <b-form-input
                 v-else
                 :id="id"
@@ -19,7 +21,9 @@
                 :state="showState ? (!currentValue ? (optional ? null : false) : true) : null"
                 :style="style"
                 :type="acceptedTypes"
-                :list="`${id}-datalist`" />
+                :list="`${id}-datalist`"
+                @focus="onFocus"
+                @blur="onBlur" />
             <datalist v-if="datalist && !inputArea" :id="`${id}-datalist`">
                 <option v-for="data in datalist" :key="data.value" :label="data.label" :value="data.value" />
             </datalist>
@@ -83,25 +87,28 @@ export default {
             default: null,
         },
     },
+    data() {
+        return {
+            isFocused: false,
+            localValue: "",
+        };
+    },
     computed: {
         acceptedTypes() {
             return ["text", "password"].includes(this.type) ? this.type : "text";
         },
         currentValue: {
             get() {
-                const v = this.value ?? "";
-                if (Array.isArray(v)) {
-                    if (v.length === 0) {
-                        return "";
-                    }
-                    return this.multiple
-                        ? this.value.reduce((str_value, v) => str_value + String(v) + "\n", "")
-                        : String(this.value[0]);
+                // If focused, return local value to prevent external updates from resetting user input
+                if (this.isFocused) {
+                    return this.localValue;
                 }
-                return String(v);
+                return this.valueToString(this.value);
             },
             set(newVal, oldVal) {
                 if (newVal !== oldVal) {
+                    // Store the local value while editing
+                    this.localValue = newVal;
                     this.$emit("input", newVal);
                 }
             },
@@ -118,6 +125,45 @@ export default {
                 : null;
         },
     },
+    watch: {
+        value(newValue) {
+            // Only update localValue from prop when not focused
+            if (!this.isFocused) {
+                this.localValue = this.valueToString(newValue);
+            }
+        },
+    },
+    mounted() {
+        // Initialize localValue with the initial prop value
+        this.localValue = this.valueToString(this.value);
+    },
+    methods: {
+        /**
+         * Converts the `FormText` value to a string representation.
+         * Handles arrays for multiple inputs and single values.
+         */
+        valueToString(v) {
+            const val = v ?? "";
+            if (Array.isArray(val)) {
+                if (val.length === 0) {
+                    return "";
+                }
+                return this.multiple
+                    ? val.reduce((str_value, item) => str_value + String(item) + "\n", "")
+                    : String(val[0]);
+            }
+            return String(val);
+        },
+        onFocus() {
+            // Set focus state to prevent external updates
+            this.isFocused = true;
+        },
+        onBlur() {
+            // When field loses focus, sync with the latest prop value
+            this.isFocused = false;
+            this.localValue = this.valueToString(this.value);
+        },
+    },
 };
 </script>
 <style scoped>