fix(editor): Fix multi-select parameters with load options getting cleared (#9324)

packages/editor-ui/src/components/ParameterInput.vue

@@ -1187,6 +1187,10 @@ function onUpdateTextInput(value: string) {
 }
 
 function valueChanged(value: NodeParameterValueType | {} | Date) {
+	if (remoteParameterOptionsLoading.value) {
+		return;
+	}
+
 	if (props.parameter.name === 'nodeCredentialType') {
 		activeCredentialType.value = value as string;
 	}

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

@@ -4,11 +4,13 @@ import type { useNDVStore } from '@/stores/ndv.store';
 import type { CompletionResult } from '@codemirror/autocomplete';
 import { createTestingPinia } from '@pinia/testing';
 import { faker } from '@faker-js/faker';
-
-let mockNdvState: Partial<ReturnType<typeof useNDVStore>>;
-let mockCompletionResult: Partial<CompletionResult>;
 import { waitFor } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
+import type { useNodeTypesStore } from '../../stores/nodeTypes.store';
+
+let mockNdvState: Partial<ReturnType<typeof useNDVStore>>;
+let mockNodeTypesState: Partial<ReturnType<typeof useNodeTypesStore>>;
+let mockCompletionResult: Partial<CompletionResult>;
 
 vi.mock('@/stores/ndv.store', () => {
 	return {
@@ -16,6 +18,12 @@ vi.mock('@/stores/ndv.store', () => {
 	};
 });
 
+vi.mock('@/stores/nodeTypes.store', () => {
+	return {
+		useNodeTypesStore: vi.fn(() => mockNodeTypesState),
+	};
+});
+
 vi.mock('@/plugins/codemirror/completions/datatype.completions', () => {
 	return {
 		datatypeCompletions: vi.fn(() => mockCompletionResult),
@@ -45,6 +53,9 @@ describe('ParameterInput.vue', () => {
 				typeVersion: 1,
 			},
 		};
+		mockNodeTypesState = {
+			allNodeTypes: [],
+		};
 	});
 
 	test('should render an options parameter (select)', async () => {
@@ -121,4 +132,32 @@ describe('ParameterInput.vue', () => {
 
 		expect(emitted('update')).toContainEqual([expect.objectContaining({ value: 'foo' })]);
 	});
+
+	test('should not reset the value of a multi-select with loadOptionsMethod on load', async () => {
+		mockNodeTypesState.getNodeParameterOptions = vi.fn(async () => [
+			{ name: 'ID', value: 'id' },
+			{ name: 'Title', value: 'title' },
+			{ name: 'Description', value: 'description' },
+		]);
+
+		const { emitted, container } = renderComponent(ParameterInput, {
+			pinia: createTestingPinia(),
+			props: {
+				path: 'columns',
+				parameter: {
+					displayName: 'Columns',
+					name: 'columns',
+					type: 'multiOptions',
+					typeOptions: { loadOptionsMethod: 'getColumnsMultiOptions' },
+				},
+				modelValue: ['id', 'title'],
+			},
+		});
+
+		const input = container.querySelector('input') as HTMLInputElement;
+		expect(input).toBeInTheDocument();
+
+		// Nothing should be emitted
+		expect(emitted('update')).toBeUndefined();
+	});
 });