fix: option labels not updated when editing in preview

src/lib/js/common/utils/index.mjs

@@ -4,6 +4,7 @@ import {
   COMPONENT_TYPE_CLASSNAMES_LOOKUP,
   CHILD_TYPE_MAP,
   ANIMATION_SPEED_SLOW,
+  ANIMATION_SPEED_BASE,
 } from '../../constants.js'
 import mergeWith from 'lodash/mergeWith.js'
 
@@ -289,10 +290,10 @@ export function throttle(callback, limit = ANIMATION_SPEED_SLOW) {
  * 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.
+ * @param {number} [delay=ANIMATION_SPEED_BASE] - The number of milliseconds to delay invocation.
  * @returns {Function} - A new debounced function.
  */
-export function debounce(fn, delay = ANIMATION_SPEED_SLOW) {
+export function debounce(fn, delay = ANIMATION_SPEED_BASE) {
   let timeoutID
   return function (...args) {
     if (timeoutID) {

src/lib/js/components/fields/field.js

@@ -8,6 +8,7 @@ import { FIELD_CLASSNAME, CONDITION_TEMPLATE, ANIMATION_SPEED_BASE } from '../..
 import Components from '../index.js'
 import { toTitleCase } from '../../common/utils/string.mjs'
 import controls from '../controls/index.js'
+import { indexOfNode } from '../../common/helpers.mjs'
 
 const DEFAULT_DATA = () => ({
   conditions: [CONDITION_TEMPLATE()],
@@ -279,12 +280,22 @@ export default class Field extends Component {
         }
       },
       input: evt => {
-        if (['input', 'meter', 'progress', 'button'].includes(this.data.tag)) {
+        if (['input', 'meter', 'progress', 'button'].includes(evt.target.tagName.toLowerCase())) {
           super.set('attrs.value', evt.target.value)
-          this.debouncedUpdateEditPanels()
+          return this.debouncedUpdateEditPanels()
         }
 
         if (evt.target.contentEditable) {
+          const parentClassList = evt.target.parentElement.classList
+          const isOption = parentClassList.contains('f-checkbox') || parentClassList.contains('f-radio')
+          if (isOption) {
+            const option = evt.target.parentElement
+            const optionWrap = option.parentElement
+            const optionIndex = indexOfNode(option, optionWrap)
+            super.set(`options[${optionIndex}].label`, evt.target.innerHTML)
+            return this.debouncedUpdateEditPanels()
+          }
+
           super.set('content', evt.target.innerHTML)
         }
       },

src/lib/sass/_render.scss

@@ -10,6 +10,12 @@
 }
 
 .f-input-group-wrap {
+  .formeo-row:first-of-type {
+    .remove-input-group {
+      display: none;
+    }
+  }
+
   > fieldset {
     position: relative;
     .remove-input-group {
@@ -53,7 +59,6 @@ fieldset.formeo-row-wrap {
 
 .formeo-row-wrap {
   margin-bottom: 1em;
-  padding: mixins.space(2) 0;
   border-radius: mixins.space(1);
 
   legend {
@@ -69,15 +74,6 @@ fieldset.formeo-row-wrap {
   }
 }
 
-.f-input-group-wrap {
-  @include mixins.clearfix;
-  .formeo-row:first-of-type {
-    .remove-input-group {
-      display: none;
-    }
-  }
-}
-
 .f-input-group {
   position: relative;