fix: regression in bfa92e8 caused typeUserAttrs of type string to not…

… load formData
kevinchappell · Mar 4, 2024 · 3f899c8 · 3f899c8
1 parent 98f6abf
commit 3f899c8
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 2 deletions.
diff --git a/src/js/form-builder.js b/src/js/form-builder.js
@@ -704,14 +704,14 @@ function FormBuilder(opts, element, $) {
           const tUA = typeUserAttr[attribute]
           let origValue = tUA.value
           if (attrValType === 'boolean') {
-            origValue = tUA.value
             tUA[attribute] ??= tUA.value
           } else if (attrValType === 'number') {
             tUA[attribute] ??= firstNumberOrUndefined(values[attribute], origValue)
           } else {
             origValue ??= ''
             tUA[attribute] ??= values[attribute] || origValue
           }
+          tUA.value = tUA[attribute]
 
           if (tUA.label) {
             i18n[attribute] = Array.isArray(tUA.label) ? mi18n.get(...tUA.label) || tUA.label[0] : tUA.label
@@ -750,7 +750,7 @@ function FormBuilder(opts, element, $) {
       name: name,
       type: attrs.type || 'text',
       className: [`fld-${name}`, (classname || className || '').trim()],
-      value: attrs.value || '',
+      value: attrs.hasOwnProperty(name) ? attrs[name] : attrs.value || '',
     }
     const label = `<label for="${textAttrs.id}">${i18n[name] || ''}</label>`
 

diff --git a/tests/form-builder.test.js b/tests/form-builder.test.js
@@ -406,6 +406,111 @@ describe('FormBuilder typeUserAttrs detection', () => {
     const auto = fbWrap.find('.form-field[type="autocomplete"] .prev-holder .form-group')
     expect(auto.find('[class*=row-],[class*=col-]')).toHaveLength(0)
   })
+  test('can load formData for string typeUserAttr into stage', async() => {
+    const config = {
+      typeUserAttrs: {
+        '*': {
+          testStringAttribute: {
+            label: 'testString',
+            value: 'default',
+          },
+        },
+      },
+    }
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder(config).promise
+    fb.actions.setData([
+      {
+        type: 'text',
+        testStringAttribute: 'findme',
+      }
+    ])
+
+    const input = fbWrap.find('.text-field .testStringAttribute-wrap input')
+    expect(input.attr('type')).toBe('text')
+    expect(input.val()).toBe('findme')
+  })
+  test('can load formData for number typeUserAttr into stage', async() => {
+    const config = {
+      typeUserAttrs: {
+        '*': {
+          testNumberAttribute: {
+            label: 'testNumber',
+            type: 'number',
+            value: 0,
+          },
+        },
+      },
+    }
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder(config).promise
+    fb.actions.setData([
+      {
+        type: 'text',
+        testNumberAttribute: 2,
+      }
+    ])
+
+    const input = fbWrap.find('.text-field .testNumberAttribute-wrap input')
+    expect(input.attr('type')).toBe('number')
+    expect(input.val()).toBe('2')
+  })
+  test('can load formData for checkbox typeUserAttr into stage', async() => {
+    const config = {
+      typeUserAttrs: {
+        '*': {
+          testCheckboxAttribute: {
+            label: 'readonly',
+            value: false,
+            type: 'checkbox',
+          }
+        },
+      },
+    }
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder(config).promise
+    fb.actions.setData([
+      {
+        type: 'text',
+        testCheckboxAttribute: true,
+      }
+    ])
+
+    const input = fbWrap.find('.text-field .testCheckboxAttribute-wrap input')
+    expect(input.attr('type')).toBe('checkbox')
+    expect(input.prop('checked')).toBeTruthy()
+  })
+  test('can load formData with value for select typeUserAttr into stage', async() => {
+    const config = {
+      typeUserAttrs: {
+        '*': {
+          testSelectAttribute: {
+            label: 'Class', // i18n support by passing and array eg. ['optionCount', {count: 3}]
+            multiple: true, // optional, omitting generates normal <select>
+            options: {
+              'red form-control': 'Red',
+              'green form-control': 'Green',
+              'blue form-control': 'Blue'
+            },
+            style: 'border: 1px solid red',
+            value: 'Red',
+          }
+        },
+      },
+    }
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder(config).promise
+    fb.actions.setData([
+      {
+        type: 'text',
+        testSelectAttribute: 'green form-control',
+      }
+    ])
+
+    const input = fbWrap.find('.text-field .testSelectAttribute-wrap select')
+    expect(input.length).toBe(1)
+    expect(input.val()).toEqual(['green form-control'])
+  })
 })
 
 describe('FormBuilder can return formData', () => {