fix: make css selectors more specific when identifying form control w…

…rap and input-controls

src/js/form-builder.js

@@ -248,7 +248,7 @@ function FormBuilder(opts, element, $) {
     $(element).replaceWith($editorWrap)
   }
 
-  $(d.controls).on('click', 'li', ({ target }) => {
+  $(d.controls).on('click', 'li.input-control, li.input-set-control', ({ target }) => {
     //Remove initial placeholder if simply clicking to add field into blank stage
     if (h.stageIsEmpty()) {
       $stage.find(tmpRowPlaceholderClassSelector).eq(0).remove()

src/js/helpers.js

@@ -68,7 +68,7 @@ export default class Helpers {
       if (ui.sender) {
         $(ui.sender).sortable('cancel')
       }
-      this.from.sortable('cancel')
+      this.from.closest('.frmb-control').sortable('cancel')
     }
     _this.save()
     _this.doCancel = false
@@ -90,10 +90,14 @@ export default class Helpers {
     //Find the index within the stage even if the placeholder is not a direct descendant
     _this.stopIndex = ui.placeholder.closest('ul.stage-wrap > *').index() - 1
 
+    //Cancel the sort if sortableControls is disabled and the drop target is the control panel
     if (!opts.sortableControls && ui.item.parent().hasClass('frmb-control')) {
       cancelArray.push(true)
     }
 
+    //Cancel the drop if an element that is not a li.input-control is dropped onto the stage (eg. an input-group container)
+    cancelArray.push(ui.item.is(':not(li.input-control,li.input-set-control)') && !ui.item.parent().hasClass('frmb-control') )
+
     if (opts.prepend) {
       cancelArray.push(_this.stopIndex === 0)
     }