fix: fixed selected component

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/ColumnElement.test.tsx

@@ -72,6 +72,7 @@ describe('ColumnElement', () => {
     expect(onEditMock).toHaveBeenCalledTimes(1);
     expect(onEditMock).toHaveBeenCalledWith({
       ...mockTableColumn,
+      componentId: subformLayoutMock.component1Id,
       headerContent: subformLayoutMock.component1.textResourceBindings.title,
       cellContent: { query: subformLayoutMock.component1.dataModelBindings.simpleBinding },
     });

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import userEvent from '@testing-library/user-event';
 import { subformLayoutMock } from '../../../../../testing/subformLayoutMock';
@@ -86,6 +86,26 @@ describe('EditColumnElementComponentSelect', () => {
       }),
     ).toBeInTheDocument();
   });
+
+  it('should make sure that selected component selected still selected', async () => {
+    const mockOnSelectComponent = jest.fn();
+    const selectedComponentId = [subformLayoutMock.component1Id];
+    renderEditColumnElementComponentSelect({
+      onSelectComponent: mockOnSelectComponent,
+      selectedComponentId,
+    });
+
+    const componentSelect = screen.getByRole('combobox', {
+      name: textMock('ux_editor.properties_panel.subform_table_columns.choose_component'),
+    });
+
+    expect(componentSelect).toBeInTheDocument();
+    expect(componentSelect).toHaveValue(selectedComponentId[0]);
+    await waitFor(() => {
+      expect(mockOnSelectComponent).not.toHaveBeenCalled();
+    });
+    expect(componentSelect).toHaveValue(selectedComponentId[0]);
+  });
 });
 
 const renderEditColumnElementComponentSelect = (

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx

@@ -55,12 +55,15 @@ export const EditColumnElement = ({
     (comp) => comp.textResourceBindings?.title && comp.dataModelBindings?.simpleBinding,
   );
 
+  const getSelectedComponentId = components.find((comp) => comp.id === tableColumn.componentId);
+
   const selectComponent = (values: string[]) => {
     const selectedComponentId = values[0];
     const selectedComponent = components.find((comp) => comp.id === selectedComponentId);
 
     const updatedTableColumn = {
-      ...sourceColumn,
+      ...tableColumn,
+      componentId: selectedComponent.id,
       headerContent: selectedComponent.textResourceBindings?.title,
       cellContent: { query: selectedComponent.dataModelBindings?.simpleBinding },
     };
@@ -74,6 +77,7 @@ export const EditColumnElement = ({
         <EditColumnElementComponentSelect
           components={componentsWithLabelAndDataModel}
           onSelectComponent={selectComponent}
+          selectedComponentId={getSelectedComponentId ? [getSelectedComponentId.id] : []}
         />
         <StudioTextfield
           label={
@@ -119,10 +123,12 @@ const EditColumnElementHeader = ({ columnNumber }: EditColumnElementHeaderProps)
 export type EditColumnElementComponentSelectProps = {
   components: FormItem[];
   onSelectComponent: (values: string[]) => void;
+  selectedComponentId?: string[];
 };
 export const EditColumnElementComponentSelect = ({
   components,
   onSelectComponent,
+  selectedComponentId,
 }: EditColumnElementComponentSelectProps) => {
   const { t } = useTranslation();
 
@@ -148,6 +154,7 @@ export const EditColumnElementComponentSelect = ({
       size='sm'
       onValueChange={onSelectComponent}
       id='columncomponentselect'
+      value={selectedComponentId}
     >
       {subformComponentOptions}
     </StudioCombobox>

frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/types/TableColumn.ts

@@ -6,4 +6,5 @@ type TableColumnCellContent = {
 export type TableColumn = {
   headerContent: string;
   cellContent: TableColumnCellContent;
+  componentId?: string;
 };