syncFieldWithNewRow incorrectly replacing row values className attribute when element not current within row

src/js/form-builder.js

@@ -1397,7 +1397,7 @@ function FormBuilder(opts, element, $) {
             colWrapper.appendTo(rowWrapperNode)
 
             setupSortableRowWrapper(rowWrapperNode)
-            syncFieldWithNewRow(colWrapper.attr('id'))
+            h.syncFieldWithNewRow(colWrapper[0], colWrapper.closest(rowWrapperClassSelector)[0])
           }
         }
 
@@ -1443,10 +1443,11 @@ function FormBuilder(opts, element, $) {
       stop: (event, ui) => {
         $stage.removeClass('__preventColButtons')
         $stage.children(tmpRowPlaceholderClassSelector).removeClass('hoverDropStyleInverse')
+        checkRowCleanup()
         autoSizeRowColumns(ui.item.closest(rowWrapperClassSelector), true)
       },
       update: (event, ui) => {
-        syncFieldWithNewRow(ui.item.attr('id'))
+        h.syncFieldWithNewRow(ui.item, $(ui.item).closest(rowWrapperClassSelector)[0])
       },
     })
 
@@ -1934,7 +1935,7 @@ function FormBuilder(opts, element, $) {
 
     setupSortableRowWrapper(rowWrapper)
     ResetAllInvisibleRowPlaceholders()
-    syncFieldWithNewRow($clone.attr('id'))
+    h.syncFieldWithNewRow($clone[0], $clone.closest(rowWrapperClassSelector)[0])
   }
 
   // Delete field
@@ -2139,18 +2140,6 @@ function FormBuilder(opts, element, $) {
     })
   }
 
-  function syncFieldWithNewRow(fieldID) {
-    if (fieldID) {
-      const inputClassElement = $(`#className-${fieldID.replace('-cont', '')}`)
-      if (inputClassElement.val()) {
-        const oldRow = h.getRowClass(inputClassElement.val())
-        const wrapperRow = h.getRowClass(inputClassElement.closest(rowWrapperClassSelector).attr('class'))
-        inputClassElement.val(inputClassElement.val().replace(oldRow, wrapperRow))
-        checkRowCleanup()
-      }
-    }
-  }
-
   //When mouse moves away a certain distance, cancel grid mode
   $(document).mousemove(e => {
     if (

src/js/helpers.js

@@ -1462,4 +1462,32 @@ export default class Helpers {
       inputClassElement.val(this.changeBootstrapClass(inputClassElement.val(), newValue))
     }
   }
+
+  /**
+   * Updates the field's className to include the current wrapping row, removing the previous row if defined
+   * @param {HTMLElement} field
+   * @param {HTMLElement} wrapperRow
+   */
+   syncFieldWithNewRow(field, wrapperRow) {
+    if (field) {
+      const inputClassElement = $(field).find('.fld-className')
+      const currentClassName = inputClassElement.val()?.trim()
+      if (currentClassName) {
+        let currentClasses = currentClassName.split(' ')
+        const oldRow = this.getRowClass(currentClassName)
+        const newRow = this.getRowClass(wrapperRow?.className ?? '')
+        if (oldRow !== newRow) {
+          if (oldRow) {
+            currentClasses = currentClasses.filter(function(obj) {
+              return obj !== oldRow
+            })
+          }
+          if (newRow) {
+            currentClasses.push(newRow)
+          }
+          inputClassElement.val(currentClasses.join(' '))
+        }
+      }
+    }
+  }
 }

tests/bootstrap.test.js

@@ -70,4 +70,52 @@ describe('Test Boostrap Helper functions', () => {
     expect(helper.changeBootstrapClass('col-md-5 row-1 random-class row col', 7)).toBe('col-md-7 row-1 random-class row col')
   })
 
+  test('syncFieldWithNewRow swaps existing with new', () => {
+    const field = $('<div>')
+    const input = $('<input>', {class: 'fld-className', value: 'prefix-class form-control row-1 col-md-12 suffix-class'})
+    field.append(input)
+    const newRow = $('<div>', {class: 'row-2'})
+
+    expect(input.val()).toEqual('prefix-class form-control row-1 col-md-12 suffix-class')
+    helper.syncFieldWithNewRow(field[0], newRow[0])
+
+    expect(input.val()).toEqual('prefix-class form-control col-md-12 suffix-class row-2')
+  })
+
+  test('syncFieldWithNewRow unsets row class when no new row', () => {
+    const field = $('<div>')
+    const input = $('<input>', {class: 'fld-className', value: 'prefix-class form-control row-1 col-md-12 suffix-class'})
+    field.append(input)
+    const newRow = $('<div>', {})
+
+    expect(input.val()).toEqual('prefix-class form-control row-1 col-md-12 suffix-class')
+    helper.syncFieldWithNewRow(field[0], newRow[0])
+
+    expect(input.val()).toEqual('prefix-class form-control col-md-12 suffix-class')
+  })
+
+  test('syncFieldWithNewRow sets new row when no previous row', () => {
+    const field = $('<div>')
+    const input = $('<input>', {class: 'fld-className', value: 'prefix-class form-control col-md-12 suffix-class'})
+    field.append(input)
+    const newRow = $('<div>', {class: 'row-2'})
+
+    expect(input.val()).toEqual('prefix-class form-control col-md-12 suffix-class')
+    helper.syncFieldWithNewRow(field[0], newRow[0])
+
+    expect(input.val()).toEqual('prefix-class form-control col-md-12 suffix-class row-2')
+  })
+
+  test('syncFieldWithNewRow no change if same row id', () => {
+    const field = $('<div>')
+    const input = $('<input>', {class: 'fld-className', value: 'prefix-class form-control row-2 col-md-12 suffix-class'})
+    field.append(input)
+    const newRow = $('<div>', {class: 'row-2'})
+
+    expect(input.val()).toEqual('prefix-class form-control row-2 col-md-12 suffix-class')
+    helper.syncFieldWithNewRow(field[0], newRow[0])
+
+    expect(input.val()).toEqual('prefix-class form-control row-2 col-md-12 suffix-class')
+  })
+
 })