✨ [#4727] Added initial value transformation cases for all value types

src/openforms/js/components/admin/form_design/form-creation-form.js

@@ -1258,14 +1258,21 @@ const FormCreationForm = ({formUuid, formUrl, formHistoryUrl, outgoingRequestsUr
     })
   );
   const onUserDefinedVariableChange = async (key, propertyName, propertyValue) => {
+    const originalVariable = state.formVariables.find(variable => variable.key === key);
+    // Just dispatch if anything other than dataType changes
+    // or if the initialValue is null/undefined
+    if (propertyName !== 'dataType' || originalVariable?.initialValue == null) {
+      dispatch({
+        type: 'CHANGE_USER_DEFINED_VARIABLE',
+        payload: {key, propertyName, propertyValue},
+      });
+      return;
+    }
+
     // Check if the dataType change is intentional.
-    // If not, cancel the dispatch
     if (
       propertyName === 'dataType' &&
-      checkIfInitialValueTransformationIsNeeded(
-        propertyValue,
-        state.formVariables.find(variable => variable.key === key)
-      ) &&
+      checkIfInitialValueTransformationIsNeeded(propertyValue, originalVariable) &&
       !(await confirmDelete())
     ) {
       return;

src/openforms/js/components/admin/form_design/utils.js

@@ -59,14 +59,31 @@ const checkKeyChange = (mutationType, newComponent, oldComponent) => {
 
 const checkIfInitialValueTransformationIsNeeded = (newType, originalVariable) => {
   // If the initialValue is null/undefined, we should transform
-  if (!originalVariable.initialValue) {
+  if (originalVariable?.initialValue == null) {
     return true;
   }
 
   switch (newType) {
     case 'array':
       // If the value isn't in array format, it should be transformd
       return !Array.isArray(originalVariable.initialValue);
+
+    case 'boolean':
+      return typeof originalVariable.initialValue !== 'boolean';
+
+    case 'object':
+      return typeof originalVariable.initialValue !== 'object';
+
+    case 'int':
+    case 'float':
+      return typeof originalVariable.initialValue !== 'number';
+
+    case 'string':
+    case 'datetime':
+    case 'date':
+    case 'time':
+      return typeof originalVariable.initialValue !== 'string';
+
     default:
       return false;
   }
@@ -75,10 +92,34 @@ const checkIfInitialValueTransformationIsNeeded = (newType, originalVariable) =>
 const transformInitialValue = (newType, originalVariable) => {
   switch (newType) {
     case 'array':
-      if (!originalVariable.initialValue || typeof originalVariable.initialValue === 'object') {
+      if (
+        originalVariable?.initialValue == null ||
+        typeof originalVariable.initialValue === 'object'
+      ) {
         return [];
       }
       return [originalVariable.initialValue];
+
+    case 'boolean':
+      return undefined;
+
+    case 'int':
+      return Number.parseInt(originalVariable.initialValue);
+
+    case 'float':
+      return Number.parseFloat(originalVariable.initialValue);
+
+    case 'object':
+      return originalVariable.initialValue == null ? {} : {value: originalVariable.initialValue};
+
+    case 'string':
+      return JSON.stringify(originalVariable.initialValue);
+
+    case 'datetime':
+    case 'date':
+    case 'time':
+      return '';
+
     default:
       return originalVariable.initialValue;
   }