How to remove the 'OK' button from QuickPick

Question

I'm developing a VS-Code extension using Typescript.

In one of the flows, it creates a QuickPick menu using the following API:

let quickPick: vscode.QuickPick<vscode.QuickPickItem> = vscode.window.createQuickPick();
quickPick.items = this.getValues();
quickPick.canSelectMany = true; // Enable checkboxes

// Set listeners
quickPick.onDidChangeSelection(items => {
    // --> Do an important action here <--
});
quickPick.show();

When the user clicks on one of the checkboxes, the action occurs immediately -> There is no need for OK button in my scenario.

Does somebody know how to remove the OK button?

Thanks.

Answer 1

It would seem that calling quickPick.ok(false) to hide the button would work.

But looking at the code the ok button is always rendered for canSelectMany QuickPicks.

You could use quickPick.customButton(true) together with quickPick.customLabel("your label") to replace the ok button instead.

However when I look at your scenario maybe you do not need multi select if each click on a checkmark already performs the action. Checkmarks are usually used only to mark multiple things to happen, hence the OK button to run the combined actions.

Answer 2

just add quickPick.ok(false) to hide your ok button.

You can also customize you ok button with quickPick.customButton(true) with quickPick.customLabel("label") to replace ok and ad it with ur custom ok button