QuickPick Multi-Select Custom Input Issue Example

quickpick-multi-select-custom-input.ts

export async function showMultiSelectInputBox(): Promise<string[]> {
	const items = ["testing", "boop", "77708"];
	const mappedItems = items.map((item) => ({ label: item }));

	return new Promise((resolve, _) => {
		const quickPick = window.createQuickPick();

		quickPick.placeholder = "Select/Insert a selection.";
		quickPick.items = mappedItems;

		// when this is true, quickPick.activeItems is an empty list [] onDidAccept
		// quickPick.canSelectMany = false;
		quickPick.canSelectMany = true;

		quickPick.onDidAccept(_ => {
			console.log(quickPick);
			// resolves to empty list
			resolve(quickPick.activeItems.map((item) => item.label));
			quickPick.hide();
		});

		// Allows for custom item to be selected
		// quickPick.onDidChangeValue(_ => {
		// 	if (quickPick.value === "") {
		// 		quickPick.items = mappedItems;
		// 	} else {
		// 		// include currently typed option
		// 		quickPick.items = [{ label: quickPick.value }, ...mappedItems];
		// 	}
		// });

		quickPick.onDidHide(_ => quickPick.dispose());
		quickPick.show();
	});
}

const result = await showMultiSelectInputBox();
console.log(result);