Fix formRender removing a valid empty userData array

src/js/form-render.js

@@ -146,7 +146,7 @@ class FormRender {
    * @return {Object} sanitized field object
    */
   sanitizeField(field, instanceIndex) {
-    const sanitizedField = Object.assign({}, field)
+    let sanitizedField = Object.assign({}, field)
     if (instanceIndex) {
       sanitizedField.id = field.id && `${field.id}-${instanceIndex}`
       sanitizedField.name = field.name && `${field.name}-${instanceIndex}`
@@ -156,9 +156,13 @@ class FormRender {
       : field.className || field.class || null
     delete sanitizedField.class
     if (field.values) {
-      field.values = field.values.map(option => utils.trimObj(option))
+      sanitizedField.values = field.values.map(option => utils.trimObj(option))
     }
-    return utils.trimObj(sanitizedField)
+    sanitizedField = utils.trimObj(sanitizedField)
+    if (Array.isArray(field.userData) && field.userData.length === 0) {
+      sanitizedField.userData = [] //Special handler for allowing userData to be empty
+    }
+    return sanitizedField
   }
 
   /**

src/js/utils.js

@@ -14,7 +14,7 @@ window.fbEditors = {
 }
 
 /**
- * Remove null or undefined values from an object, original object is not modified
+ * Remove null, undefined, empty string or empty array values from an object, original object is not modified
  * @param  {Object} obj {attrName: attrValue}
  * @param {boolean} [removeFalse=false] Remove values === false
  * @return {Object} Object trimmed of null or undefined values

tests/form-render.test.js

@@ -114,7 +114,7 @@ describe('Form Rendering', () => {
     expect(textarea).not.toHaveLength(0)
   })
 
-  test('check userData when no value set', () => {
+  test('check userData returned when no default value set', () => {
     const container = $('<div>')
     const formData = [
       {type: 'textarea', name: 'input-textarea'},
@@ -139,4 +139,29 @@ describe('Form Rendering', () => {
     expect(userData['input-select']).toStrictEqual([])
     expect(userData['input-select-multiple']).toStrictEqual([])
   })
+
+  test('check default values can be overridden by no value userData', () => {
+    const container = $('<div>')
+    const formData = [
+      {type: 'textarea', name: 'input-textarea', value: 'default', userData: ['']},
+      {type: 'text', name: 'input-text', value: 'default', userData: ['']},
+      {type: 'checkbox-group', name: 'input-checkbox-group', 'values': [ { 'label': 'O', 'value': 'option-1', 'selected': true }, ], userData: []},
+      //@Note Radio-buttons cannot be deselected, userData: [] should only be seen when no radio selected
+      {type: 'select', name: 'input-select', placeholder: 'Select...', 'values': [ { 'label': 'O', 'value': 'option-1', 'selected': true }, ], userData: []},
+      {type: 'select', name: 'input-select-multiple', placeholder: 'Select...', multiple: true, 'values': [ { 'label': 'O', 'value': 'option-1', 'selected': true }, ], userData: []},
+    ]
+    container.formRender({ formData })
+
+    const userData = {}
+
+    container.formRender('userData').forEach(elem => {
+      userData[elem.name] = elem.userData
+    })
+
+    expect(userData['input-textarea']).toStrictEqual([''])
+    expect(userData['input-text']).toStrictEqual([''])
+    expect(userData['input-checkbox-group']).toStrictEqual([])
+    expect(userData['input-select']).toStrictEqual([])
+    expect(userData['input-select-multiple']).toStrictEqual([])
+  })
 })