fix: if a data model field binding is removed, delete the prop

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/EditBinding.test.tsx

@@ -272,7 +272,7 @@ describe('EditBinding without featureFlag', () => {
     );
   });
 
-  it('should call handleComponentChange when click on delete button', async () => {
+  it('should set the data model binding to the default value when click on delete button', async () => {
     window.confirm = jest.fn(() => true);
     const user = userEvent.setup();
     const handleComponentChange = jest.fn();
@@ -312,6 +312,37 @@ describe('EditBinding without featureFlag', () => {
       },
     );
   });
+
+  it('should delete the data model binding when click on delete button and no default value is defined', async () => {
+    window.confirm = jest.fn(() => true);
+    const user = userEvent.setup();
+    const handleComponentChange = jest.fn();
+    renderEditBinding({
+      editBindingProps: {
+        ...defaultEditBinding,
+        component: componentMocks[ComponentType.FileUpload],
+        handleComponentChange,
+      },
+      queries: {
+        getAppMetadataModelIds: getAppMetadataModelIdsMock,
+        getDataModelMetadata: getDataModelMetadataMock,
+      },
+    });
+
+    await waitForElementToBeRemoved(() =>
+      screen.queryByTitle(textMock('ux_editor.modal_properties_loading')),
+    );
+
+    const deleteButton = screen.getByRole('button', {
+      name: textMock('general.delete'),
+    });
+    await user.click(deleteButton);
+
+    expect(handleComponentChange).toHaveBeenCalledTimes(1);
+    expect(handleComponentChange).toHaveBeenCalledWith(componentMocks[ComponentType.FileUpload], {
+      onSuccess: expect.any(Function),
+    });
+  });
 });
 
 describe('EditBinding with featureFlag', () => {

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/EditBinding.tsx

@@ -17,6 +17,7 @@ import { EditBindingButtons } from './EditBindingButtons';
 import { useValidDataModels } from '@altinn/ux-editor/hooks/useValidDataModels';
 import { StudioSpinner } from '@studio/components';
 import { useTranslation } from 'react-i18next';
+import { formItemConfigs } from '@altinn/ux-editor/data/formItemConfig';
 
 export type EditBindingProps = {
   bindingKey: string;
@@ -43,17 +44,26 @@ export const EditBinding = ({
     internalBindingFormat.dataType,
   );
 
-  const handleBindingChange = (updatedBinding: InternalBindingFormat) => {
-    const selectedDataFieldElement = updatedBinding.field;
+  const handleBindingChange = (updatedBinding?: InternalBindingFormat) => {
+    const selectedDataFieldElement = updatedBinding?.field;
+
+    const value =
+      (shouldDisplayFeature(FeatureFlag.MultipleDataModelsPerTask)
+        ? updatedBinding
+        : selectedDataFieldElement) ??
+      formItemConfigs[component.type]?.defaultProperties?.['dataModelBindings']?.[bindingKey];
+
+    const dataModelBindings = { ...component.dataModelBindings };
+    if (value === undefined || value === null) {
+      delete dataModelBindings[bindingKey];
+    } else {
+      dataModelBindings[bindingKey] = value;
+    }
+
     handleComponentChange(
       {
         ...component,
-        dataModelBindings: {
-          ...component.dataModelBindings,
-          [bindingKey]: shouldDisplayFeature(FeatureFlag.MultipleDataModelsPerTask)
-            ? updatedBinding
-            : selectedDataFieldElement,
-        },
+        dataModelBindings: Object.keys(dataModelBindings).length ? dataModelBindings : undefined,
         required: getMinOccursFromDataModelFields(selectedDataFieldElement, dataModelMetadata),
         timeStamp: getXsdDataTypeFromDataModelFields(
           component.type,

frontend/packages/ux-editor/src/components/config/editModal/EditDataModelBinding/EditBinding/EditBindingButtons.tsx

@@ -17,11 +17,7 @@ export const EditBindingButtons = ({
   const { t } = useTranslation();
 
   const handleDelete = () => {
-    const updatedDataModelBinding = {
-      field: '',
-      dataType: '',
-    };
-    handleBindingChange(updatedDataModelBinding);
+    handleBindingChange(undefined);
     onSetDataModelSelectVisible(false);
   };
 

frontend/packages/ux-editor/src/testing/componentMocks.ts

@@ -97,7 +97,7 @@ const subformComponent: FormComponent<ComponentType.Subform> = {
 };
 const fileUploadComponent: FormComponent<ComponentType.FileUpload> = {
   ...commonProps(ComponentType.FileUpload),
-  dataModelBindings: { simpleBinding: '' },
+  dataModelBindings: undefined,
   description: 'test',
   displayMode: 'list',
   hasCustomFileEndings: false,
@@ -107,7 +107,7 @@ const fileUploadComponent: FormComponent<ComponentType.FileUpload> = {
 };
 const fileUploadWithTagComponent: FormComponent<ComponentType.FileUploadWithTag> = {
   ...commonProps(ComponentType.FileUploadWithTag),
-  dataModelBindings: { simpleBinding: '' },
+  dataModelBindings: undefined,
   description: 'test',
   displayMode: 'list',
   hasCustomFileEndings: false,