diff --git a/src/lib/js/common/utils/index.mjs b/src/lib/js/common/utils/index.mjs
index 31f4ffa7..2621887b 100644
--- a/src/lib/js/common/utils/index.mjs
+++ b/src/lib/js/common/utils/index.mjs
@@ -111,9 +111,9 @@ export const merge = (obj1, obj2, opts = Object.create(null)) => {
     if (Array.isArray(objValue)) {
       if (Array.isArray(srcValue)) {
         return unique(opts.mergeArray ? objValue.concat(srcValue) : srcValue)
-      } else {
-        return srcValue
       }
+
+      return srcValue
     }
   }
   return mergeWith({}, obj1, obj2, customizer)
@@ -138,7 +138,7 @@ export const clone = obj => {
   }
 
   // Handle Array
-  if (obj instanceof Array) {
+  if (Array.isArray(obj)) {
     copy = []
     for (let i = 0, len = obj.length; i < len; i++) {
       copy[i] = clone(obj[i])
@@ -150,7 +150,7 @@ export const clone = obj => {
   if (obj instanceof Object) {
     copy = {}
     for (const attr in obj) {
-      if (obj.hasOwnProperty(attr)) {
+      if (Object.hasOwn(obj, attr)) {
         copy[attr] = clone(obj[attr])
       }
     }
@@ -163,7 +163,7 @@ export const clone = obj => {
 
 export const percent = (val, total) => (val / total) * 100
 
-export const numToPercent = num => num.toString() + '%'
+export const numToPercent = num => `${num.toString()}%`
 
 export const numberBetween = (num, min, max) => num > min && num < max
 
diff --git a/src/lib/js/components/component.js b/src/lib/js/components/component.js
index 48e0f841..0934fef1 100644
--- a/src/lib/js/components/component.js
+++ b/src/lib/js/components/component.js
@@ -306,17 +306,18 @@ export default class Component extends Data {
 
   /**
    * Adds a child to the component
-   * @param {Object} childData
+   * @param {Object|String} childData
    * @param {Number} index
    * @return {Object} child DOM element
    */
   addChild(childData = {}, index = this.domChildren.length) {
+    let data = childData
     if (typeof childData !== 'object') {
-      childData = { id: childData }
+      data = { id: data }
     }
 
     const childWrap = this.dom.querySelector('.children')
-    const { id: childId = uuid() } = childData
+    const { id: childId = uuid() } = data
     const childGroup = CHILD_TYPE_MAP.get(this.name)
     if (!childGroup) {
       return null
@@ -325,12 +326,12 @@ export default class Component extends Data {
     const childComponentType = `${childGroup}s`
 
     const child =
-      Components.getAddress(`${childComponentType}.${childId}`) ||
-      Components[childComponentType].add(childId, childData)
+      Components.getAddress(`${childComponentType}.${childId}`) || Components[childComponentType].add(childId, data)
 
     childWrap.insertBefore(child.dom, childWrap.children[index])
 
-    // @todo add event for onAddChild
+    this.config.events?.onAddChild?.({ parent: this, child })
+
     const grandChildren = child.get('children')
     if (grandChildren?.length) {
       child.loadChildren(grandChildren)
@@ -359,41 +360,40 @@ export default class Component extends Data {
    * @return {Object} Component
    */
   onAdd({ from, to, item, newIndex }) {
-    const _this = this
     if (!from.classList.contains(CONTROL_GROUP_CLASSNAME)) {
       from = from.parentElement
     }
     const fromType = componentType(from)
     const toType = componentType(to.parentElement)
     const defaultOnAdd = () => {
-      _this.saveChildOrder()
-      _this.removeClasses('empty')
+      this.saveChildOrder()
+      this.removeClasses('empty')
     }
 
     const depthMap = new Map([
       [
         -2,
         () => {
-          const newChild = _this.addChild({}, newIndex).addChild()
+          const newChild = this.addChild({}, newIndex).addChild()
           return newChild.addChild.bind(newChild)
         },
       ],
       [
         -1,
         () => {
-          const newChild = _this.addChild({}, newIndex)
+          const newChild = this.addChild({}, newIndex)
           return newChild.addChild.bind(newChild)
         },
       ],
-      [0, () => _this.addChild.bind(_this)],
+      [0, () => this.addChild.bind(this)],
       [
         1,
         controlData => {
-          const currentIndex = indexOfNode(_this.dom)
-          return () => _this.parent.addChild(controlData, currentIndex + 1)
+          const currentIndex = indexOfNode(this.dom)
+          return () => this.parent.addChild(controlData, currentIndex + 1)
         },
       ],
-      [2, controlData => () => _this.parent.parent.addChild(controlData)],
+      [2, controlData => () => this.parent.parent.addChild(controlData)],
     ])
 
     const onAddConditions = {
@@ -422,7 +422,7 @@ export default class Component extends Data {
           },
           field: 1,
         }
-        const depth = get(targets, `${_this.name}.${controlType}`)
+        const depth = get(targets, `${this.name}.${controlType}`)
         const action = depthMap.get(depth)()
         dom.remove(item)
         const component = action(controlData, newIndex)
@@ -600,7 +600,7 @@ export default class Component extends Data {
     })
   }
 
-  cloneData() {
+  cloneData = () => {
     const clonedData = { ...clone(this.data), id: uuid() }
     if (this.name !== 'field') {
       clonedData.children = []
@@ -609,7 +609,7 @@ export default class Component extends Data {
     return clonedData
   }
 
-  clone(parent = this.parent) {
+  clone = (parent = this.parent) => {
     const newClone = parent.addChild(this.cloneData(), this.index + 1)
     if (this.name !== 'field') {
       this.cloneChildren(newClone)
@@ -619,7 +619,9 @@ export default class Component extends Data {
   }
 
   cloneChildren(toParent) {
-    this.children.forEach(child => child?.clone(toParent))
+    for (const child of this.children) {
+      child?.clone(toParent)
+    }
   }
 
   createChildWrap = children =>
diff --git a/src/lib/js/components/controls/index.js b/src/lib/js/components/controls/index.js
index ac37a001..de2f0f7f 100644
--- a/src/lib/js/components/controls/index.js
+++ b/src/lib/js/components/controls/index.js
@@ -47,16 +47,6 @@ export class Controls {
     return this
   }
 
-  /**
-   * Dragging from the control bar clears element
-   * events lets add them back after drag.
-   * @param  {Object} evt
-   */
-  applyControlEvents = ({ clone: control }) => {
-    const button = control.querySelector('button')
-    Object.keys(this.controlEvents).map(action => button.addEventListener(action, this.controlEvents[action]))
-  }
-
   /**
    * Generate control config for UI and bind actions
    * @return {Array} elementControls
@@ -171,7 +161,6 @@ export class Controls {
   }
 
   get(controlId) {
-    // return clone(this.data.get(controlId))
     return this.data.get(controlId)
   }
 
@@ -259,13 +248,13 @@ export class Controls {
       content: [this.panels.panelNav, this.panels.panelsWrap],
     })
 
-    let controlClass = 'formeo-controls'
+    const controlClasses = ['formeo-controls']
     if (sticky) {
-      controlClass += ' formeo-sticky'
+      controlClasses.push('formeo-sticky')
     }
 
     const element = dom.create({
-      className: controlClass,
+      className: controlClasses,
       content: [groupsWrap, formActions],
     })
     const groups = element.getElementsByClassName('control-group')
@@ -324,7 +313,6 @@ export class Controls {
           pull: 'clone',
           put: false,
         },
-        onRemove: this.applyControlEvents,
         onStart: ({ item }) => {
           const { controlData } = this.get(item.id)
           if (this.options.ghostPreview) {
@@ -332,6 +320,11 @@ export class Controls {
             item.appendChild(new Field(controlData).preview)
           }
         },
+        onEnd: ({ from, item, clone }) => {
+          if (from.contains(clone)) {
+            from.replaceChild(item, clone)
+          }
+        },
         sort: this.options.sortable,
         store: {
           /**
diff --git a/src/lib/js/components/fields/field.js b/src/lib/js/components/fields/field.js
index 78c539e2..4a57439c 100644
--- a/src/lib/js/components/fields/field.js
+++ b/src/lib/js/components/fields/field.js
@@ -78,11 +78,10 @@ export default class Field extends Component {
         config.tag = 'input'
         config.attrs.value = labelVal
         return config
-      } else {
-        config.attrs.contenteditable = true
-        config.children = labelVal
-        return config
       }
+      config.attrs.contenteditable = true
+      config.children = labelVal
+      return config
     }
 
     const label = {
@@ -118,14 +117,14 @@ export default class Field extends Component {
       return null
     }
 
-    newConditionsPanel.editPanelItems.forEach(({ itemFieldGroups }) => {
-      itemFieldGroups.forEach(fields => {
+    for (const { itemFieldGroups } of newConditionsPanel.editPanelItems) {
+      for (const fields of itemFieldGroups) {
         const autocomplete = fields.find(field => field.value === value)
         if (autocomplete) {
           autocomplete.displayField.value = label
         }
-      })
-    })
+      }
+    }
   }
 
   /**