diff --git a/src/lib/js/common/dom.js b/src/lib/js/common/dom.js
index a255a123..3a2850c8 100644
--- a/src/lib/js/common/dom.js
+++ b/src/lib/js/common/dom.js
@@ -23,6 +23,8 @@ const iconFontTemplates = {
   fontello: icon => `<i class="${iconPrefix}${icon}">${icon}</i>`,
 }
 
+const inputTags = new Set(['input', 'textarea', 'select'])
+
 /**
  * General purpose markup utilities and generator.
  */
@@ -31,20 +33,12 @@ class DOM {
    * Set defaults, store references to key elements
    * like stages, rows, columns etc
    */
-  constructor() {
-    this.options = Object.create(null)
-    this.styleSheet = (() => {
-      const style = document.createElement('style')
-      style.setAttribute('media', 'screen')
-      style.setAttribute('type', 'text/css')
-      style.appendChild(document.createTextNode(''))
-      document.head.appendChild(style)
-      return style.sheet
-    })()
+  constructor(options = Object.create(null)) {
+    this.options = options
   }
 
   set setOptions(options) {
-    this.options = merge(Object.assign({}, this.options, options))
+    this.options = merge(this.options, options)
   }
 
   /**
@@ -52,14 +46,18 @@ class DOM {
    * @param  {Object|String} elem
    * @return {Object} valid element object
    */
-  processTagName(elem) {
+  processTagName(elemArg) {
+    let elem = elemArg
     let tagName
     if (typeof elem === 'string') {
       tagName = elem
       elem = { tag: tagName }
+      return elem
     }
+
     if (elem.attrs) {
       const { tag, ...restAttrs } = elem.attrs
+      // this is used for interchangeable tagNames like h1, h2, h3 etc
       if (tag) {
         if (typeof tag === 'string') {
           tagName = tag
@@ -92,12 +90,11 @@ class DOM {
    * @return {Object}            DOM Object
    */
   create = (elemArg, isPreview = false) => {
-    let elem = elemArg
-    if (!elem) {
+    if (!elemArg) {
       return
     }
 
-    elem = this.processTagName(elem)
+    const { className, options, ...elem } = this.processTagName(elemArg)
     const _this = this
     let childType
     const { tag } = elem
@@ -147,41 +144,29 @@ class DOM {
     processed.push('tag')
 
     // check for root className property
-    if (elem.className) {
-      const { className } = elem
-      elem.attrs = Object.assign({}, elem.attrs, { className })
-      delete elem.className
+    if (className) {
+      elem.attrs = { ...elem.attrs, className }
     }
 
-    // Append Element Content
-    if (elem.options) {
-      let { options } = elem
-      options = this.processOptions(options, elem, isPreview)
+    if (options) {
+      const processedOptions = this.processOptions(options, elem, isPreview)
       if (this.holdsContent(element) && tag !== 'button') {
         // mainly used for <select> tag
-        appendChildren.array.call(this, options)
-        delete elem.content
+        appendChildren.array.call(this, processedOptions)
+        elem.content = undefined
       } else {
-        h.forEach(options, option => {
+        h.forEach(processedOptions, option => {
           wrap.children.push(_this.create(option, isPreview))
         })
         if (elem.attrs.className) {
           wrap.className = elem.attrs.className
         }
-        wrap.config = Object.assign({}, elem.config)
+        wrap.config = { ...elem.config }
         return this.create(wrap, isPreview)
       }
       processed.push('options')
     }
 
-    // disabling all initially selected options because we are setting them manualy at #330
-    if (element.tagName === 'OPTION') {
-      const timeout = setTimeout(() => {
-        element.selected = false
-        clearTimeout(timeout)
-      }, 0)
-    }
-
     // Set element attributes
     if (elem.attrs) {
       _this.processAttrs(elem, element, isPreview)
@@ -361,17 +346,7 @@ class DOM {
       }
 
       if (value) {
-        // if multiple options are being used and they are being selected automatically, the browser wants the element
-        // to be rendered before setting the selected-attribute. Hence, we're setting the 'selected'-property at the beginning of
-        // the next iteration of the event-loop.
-        if (element.tagName === 'OPTION' && name === 'selected') {
-          const timeout = setTimeout(() => {
-            element.setAttribute(name, value)
-            clearTimeout(timeout)
-          }, 0)
-        } else {
-          element.setAttribute(name, value)
-        }
+        element.setAttribute(name, value === true ? '' : value)
       }
     }
   }
@@ -429,17 +404,6 @@ class DOM {
     }
   }
 
-  makeOption = ([value, label], selected, i18nKey) => {
-    const option = {
-      value,
-      label: i18n.get(`${i18nKey}.${label}`) || label,
-    }
-    if (value === selected) {
-      option.selected = true
-    }
-    return option
-  }
-
   /**
    * Extend Array of option config objects
    * @param  {Array} options
@@ -558,11 +522,12 @@ class DOM {
    * @param  {String|Object} tag tagName or DOM element
    * @return {Boolean} isInput
    */
-  isInput(tag) {
+  isInput(tagArg) {
+    let tag = tagArg
     if (typeof tag !== 'string') {
       tag = tag.tagName
     }
-    return ['input', 'textarea', 'select'].indexOf(tag) !== -1
+    return inputTags.has(tag)
   }
 
   /**
@@ -621,7 +586,7 @@ class DOM {
 
     if (fMap) {
       // for attribute will prevent label focus
-      delete fieldLabel.attrs.for
+      fieldLabel.attrs.for = undefined
       fieldLabel.attrs.contenteditable = true
       fieldLabel.fMap = fMap
     }
@@ -707,9 +672,8 @@ class DOM {
     if (!children.length) {
       if (!this.isStage(parent)) {
         return this.removeEmpty(parent)
-      } else {
-        this.emptyClass(parent)
       }
+      return this.emptyClass(parent)
     }
   }
 
@@ -833,7 +797,8 @@ class DOM {
    * @param  {Object} elem DOM element
    * @param  {Boolean} state
    */
-  toggleSortable(elem, state) {
+  toggleSortable(elem, stateArg) {
+    let state = stateArg
     const fType = componentType(elem)
     if (!fType) {
       return
diff --git a/src/lib/js/common/utils/index.mjs b/src/lib/js/common/utils/index.mjs
index beeb919e..b9e58e35 100644
--- a/src/lib/js/common/utils/index.mjs
+++ b/src/lib/js/common/utils/index.mjs
@@ -3,6 +3,7 @@ import {
   COMPONENT_TYPE_CLASSNAMES_REGEXP,
   COMPONENT_TYPE_CLASSNAMES_LOOKUP,
   CHILD_TYPE_MAP,
+  ANIMATION_SPEED_SLOW,
 } from '../../constants.js'
 import mergeWith from 'lodash/mergeWith.js'
 
@@ -273,20 +274,34 @@ export const typeIsChildOf = (childType, parentType) => CHILD_TYPE_MAP.get(paren
  * @param {number} limit - The number of milliseconds to throttle invocations to.
  * @returns {Function} - Returns the new throttled function.
  */
-export function throttle(callback, limit) {
-  let wait = false
-  return function () {
-    if (!wait) {
-      callback(...arguments)
-      wait = true
-      const timeout = setTimeout(() => {
-        wait = false
-        clearTimeout(timeout)
-      }, limit)
+export function throttle(callback, limit = ANIMATION_SPEED_SLOW) {
+  let lastCall = 0
+  return function (...args) {
+    const now = Date.now()
+    if (now - lastCall >= limit) {
+      lastCall = now
+      callback.apply(this, args)
     }
   }
 }
 
+/**
+ * Creates a debounced function that delays invoking the provided function until after the specified delay.
+ *
+ * @param {Function} fn - The function to debounce.
+ * @param {number} [delay=ANIMATION_SPEED_SLOW] - The number of milliseconds to delay invocation.
+ * @returns {Function} - A new debounced function.
+ */
+export function debounce(fn, delay = ANIMATION_SPEED_SLOW) {
+  let timeoutID
+  return function (...args) {
+    if (timeoutID) {
+      clearTimeout(timeoutID)
+    }
+    timeoutID = setTimeout(() => fn.apply(this, args), delay)
+  }
+}
+
 export function identity(value) {
   return value
 }
diff --git a/src/lib/js/components/autocomplete.js b/src/lib/js/components/autocomplete.js
index d7ba931c..a0862eb9 100644
--- a/src/lib/js/components/autocomplete.js
+++ b/src/lib/js/components/autocomplete.js
@@ -16,7 +16,10 @@ let optionsCache
  * @param {Array} arr labels
  * @param {String} label
  */
-export const labelCount = (arr, label) => arr.reduce((n, x) => n + (x === label), 0)
+export const labelCount = (arr, label) => {
+  const count = arr.reduce((n, x) => n + (x === label), 0)
+  return count > 1 ? `(${count})` : ''
+}
 
 /**
  * Find or generate a label for components and external data
@@ -38,18 +41,31 @@ const getComponentLabel = ({ name, id, ...component }) => {
   return label || (name === 'external' && externalLabel(name, id))
 }
 
+const makeOption = ({ id, textLabel, htmlLabel, selectedId }) => {
+  const option = {
+    value: id,
+    textLabel,
+    htmlLabel,
+  }
+  if (id === selectedId) {
+    option.selected = true
+  }
+
+  return option
+}
+
 /**
  * Generate options for the autolinker component
- * @param {String} selected option value
+ * @param {String} selectedId option value
  * @return {Array} option config objects
  */
-export const componentOptions = selected => {
+export const componentOptions = selectedId => {
   const labels = []
   const flatList = Components.flatList()
   const options = Object.entries(flatList).map(([id, component]) => {
     const label = getComponentLabel(component)
     if (label) {
-      const type = {
+      const typeConfig = {
         tag: 'span',
         content: ` ${toTitleCase(component.name)}`,
         className: 'component-type',
@@ -57,12 +73,15 @@ export const componentOptions = selected => {
       const labelKey = `${component.name}.${label}`
       labels.push(labelKey)
       const count = labelCount(labels, labelKey)
+
       const countConfig = {
         tag: 'span',
-        content: count > 1 && `(${count})`,
+        content: count,
         className: 'component-label-count',
       }
-      return dom.makeOption([id, [`${label} `, countConfig, type]], selected)
+      const htmlLabel = [`${label} `, countConfig, typeConfig]
+      const textLabel = [label, count].join(' ').trim()
+      return makeOption({ id, textLabel, htmlLabel, selectedId })
     }
   })
 
@@ -172,9 +191,10 @@ export default class Autocomplete {
           this.showList(activeOption)
         }
 
-        this.hiddenField.value = evt.target.value
-        this.value = evt.target.value
-        this.runEvent('onChange', { target: this.hiddenField })
+        const value = evt.target.value.trim()
+
+        this.hiddenField.value = value
+        this.value = value
       },
     }
 
@@ -226,7 +246,9 @@ export default class Autocomplete {
     }
     const options = optionsCache || this.generateOptions()
 
-    options.forEach(option => this.list.appendChild(option))
+    for (const option of options) {
+      this.list.appendChild(option)
+    }
   }
 
   generateOptions() {
@@ -240,15 +262,13 @@ export default class Autocomplete {
     }
 
     optionsCache = options.map(optionData => {
-      const value = optionData.value
-      let [label] = optionData.label
-      label = label.trim()
+      const { value, textLabel, htmlLabel } = optionData
       const optionConfig = {
         tag: 'li',
-        children: optionData.label,
+        children: htmlLabel,
         dataset: {
           value,
-          label,
+          label: textLabel,
         },
         className: `${BASE_NAME}-list-item`,
         action: {
@@ -337,15 +357,15 @@ export default class Autocomplete {
    */
   selectOption(selectedOption, list = this.list) {
     const options = list.querySelectorAll('li')
-    for (let i = 0; i < options.length; i++) {
+    for (const option of options) {
       const {
         dataset: { value },
-      } = options[i]
-      options[i].classList.remove('active-option')
+      } = option
+      option.classList.remove('active-option')
 
       if (value) {
         const component = Components.getAddress(value)
-        component.dom && component.dom.classList.remove(HIGHLIGHT_CLASS_NAME)
+        component.dom?.classList.remove(HIGHLIGHT_CLASS_NAME)
       }
     }
     if (selectedOption) {
@@ -359,8 +379,8 @@ export default class Autocomplete {
    */
   removeHighlight() {
     const highlightedComponents = document.getElementsByClassName(HIGHLIGHT_CLASS_NAME)
-    for (let i = 0; i < highlightedComponents.length; i++) {
-      highlightedComponents[i].classList.remove(HIGHLIGHT_CLASS_NAME)
+    for (const component of highlightedComponents) {
+      component.classList.remove(HIGHLIGHT_CLASS_NAME)
     }
   }
 
@@ -374,7 +394,7 @@ export default class Autocomplete {
 
     if (value) {
       const component = Components.getAddress(value)
-      component.dom && component.dom.classList.add(HIGHLIGHT_CLASS_NAME)
+      component.dom?.classList.add(HIGHLIGHT_CLASS_NAME)
     }
   }
 
@@ -398,7 +418,6 @@ export default class Autocomplete {
    */
   setValue(target) {
     const { label, value } = target.dataset
-
     this.displayField.value = label
     this.hiddenField.value = value
     this.value = value
@@ -411,10 +430,10 @@ export default class Autocomplete {
   }
 
   runEvent(eventName, evt) {
-    this.events.forEach(([key, event]) => {
+    for (const [key, event] of this.events) {
       if (key === eventName) {
         event(evt)
       }
-    })
+    }
   }
 }
diff --git a/src/lib/js/components/fields/edit-panel-item.mjs b/src/lib/js/components/fields/edit-panel-item.mjs
index c3013977..fe08d7bd 100644
--- a/src/lib/js/components/fields/edit-panel-item.mjs
+++ b/src/lib/js/components/fields/edit-panel-item.mjs
@@ -50,7 +50,9 @@ const createOptions = (fieldVal, selected) => {
 
 const addOptions = (select, options) => {
   dom.empty(select)
-  options.forEach(option => select.add(option))
+  for (const option of options) {
+    select.add(option)
+  }
 }
 
 const inputConfigBase = ({ key, value, type = 'text', checked }) => {
@@ -101,7 +103,6 @@ const ITEM_INPUT_TYPE_MAP = {
   },
   object: val => {
     return Object.entries(val).map(([key, val]) => {
-      console.log(dom.childType(val))
       return ITEM_INPUT_TYPE_MAP[dom.childType(val)](key, val)
     })
   },
@@ -119,7 +120,6 @@ const INPUT_TYPE_ACTION = {
         )
       }
       field.set(dataKey, checked)
-      field.updatePreview()
     },
   }),
   string: (dataKey, field) => ({
@@ -130,13 +130,11 @@ const INPUT_TYPE_ACTION = {
   number: (dataKey, field) => ({
     input: ({ target: { value } }) => {
       field.set(dataKey, Number(value))
-      field.updatePreview()
     },
   }),
   array: (dataKey, field) => ({
     change: ({ target: { value } }) => {
       field.set(dataKey, value)
-      field.updatePreview()
     },
   }),
   object: () => ({}),
@@ -300,12 +298,12 @@ export default class EditPanelItem {
       ],
     ])
 
-    fields.forEach(field => {
+    for (const field of fields) {
       const action = actions.get(field.className)
       if (action) {
         action(field)
       }
-    })
+    }
   }
 
   conditionInput = (key, val, conditionType, i) => {
@@ -316,7 +314,7 @@ export default class EditPanelItem {
 
     const createConditionSelect = (key, propertyValue, i18nKey) => {
       const options = createOptions(i18nKey || key, propertyValue)
-      const propertyFieldConfig = ITEM_INPUT_TYPE_MAP['array'](`condition.${key}`)
+      const propertyFieldConfig = ITEM_INPUT_TYPE_MAP.array(`condition.${key}`)
 
       propertyFieldConfig.action = {
         change: conditionChangeAction,
@@ -352,7 +350,7 @@ export default class EditPanelItem {
       comparison: value => createConditionSelect('comparison', value),
       logical: value => createConditionSelect('logical', value),
       source: (value, type = 'source') => {
-        const componentInput = ITEM_INPUT_TYPE_MAP['autocomplete'](`condition.${type}`, value, conditionType)
+        const componentInput = ITEM_INPUT_TYPE_MAP.autocomplete(`condition.${type}`, value, conditionType)
         // add to condition map for the type so we can perform reverse lookup when editing a field connected to this condition
         Components.setConditionMap(value, field)
 
@@ -368,7 +366,7 @@ export default class EditPanelItem {
       targetProperty: value => createConditionSelect('targetProperty', value, 'field.property'),
       target: value => segmentTypes.source(value, 'target'),
       value: value => {
-        const valueField = ITEM_INPUT_TYPE_MAP['string']('condition.value', value)
+        const valueField = ITEM_INPUT_TYPE_MAP.string('condition.value', value)
         valueField.action = {
           input: conditionChangeAction,
         }
@@ -423,7 +421,7 @@ export default class EditPanelItem {
 
     const inputTypeConfig = { ...{ config: {}, attrs: {} }, ...ITEM_INPUT_TYPE_MAP[valType](key, val) }
     const dataKey = this.itemKey.replace(/.\d+$/, index => `${index}.${key}`)
-    const labelKey = dataKey.split('.').filter(Number.isNaN).join('.')
+    const labelKey = dataKey.split('.').filter(Number.isNaN).join('.') || key
 
     const [id, name] = [[...this.itemKey.split('.'), key], [key]].map(attrVars =>
       [this.field.id, ...attrVars].filter(Boolean).join('-'),
@@ -432,7 +430,7 @@ export default class EditPanelItem {
     inputTypeConfig.config = {
       ...inputTypeConfig.config,
       ...{
-        label: this.panelName !== 'options' && labelHelper(labelKey),
+        label: this.panelName !== 'options' && (labelHelper(labelKey) || toTitleCase(labelKey)),
         labelAfter: false,
       },
     }
diff --git a/src/lib/js/components/fields/field.js b/src/lib/js/components/fields/field.js
index 160a0645..1fbab3be 100644
--- a/src/lib/js/components/fields/field.js
+++ b/src/lib/js/components/fields/field.js
@@ -1,13 +1,12 @@
 import i18n from '@draggable/i18n'
 import dom from '../../common/dom.js'
 import Panels from '../panels.js'
-import { clone, throttle, unique } from '../../common/utils/index.mjs'
+import { clone, debounce, throttle, unique } from '../../common/utils/index.mjs'
 import EditPanel from './edit-panel.js'
 import Component from '../component.js'
 import { FIELD_CLASSNAME, CONDITION_TEMPLATE, ANIMATION_SPEED_BASE } from '../../constants.js'
 import Components from '../index.js'
 import { toTitleCase } from '../../common/utils/string.mjs'
-import { mergeActions } from '../../common/utils/object.mjs'
 import controls from '../controls/index.js'
 
 const DEFAULT_DATA = () => ({
@@ -26,6 +25,7 @@ export default class Field extends Component {
   constructor(fieldData = Object.create(null)) {
     super('field', { ...DEFAULT_DATA(), ...fieldData })
 
+    this.debouncedUpdateEditPanels = debounce(this.updateEditPanels)
     this.label = dom.create(this.labelConfig)
     this.preview = dom.create({})
     this.editPanels = []
@@ -156,24 +156,21 @@ export default class Field extends Component {
   /**
    * Updates the conditions panel when linked field data changes
    */
-  updateConditionsPanel = () => {
-    const updateConditionsTimeout = setTimeout(() => {
-      const newConditionsPanel = this.editPanels.find(({ name }) => name === 'conditions')
-      if (!newConditionsPanel) {
-        return null
-      }
-      const newProps = newConditionsPanel.createProps()
-      const currentConditionsProps = this.dom.querySelector('.field-edit-conditions')
-      currentConditionsProps.parentElement.replaceChild(newProps, currentConditionsProps)
-      clearTimeout(updateConditionsTimeout)
-    }, ANIMATION_SPEED_BASE)
-  }
+  updateConditionsPanel = throttle(() => {
+    const newConditionsPanel = this.editPanels.find(({ name }) => name === 'conditions')
+    if (!newConditionsPanel) {
+      return null
+    }
+    const newProps = newConditionsPanel.createProps()
+    const currentConditionsProps = this.dom.querySelector('.field-edit-conditions')
+    currentConditionsProps.parentElement.replaceChild(newProps, currentConditionsProps)
+  }, ANIMATION_SPEED_BASE)
 
   /**
    * Updates a field's preview
    * @return {Object} fresh preview
    */
-  updatePreview = throttle(() => {
+  updatePreview = () => {
     if (!this.preview.parentElement) {
       return null
     }
@@ -181,23 +178,15 @@ export default class Field extends Component {
     const newPreview = dom.create(this.fieldPreview(), true)
     this.preview.parentElement.replaceChild(newPreview, this.preview)
     this.preview = newPreview
-  }, ANIMATION_SPEED_BASE)
+  }
 
-  /**
-   * Generate the markup for field edit mode
-   * @return {Object} fieldEdit element config
-   */
-  get fieldEdit() {
+  updateEditPanels = () => {
     this.editPanels = []
     const editable = ['object', 'array']
-    const noPanels = ['config', 'meta', 'action', 'events', ...this.config.panels.disabled]
     const panelOrder = unique([...this.config.panels.order, ...Object.keys(this.data)])
+    const noPanels = ['config', 'meta', 'action', 'events', ...this.config.panels.disabled]
     const allowedPanels = panelOrder.filter(panelName => !noPanels.includes(panelName))
 
-    const fieldEdit = {
-      className: ['field-edit', 'slide-toggle', 'formeo-panels-wrap'],
-    }
-
     for (const panelName of allowedPanels) {
       const panelData = this.get(panelName)
       const propType = dom.childType(panelData)
@@ -213,51 +202,75 @@ export default class Field extends Component {
       displayType: 'auto',
     }
 
+    this.panels = new Panels(panelsData)
+    if (this.dom) {
+      this.dom.querySelector('.panel-nav').replaceWith(this.panels.panelNav)
+      this.dom.querySelector('.panels').replaceWith(this.panels.panelsWrap)
+    }
+  }
+
+  /**
+   * Generate the markup for field edit mode
+   * @return {Object} fieldEdit element config
+   */
+  get fieldEdit() {
+    const fieldEdit = {
+      className: ['field-edit', 'slide-toggle', 'formeo-panels-wrap'],
+    }
+
+    this.updateEditPanels()
+
     const editPanelLength = this.editPanels.length
 
     if (editPanelLength) {
-      this.panels = new Panels(panelsData)
       fieldEdit.className.push(`panel-count-${editPanelLength}`)
       fieldEdit.content = [this.panels.panelNav, this.panels.panelsWrap]
       this.panelNav = this.panels.nav
       this.resizePanelWrap = this.panels.nav.refresh
-      fieldEdit.action = {
-        onRender: () => {
+    }
+
+    fieldEdit.action = {
+      onRender: () => {
+        if (editPanelLength === 0) {
+          // If this element has no edit panels, remove the edit toggle
+          const field = this.dom
+          const editToggle = field.querySelector('.item-edit-toggle')
+          const fieldActions = field.querySelector('.field-actions')
+          const actionButtons = fieldActions.getElementsByTagName('button')
+          fieldActions.style.maxWidth = `${actionButtons.length * actionButtons[0].clientWidth}px`
+          dom.remove(editToggle)
+        } else {
           this.resizePanelWrap()
-          if (!editPanelLength) {
-            // If this element has no edit panels, remove the edit toggle
-            const field = this.dom
-            const editToggle = field.querySelector('.item-edit-toggle')
-            const fieldActions = field.querySelector('.field-actions')
-            const actionButtons = fieldActions.getElementsByTagName('button')
-            fieldActions.style.maxWidth = `${actionButtons.length * actionButtons[0].clientWidth}px`
-            dom.remove(editToggle)
-          }
-        },
-      }
+        }
+      },
     }
 
-    return fieldEdit
+    return dom.create(fieldEdit)
+  }
+
+  toggleCheckedOptions = (optionIndex, type) => {
+    const updatedOptionData = this.get('options').map((option, index) => {
+      const isCurrentIndex = index === optionIndex
+      if (type === 'radio') {
+        option.selected = isCurrentIndex
+      } else {
+        option.checked = isCurrentIndex ? !option.checked : option.checked
+      }
+
+      return option
+    })
+    this.set('options', updatedOptionData)
   }
 
   get defaultPreviewActions() {
     return {
       change: evt => {
         const { target } = evt
-        const { checked, type } = target
-        // @todo these kind of events should be added to control definitions
+        const { type } = target
         if (['checkbox', 'radio'].includes(type)) {
           const optionIndex = +target.id.split('-').pop()
-          // uncheck options if radio
-          if (type === 'radio') {
-            this.set(
-              'options',
-              this.get('options').map(option => ({ ...option, selected: false })),
-            )
-          }
-
-          const checkType = type === 'checkbox' ? 'checked' : 'selected'
-          this.set(`options.${optionIndex}.${checkType}`, checked)
+          this.toggleCheckedOptions(optionIndex, type)
+          this.debouncedUpdateEditPanels()
         }
       },
       click: evt => {
@@ -268,6 +281,7 @@ export default class Field extends Component {
       input: evt => {
         if (['input', 'meter', 'progress', 'button'].includes(this.data.tag)) {
           super.set('attrs.value', evt.target.value)
+          this.debouncedUpdateEditPanels()
         }
 
         if (evt.target.contentEditable) {