fix: Emit only allowed values from TextElementForm

changelog/entries/unreleased/bug/2342_builder_fix_element_position_reset_on_edit.json

@@ -0,0 +1,7 @@
+{
+    "type": "bug",
+    "message": "[Builder] Fixed element position resets on editing of it's properties",
+    "issue_number": 2342,
+    "bullet_points": [],
+    "created_at": "2025-02-05"
+}

web-frontend/modules/builder/components/elements/components/forms/general/CheckboxElementForm.vue

@@ -51,10 +51,12 @@ export default {
   mixins: [formElementForm],
   data() {
     return {
+      allowedValues: ['label', 'default_value', 'required', 'styles'],
       values: {
         label: '',
         default_value: '',
         required: false,
+        styles: {},
       },
     }
   },

web-frontend/modules/builder/components/elements/components/forms/general/ColumnElementForm.vue

@@ -72,8 +72,9 @@ export default {
         column_amount: 1,
         column_gap: 30,
         alignment: VERTICAL_ALIGNMENTS.TOP,
+        styles: {},
       },
-      allowedValues: ['column_amount', 'column_gap', 'alignment'],
+      allowedValues: ['column_amount', 'column_gap', 'alignment', 'styles'],
     }
   },
   computed: {

web-frontend/modules/builder/components/elements/components/forms/general/DateTimePickerElementForm.vue

@@ -94,6 +94,15 @@ export default {
   mixins: [formElementForm],
   data() {
     return {
+      allowedValues: [
+        'label',
+        'default_value',
+        'required',
+        'date_format',
+        'include_time',
+        'time_format',
+        'styles',
+      ],
       values: {
         label: '',
         default_value: '',
@@ -101,6 +110,7 @@ export default {
         date_format: '',
         include_time: false,
         time_format: '',
+        styles: {},
       },
     }
   },

web-frontend/modules/builder/components/elements/components/forms/general/IFrameElementForm.vue

@@ -80,11 +80,13 @@ export default {
   },
   data() {
     return {
+      allowedValues: ['source_type', 'url', 'embed', 'height', 'styles'],
       values: {
         source_type: IFRAME_SOURCE_TYPES.URL,
         url: '',
         embed: '',
         height: 300,
+        styles: {},
       },
     }
   },

web-frontend/modules/builder/components/elements/components/forms/general/ImageElementForm.vue

@@ -89,6 +89,13 @@ export default {
   mixins: [elementForm],
   data() {
     return {
+      allowedValues: [
+        'image_source_type',
+        'image_file',
+        'image_url',
+        'alt_text',
+        'styles',
+      ],
       values: {
         image_source_type: IMAGE_SOURCE_TYPES.UPLOAD,
         image_file: null,

web-frontend/modules/builder/components/elements/components/forms/general/InputTextElementForm.vue

@@ -140,6 +140,17 @@ export default {
   },
   data() {
     return {
+      allowedValues: [
+        'label',
+        'default_value',
+        'required',
+        'validation_type',
+        'placeholder',
+        'is_multiline',
+        'rows',
+        'type',
+        'styles',
+      ],
       values: {
         label: '',
         default_value: '',

web-frontend/modules/builder/components/elements/components/forms/general/TextElementForm.vue

@@ -50,6 +50,7 @@ export default {
   mixins: [elementForm],
   data() {
     return {
+      allowedValues: ['value', 'format', 'styles'],
       values: {
         value: '',
         format: TEXT_FORMAT_TYPES.PLAIN,

web-frontend/modules/builder/mixins/elementSidePanel.js

@@ -72,8 +72,12 @@ export default {
         )
       )
 
-      // We never want to update the order this way
+      // The `order`, `place_in_container` and `parent_element_id` properties
+      // are not meant to be changed here. In the event that we've detected
+      // a difference here, remove them.
       delete differences.order
+      delete differences.place_in_container
+      delete differences.parent_element_id
 
       if (Object.keys(differences).length > 0) {
         try {

web-frontend/test/unit/core/components/textElementForm.spec.js

@@ -0,0 +1,90 @@
+import { mount } from '@vue/test-utils'
+import { TEXT_FORMAT_TYPES } from '@baserow/modules/builder/enums'
+import TextElementForm from '@baserow/modules/builder/components/elements/components/forms/general/TextElementForm'
+
+describe('TextElementForm', () => {
+  let wrapper
+
+  const defaultProps = {
+    defaultValues: {
+      value: 'test text',
+      format: TEXT_FORMAT_TYPES.PLAIN,
+      styles: {},
+      // Add some non-allowed properties
+      someOtherProp: 'should not be included',
+      anotherProp: 123,
+    },
+  }
+
+  const mountComponent = (props = {}) => {
+    return mount(TextElementForm, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      mocks: {
+        $t: (key) => key,
+        $registry: {
+          getOrderedList: () => [],
+        },
+      },
+      provide: {
+        workspace: {},
+        builder: {
+          theme: {},
+        },
+        currentPage: {},
+        elementPage: {},
+        mode: 'edit',
+      },
+      stubs: {
+        FormGroup: true,
+        RadioGroup: true,
+        InjectedFormulaInput: true,
+        CustomStyle: true,
+      },
+    })
+  }
+
+  beforeEach(() => {
+    wrapper = mountComponent()
+  })
+
+  afterEach(() => {
+    wrapper.destroy()
+  })
+
+  test('only emits allowed values when values change', async () => {
+    // Verify initial state
+    expect(wrapper.vm.allowedValues).toEqual(['value', 'format', 'styles'])
+
+    // Simulate value change
+    await wrapper.setData({
+      values: {
+        format: TEXT_FORMAT_TYPES.MARKDOWN,
+        styles: { color: 'red' },
+      },
+    })
+
+    // Get the last emitted values-changed event
+    const emittedValues = wrapper.emitted('values-changed')
+    expect(emittedValues).toBeTruthy()
+    const lastEmittedValues = emittedValues[emittedValues.length - 1][0]
+
+    // Verify only allowed values are present
+    expect(Object.keys(lastEmittedValues)).toEqual([
+      'value',
+      'format',
+      'styles',
+    ])
+    expect(lastEmittedValues).toEqual({
+      value: 'test text',
+      format: TEXT_FORMAT_TYPES.MARKDOWN,
+      styles: { color: 'red' },
+    })
+
+    // Verify non-allowed values are not present
+    expect(lastEmittedValues.someOtherProp).toBeUndefined()
+    expect(lastEmittedValues.anotherProp).toBeUndefined()
+  })
+})