diff --git a/src/lib/js/common/utils/index.mjs b/src/lib/js/common/utils/index.mjs index b9e58e35..b9a59fec 100644 --- a/src/lib/js/common/utils/index.mjs +++ b/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) { diff --git a/src/lib/js/components/fields/field.js b/src/lib/js/components/fields/field.js index 1fbab3be..74df7963 100644 --- a/src/lib/js/components/fields/field.js +++ b/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) } }, diff --git a/src/lib/sass/_render.scss b/src/lib/sass/_render.scss index 551f32a5..bce7d308 100644 --- a/src/lib/sass/_render.scss +++ b/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;