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

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

@@ -415,7 +415,7 @@
 				:disabled="isReadOnly || remoteParameterOptionsLoading"
 				:title="displayTitle"
 				:placeholder="i18n.baseText('parameterInput.select')"
-				@update:model-value="valueChanged"
+				@update:model-value="valueChangedMultiOptions"
 				@keydown.stop
 				@focus="setFocus"
 				@blur="onBlur"
@@ -1186,6 +1186,14 @@ function onUpdateTextInput(value: string) {
 	onTextInputChange(value);
 }
 
+function valueChangedMultiOptions(value: string[]): void {
+	if (remoteParameterOptionsLoading.value) {
+		return;
+	}
+
+	valueChanged(value);
+}
+
 function valueChanged(value: NodeParameterValueType | {} | Date) {
 	if (props.parameter.name === 'nodeCredentialType') {
 		activeCredentialType.value = value as string;

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

@@ -4,18 +4,26 @@ import type { useNDVStore } from '@/stores/ndv.store';
 import type { CompletionResult } from '@codemirror/autocomplete';
 import { createTestingPinia } from '@pinia/testing';
 import { faker } from '@faker-js/faker';
+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>;
-import { waitFor } from '@testing-library/vue';
-import userEvent from '@testing-library/user-event';
 
 vi.mock('@/stores/ndv.store', () => {
 	return {
 		useNDVStore: vi.fn(() => mockNdvState),
 	};
 });
 
+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();
+	});
 });