[25.1] Add conditional debounce to FormText to prevent value resetting

We have a bug where in the workflow editor, while typing in a text form element, the value can get unexpectedly trimmed or reset because of the `build_module` API call updating the values. Adding a debounce of 1 second solves this problem; as we now wait for the user to type out their entire value first.

This debounce is set if the `workflowBuildingMode` prop is set for `FormElement`.

Fixes #21205

Author: ahmedhamidawan

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

@@ -13,6 +13,7 @@
             :placeholder="placeholder"
             :multiple="multiple"
             :datalist="datalist"
+            :debounce="debounce"
             :type="type" />
     </div>
 </template>
@@ -59,6 +60,10 @@ export default {
             type: Array,
             default: null,
         },
+        debounce: {
+            type: Number,
+            default: 0,
+        },
     },
     data() {
         return {

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

@@ -6,6 +6,7 @@
                 :id="id"
                 v-model="currentValue"
                 :class="['ui-text-area', cls]"
+                :debounce="debounce"
                 :readonly="readonly"
                 :placeholder="placeholder"
                 :style="style" />
@@ -14,6 +15,7 @@
                 :id="id"
                 v-model="currentValue"
                 :class="['ui-input', cls]"
+                :debounce="debounce"
                 :readonly="readonly"
                 :placeholder="placeholder"
                 :state="showState ? (!currentValue ? (optional ? null : false) : true) : null"
@@ -82,6 +84,10 @@ export default {
             type: Array,
             default: null,
         },
+        debounce: {
+            type: Number,
+            default: 0,
+        },
     },
     computed: {
         acceptedTypes() {

client/src/components/Form/FormElement.vue

@@ -393,6 +393,7 @@ const extendedCollectionType = computed<ExtendedCollectionType>(() => {
                     :placeholder="computedPlaceholder"
                     :multiple="attrs.multiple"
                     :datalist="attrs.datalist"
+                    :debounce="'debounce' in attrs ? attrs.debounce : props.workflowBuildingMode ? 1000 : 0"
                     :type="props.type" />
                 <FormText
                     v-else-if="
@@ -413,6 +414,7 @@ const extendedCollectionType = computed<ExtendedCollectionType>(() => {
                     :multiple="attrs.multiple"
                     :cls="attrs.cls"
                     :datalist="attrs.datalist"
+                    :debounce="'debounce' in attrs ? attrs.debounce : props.workflowBuildingMode ? 1000 : 0"
                     :type="props.type" />
                 <FormSelection
                     v-else-if="

client/src/components/Workflow/Editor/Forms/FormColumnDefinition.vue

@@ -206,6 +206,7 @@ watch(defaultString, setDefaultByType);
             type="text"
             :error="nameError"
             help="Provide a short, unique name to describe this column."
+            workflow-building-mode
             @input="onName" />
         <FormColumnDefinitionType :value="value.type" :prefix="prefix" @onChange="onType" />
         <FormElement
@@ -215,6 +216,7 @@ watch(defaultString, setDefaultByType);
             title="Description"
             type="text"
             help="Provide a longer description to help people running this workflow under what is expected to be entered in this column."
+            workflow-building-mode
             @input="onDescription" />
         <FormElement
             v-if="value.type == 'string'"
@@ -224,6 +226,7 @@ watch(defaultString, setDefaultByType);
             title="Restrict or Suggest Text Values?"
             :optional="false"
             type="select"
+            workflow-building-mode
             @input="onEnumerateType" />
         <FormElement
             v-if="value.type == 'string' && enumerateType == 'staticRestrictions'"
@@ -232,6 +235,7 @@ watch(defaultString, setDefaultByType);
             title="Restricted Values"
             type="text"
             help="Comma-separated list of all permitted values"
+            workflow-building-mode
             @input="onRestrictions" />
         <FormElement
             v-if="value.type == 'string' && enumerateType == 'staticSuggestions'"
@@ -240,6 +244,7 @@ watch(defaultString, setDefaultByType);
             title="Suggested Values"
             type="text"
             help="Comma-separated list of all suggested values"
+            workflow-building-mode
             @input="onSuggestions" />
         <BFormCheckbox :id="prefix + '_optional'" v-model="isOptional"> Is this input optional? </BFormCheckbox>
         <div class="ui-form-title">
@@ -249,23 +254,27 @@ watch(defaultString, setDefaultByType);
             v-if="value.type == 'int'"
             :id="prefix + '_default_value'"
             v-model="defaultIntAsStr"
-            type="integer" />
+            type="integer"
+            workflow-building-mode />
         <FormElement
             v-if="value.type == 'float'"
             :id="prefix + '_default_value'"
             v-model="defaultFloatAsStr"
-            type="float" />
+            type="float"
+            workflow-building-mode />
         <FormElement
             v-if="value.type == 'string'"
             :id="prefix + '_default_value'"
             v-model="defaultString"
-            type="text" />
+            type="text"
+            workflow-building-mode />
         <FormElement
             v-if="value.type == 'boolean'"
             :id="prefix + '_default_value'"
             v-model="defaultBoolean"
             :attributes="{ data: booleanOptions }"
-            type="select" />
+            type="select"
+            workflow-building-mode />
 
         <!--
         TODO: There are more fields to enter here including validations that vary based on the type chosen. There will

client/src/components/Workflow/Editor/Forms/FormDefault.vue

@@ -55,6 +55,7 @@
                 :id="formDisplayId"
                 :key="formKey"
                 :inputs="configForm.inputs"
+                workflow-building-mode
                 @onChange="onChange" />
             <div v-if="isSubworkflow">
                 <FormOutputLabel

client/src/components/Workflow/Editor/Forms/FormInputCollection.vue

@@ -141,6 +141,7 @@ emit("onChange", cleanToolState());
             :optional="true"
             type="text"
             help="Tags to automatically filter inputs"
+            workflow-building-mode
             @input="onTags" />
         <FormColumnDefinitions
             v-if="isSampleSheetType"

client/src/components/Workflow/Editor/Forms/FormRecordFieldDefinition.vue

@@ -39,6 +39,7 @@ function onType(newType: FieldType) {
             title="Name"
             type="text"
             help="Provide a short, unique name to describe this field."
+            workflow-building-mode
             @input="onName" />
         <FormFieldType :prefix="prefix" :value="value.type" @onChange="onType" />
     </div>