fix: fix lifting bootstrap col/row fields for autocomplete

kevinchappell · Oct 19, 2023 · 62b8e3b · 62b8e3b
1 parent e012b8b
commit 62b8e3b
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git a/src/js/layout.js b/src/js/layout.js
@@ -14,19 +14,20 @@ const processClassName = (data, field) => {
       className += ` ${classes.join(' ')}`
 
       // Now that the row- & col- types were lifted, remove from the actual input field and any child elements
-      if (field.classList) {
-        field.classList.remove(...classes)
-      }
-
       //field may be a single element, dom fragment, or an array of elements
       if (!Array.isArray(field)) {
         field = [field]
       }
-      field.forEach(item => item.querySelectorAll('[class*=row-],[class*=col-]').forEach(element => {
-        if (element.classList) {
-          element.classList.remove(...classes)
+      field.forEach(item => {
+        if (item.classList) {
+          item.classList.remove(...classes)
         }
-      }))
+        item.querySelectorAll('[class*=row-],[class*=col-]').forEach(element => {
+          if (element.classList) {
+            element.classList.remove(...classes)
+          }
+        })
+      })
     }
   }
 

diff --git a/tests/form-builder.test.js b/tests/form-builder.test.js
@@ -333,6 +333,23 @@ describe('FormBuilder typeUserAttrs detection', () => {
     input = fbWrap.find('.button-field .testAttribute-wrap label')
     expect(input.text()).toBe('override')
   })
+  test('lifts bootstrap classes from field', async () => {
+    const fbWrap = $('<div>')
+    const fb = await fbWrap.formBuilder({}).promise
+    fb.actions.addField({ type: 'text', className: 'form-control row-1 col-md-4'})
+    const input = fbWrap.find('.form-field[type="text"] .prev-holder input')
+    expect(input.attr('class')).toContain('form-control')
+    expect(input.attr('class')).not.toContain('row-1')
+    expect(input.attr('class')).not.toContain('col-md-4')
+    fb.actions.addField({ type: 'select', className: 'form-control row-1 col-md-4', values: {'yes':'yes','no':'no'}})
+    const select = fbWrap.find('.form-field[type="select"] .prev-holder select')
+    expect(select.attr('class')).toContain('form-control')
+    expect(select.attr('class')).not.toContain('row-1')
+    expect(select.attr('class')).not.toContain('col-md-4')
+    fb.actions.addField({ type: 'autocomplete', className: 'form-control row-1 col-md-4'})
+    const auto = fbWrap.find('.form-field[type="autocomplete"] .prev-holder .form-group')
+    expect(auto.find('[class*=row-],[class*=col-]')).toHaveLength(0)
+  })
 })
 
 describe('FormBuilder can return formData', () => {