Allow new value on QuickPick in a VSCode extension

Question

I want to display to the user an input with some options, but the user can answer a new one. Using showQuickPick I can show some options, but if the user answer a different option the return is undefined.

It's possible to do what I want?

I have already think about create a New option and then show an InputBox to the user, but I don't want that the user need to answer two questions.

Answer 1

I have used a solution where I inject the user input in the list of items.
It works pretty well:

const choices = ['a', 'b']

async function getUserSelectdValue() {
    return new Promise((resolve) => {
        const quickPick = window.createQuickPick();
        quickPick.items = choices.map(choice => ({ label: choice }));

        quickPick.title = 'Choose your favorite value:'

        quickPick.onDidChangeValue(() => {
            // INJECT user values into proposed values
            if (!choices.includes(quickPick.value)) quickPick.items = [quickPick.value, ...choices].map(label => ({ label }))
        })

        quickPick.onDidAccept(() => {
            const selection = quickPick.activeItems[0]
            resolve(selection.label)
            quickPick.hide()
        })
        quickPick.show();
    })
}

Please let me know if you need further explanations