fix: convert raw HTML strings received from control.build() into HTML…

…Element(s) to ensure processClassName() can strip bootstrap classes
kevinchappell · Oct 24, 2023 · 03e657f · 03e657f
1 parent cde865a
commit 03e657f
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 1 deletion.
diff --git a/src/js/layout.js b/src/js/layout.js
@@ -121,6 +121,16 @@ export default class layout {
       field = { field: field }
     }
 
+    // If field is a raw HTML string, convert to HTMLElement(s)
+    if (typeof field.field === 'string') {
+      const tmpField = this.markup('div', field.field, {})
+      if (tmpField.childElementCount === 1) {
+        field.field = tmpField.children.item(0)
+      } else {
+        field.field = Array.from(tmpField.children)
+      }
+    }
+
     // build the label & help text
     const label = this.label()
     const help = this.help()

diff --git a/tests/control/custom.test.js b/tests/control/custom.test.js
@@ -251,6 +251,71 @@ describe('Test Custom Control', () => {
     }
     fb.actions.addField(field)
 
-    expect(fbWrap.find('.stage-wrap li')).toHaveLength(1)
+    expect(fbWrap.find('.stage-wrap li[type="customText"]')).toHaveLength(1)
+  })
+
+  test('test add custom field defined as html string and row/col set', async () => {
+    const fbWrap = $('<div>')
+
+    const fields = [{
+      label: 'Custom with string field',
+      attrs: {
+        type: 'customString'
+      },
+      icon: '🌟'
+    }]
+    const templates = {
+      customString: function(fieldData) {
+        return {
+          field: `<span class="${fieldData.className}">Placeholder</span>`,
+        }
+      }
+    }
+
+    const fb = await $(fbWrap).formBuilder({fields, templates}).promise
+    const field = {
+      type: 'customString',
+      className: 'form-control row-1 col-md-12'
+    }
+    fb.actions.addField(field)
+
+    expect(fbWrap.find('.stage-wrap li[type="customString"]')).toHaveLength(1)
+    const renderedCtl = $(fbWrap).find('.prev-holder span')
+    expect(renderedCtl.attr('class')).toBe('form-control')
+    expect(renderedCtl.text()).toBe('Placeholder')
+  })
+
+  test('test add custom field defined as complex html string and row/col set', async () => {
+    const fbWrap = $('<div>')
+
+    const fields = [{
+      label: 'Custom with string field',
+      attrs: {
+        type: 'customString'
+      },
+      icon: '🌟'
+    }]
+    const templates = {
+      customString: function(fieldData) {
+        return {
+          field: `<div><span class="${fieldData.className}">Placeholder</span></div><input />`,
+        }
+      }
+    }
+
+    const fb = await $(fbWrap).formBuilder({fields, templates}).promise
+    const field = {
+      type: 'customString',
+      className: 'form-control row-1 col-md-12'
+    }
+    fb.actions.addField(field)
+
+    expect(fbWrap.find('.stage-wrap li[type="customString"]')).toHaveLength(1)
+    expect($(fbWrap).find('.prev-holder div')).toHaveLength(2)
+    expect($(fbWrap).find('.prev-holder input')).toHaveLength(1)
+    expect($(fbWrap).find('.prev-holder span')).toHaveLength(1)
+    const renderedCtl = $(fbWrap).find('.prev-holder span')
+    expect(renderedCtl.attr('class')).toBe('form-control')
+    expect(renderedCtl.text()).toBe('Placeholder')
   })
 })