fix(editor): Display value of selected matching column in RMC (#7298)

Github issue / Community forum post (link here to close automatically):

packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue

@@ -34,18 +34,21 @@ const {
 	pluralFieldWordCapitalized,
 } = useNodeSpecificationValues(props.typeOptions);
 
+const initialValue = computed<string | string[]>(() => {
+	return resourceMapperTypeOptions.value?.multiKeyMatch === true
+		? props.initialValue
+		: props.initialValue[0];
+});
+
 // Depending on the mode (multiple/singe key column), the selected value can be a string or an array of strings
 const state = reactive({
-	selected: props.initialValue as string[] | string,
+	selected: initialValue.value,
 });
 
 watch(
 	() => props.initialValue,
 	() => {
-		state.selected =
+		state.selected = initialValue.value;
-			resourceMapperTypeOptions.value?.multiKeyMatch === true
-				? props.initialValue
-				: props.initialValue[0];
 	},
 );
 

packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts

@@ -294,4 +294,46 @@ describe('ResourceMapper.vue', () => {
 		await waitAllPromises();
 		expect(fetchFieldsSpy).not.toHaveBeenCalled();
 	});
+
+	it('renders initially selected matching column properly', async () => {
+		const { getByTestId } = renderComponent(
+			{
+				props: {
+					node: {
+						parameters: {
+							columns: {
+								mappingMode: 'autoMapInputData',
+								matchingColumns: ['name'],
+								schema: [
+									{
+										id: 'name',
+										displayName: 'name',
+										canBeUsedToMatch: true,
+									},
+									{
+										id: 'email',
+										displayName: 'email',
+										canBeUsedToMatch: true,
+									},
+								],
+							},
+						},
+					},
+					parameter: {
+						typeOptions: {
+							resourceMapper: {
+								supportAutoMap: true,
+								mode: 'upsert',
+								multiKeyMatch: false,
+							},
+						},
+					},
+				},
+			},
+			{ merge: true },
+		);
+		await waitAllPromises();
+
+		expect(getByTestId('matching-column-select').querySelector('input')).toHaveValue('name');
+	});
 });