fix: restoring value of typeUserAttr select with attributeName className

kevinchappell · Mar 11, 2024 · f5a361a · f5a361a
1 parent f09db16
commit f5a361a
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 8 deletions.
diff --git a/src/js/form-builder.js b/src/js/form-builder.js
@@ -784,14 +784,14 @@ function FormBuilder(opts, element, $) {
    */
   function selectUserAttrs(name, fieldData) {
     const { multiple, options, label: labelText, value, class: classname, className, ...restData } = fieldData
+    const selectValues = fieldData.hasOwnProperty(name) ? fieldData[name] : value || []
     const optis = Object.keys(options).map(val => {
       const attrs = { value: val }
       const optionTextVal = options[val]
       const optionText = Array.isArray(optionTextVal) ? mi18n.get(...optionTextVal) || optionTextVal[0] : optionTextVal
-      if (Array.isArray(value) ? value.includes(val) : val === value) {
-        attrs.selected = null
+      if (Array.isArray(selectValues) ? selectValues.includes(val) : val === selectValues) {
+        attrs.selected = true
       }
-
       return m('option', optionText, attrs)
     })
 

diff --git a/tests/form-builder.test.js b/tests/form-builder.test.js
@@ -485,15 +485,15 @@ describe('FormBuilder typeUserAttrs detection', () => {
       typeUserAttrs: {
         '*': {
           testSelectAttribute: {
-            label: 'Class', // i18n support by passing and array eg. ['optionCount', {count: 3}]
-            multiple: true, // optional, omitting generates normal <select>
+            label: 'Test Select',
+            multiple: false,
             options: {
               'red form-control': 'Red',
               'green form-control': 'Green',
               'blue form-control': 'Blue'
             },
             style: 'border: 1px solid red',
-            value: 'Red',
+            value: 'red form-control',
           }
         },
       },
@@ -509,7 +509,69 @@ describe('FormBuilder typeUserAttrs detection', () => {
 
     const input = fbWrap.find('.text-field .testSelectAttribute-wrap select')
     expect(input.length).toBe(1)
-    expect(input.val()).toEqual(['green form-control'])
+    expect(input.val()).toEqual('green form-control')
+  })
+  test('can load formData with value for select typeUserAttr into stage where attribute name is className', async() => {
+    const config = {
+      typeUserAttrs: {
+        '*': {
+          className: {
+            label: 'Class',
+            multiple: false,
+            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',
+        className: 'green form-control',
+      }
+    ])
+
+    const input = fbWrap.find('.text-field .className-wrap select')
+    expect(input.length).toBe(1)
+    expect(input.val()).toEqual('green form-control')
+  })
+
+  test('can load formData with value for multi select typeUserAttr into stage', async() => {
+    const config = {
+      typeUserAttrs: {
+        '*': {
+          testSelectAttribute: {
+            label: 'Test Select',
+            multiple: true,
+            options: {
+              'red form-control': 'Red',
+              'green form-control': 'Green',
+              'blue form-control': 'Blue'
+            },
+            style: 'border: 1px solid red',
+            value: 'red form-control',
+          }
+        },
+      },
+    }
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder(config).promise
+    fb.actions.setData([
+      {
+        type: 'text',
+        testSelectAttribute: ['green form-control','blue form-control'],
+      }
+    ])
+    const input = fbWrap.find('.text-field .testSelectAttribute-wrap select')
+    expect(input.length).toBe(1)
+    expect(input.val()).toEqual(['green form-control','blue form-control'])
   })
 })
 
@@ -530,7 +592,7 @@ describe('FormBuilder can return formData', () => {
         'name': 'textarea-1696482495077',
         'required': false,
       }
-      ]
+  ]
 
   test('as JSON', async () => {
     const fbWrap = $('<div>')