fix: use textarea content instead of value

remove custom input handler for textarea class

Author: kevinchappell

src/lib/js/components/controls/form/textarea.js

@@ -8,12 +8,6 @@ class TextAreaControl extends Control {
       config: {
         label: i18n.get('controls.form.textarea'),
       },
-      // actions here will be applied to the preview in the editor
-      action: {
-        input: function ({ target: { value } }) {
-          this.setData?.('value', value)
-        },
-      },
       meta: {
         group: 'common',
         icon: 'textarea',

src/lib/js/components/controls/form/textarea.test.mjs

@@ -1,9 +1,7 @@
-import { describe, it, beforeEach, mock } from 'node:test'
+import { describe, it, beforeEach } from 'node:test'
 import assert from 'node:assert'
 import '../../../../../../tools/__mocks__/ResizeObserver.js'
 import TextAreaControl from './textarea.js'
-import Field from '../../fields/field.js'
-import controls from '../index.js'
 
 describe('TextAreaControl', () => {
   let controlInstance
@@ -18,7 +16,6 @@ describe('TextAreaControl', () => {
 
   it('should have correct tag and actions', () => {
     assert.strictEqual(controlInstance.controlData.tag, 'textarea')
-    assert.strictEqual(typeof controlInstance.controlData.action.input, 'function')
   })
 
   it('should have correct meta information', () => {
@@ -30,21 +27,4 @@ describe('TextAreaControl', () => {
   it('should have required attribute set to false', () => {
     assert.strictEqual(controlInstance.controlData.attrs.required, false)
   })
-
-  it('should set data on input', () => {
-    controls.add(controlInstance)
-    const controlData = controlInstance.controlData
-    const fieldData = { ...controlData, config: { controlId: controlData.meta.id } }
-    const fieldInstance = new Field(fieldData)
-    const mockSetData = mock.fn()
-    fieldInstance.setData = mockSetData
-
-    fieldInstance.updatePreview()
-    const textarea = fieldInstance.preview.querySelector('textarea')
-    textarea.value = 'test value'
-    textarea.dispatchEvent(new window.Event('input', { bubbles: true }))
-
-    assert.strictEqual(mockSetData.mock.calls.length, 1)
-    assert.deepStrictEqual(mockSetData.mock.calls[0].arguments, ['value', 'test value'])
-  })
 })

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

@@ -288,17 +288,18 @@ export default class Field extends Component {
         }
 
         if (evt.target.contentEditable) {
-          const parentClassList = evt.target.parentElement.classList
+          const target = evt.target
+          const parentClassList = target.parentElement.classList
           const isOption = parentClassList.contains('f-checkbox') || parentClassList.contains('f-radio')
           if (isOption) {
-            const option = evt.target.parentElement
+            const option = target.parentElement
             const optionWrap = option.parentElement
             const optionIndex = indexOfNode(option, optionWrap)
-            super.set(`options[${optionIndex}].label`, evt.target.innerHTML)
+            this.setData(`options[${optionIndex}].label`, target.innerHTML)
             return this.debouncedUpdateEditPanels()
           }
 
-          super.set('content', evt.target.innerHTML)
+          this.setData('content', target.innerHTML || target.value)
         }
       },
     }