diff --git a/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue b/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue index 5b84683a36d5a..70fc0cd74556d 100644 --- a/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue +++ b/packages/editor-ui/src/components/ResourceMapper/MatchingColumnsSelect.vue @@ -34,18 +34,21 @@ const { pluralFieldWordCapitalized, } = useNodeSpecificationValues(props.typeOptions); +const initialValue = computed(() => { + 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 = - resourceMapperTypeOptions.value?.multiKeyMatch === true - ? props.initialValue - : props.initialValue[0]; + state.selected = initialValue.value; }, ); diff --git a/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts b/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts index 00e0fb967d7cc..340de546fd64b 100644 --- a/packages/editor-ui/src/components/__tests__/ResourceMapper.test.ts +++ b/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'); + }); });