Test: Finalization of `keepScrollPosition: boolean` in quickpick API

[TylerLeonhardt]

Refs: #132068

• anyOS @roblourens
• anyOS @dbaeumer

Complexity: 3

Create Issue

---

This iteration we added a new property on the QuickPick object that allows you to control whether or not the scroll position (cursorTop) in the quickpick moves back to the top of the list.

• Create a new extension
• Get the latest vscode.d.ts: npx vscode-dts main
• using the QuickPick object you get back from the window.createQuickPick() API, play with the new keepScrollPosition: boolean

Usecases:

• Implementing a "remove this item from the list" using the also being finalized QuickPickItemButtons (think, Ctrl/Cmd + P x QuickPickItemButton)
• Implementing a "toggle this item in someway" using the also being finalized QuickPickItemButtons (think, "Insert Snippet" command)
• Asynchronously loading items in the quickpick (like setInterval adding an item to the list by reassigning the .items property... scroll shouldn't jump to the top)

Useful stuff

• Create an extension guide
• Extensions samples repo
• Add a finalized API: npx vscode-dts main
• Add a proposed API:
  • First add the proposed API to the package.json (see below)
  • Then run npx vscode-dts dev to get the typings

	"enabledApiProposals": [
		"quickPickSeparators"
	],

Note the name of the proposed API is gathered from the file name in the vscode-dts folder

[dbaeumer]

Nice work! All cases worked as expected for me.

[roblourens]

Edit - never mind, I was thinking the selected item was going to be maintained. The scroll position is maintained.

I must be doing it wrong, the most basic case isn't working for me:

vscode.commands.registerCommand('extension.helloWorld', async (args) => {
	const quick = vscode.window.createQuickPick();
	quick.keepScrollPosition = true;

	const items: vscode.QuickPickItem[] = [
		{ label: 'Hello', description: 'World 1' },
		{ label: 'Hello', description: 'World 2' },
		{ label: 'Hello', description: 'World 3' },
	];
	quick.items = items;
	setInterval(() => {
		items.push({ label: 'Hello: ' + Date.now() });
		quick.items = items;
	}, 1000);

	quick.show();
});

The scroll position is reset when the items are updated