Add optional sortByLabel to QuickPick to control whether to re-sort i…

…tems when query changes

Summary:
Address issue #73904 by adding an optional `sortByLabel` to the QuickPick class which determines whether the picker re-sorts the result list when the user types in the input field.

If true, the picker applies a sort to order results by the index of the first appearance of the input in the label.

For backwards compatibility, this field is true by default.

#73904

Test Plan:
attached video shows behavior both before and after

{F167292605}

note: there aren't any existing tests on what happens when the query input changes in the QuickPick

Reviewers: dalongi, ericblue, hchau

Reviewed By: ericblue

Differential Revision: https://phabricator.intern.facebook.com/D16203434

Signature: 16203434:1562878837:5413e3852f2bd04c8e81b9fe5c4a08127dfe3b65

src/vs/platform/quickinput/common/quickInput.ts

@@ -57,6 +57,11 @@ export interface IPickOptions<T extends IQuickPickItem> {
 	 */
 	matchOnLabel?: boolean;
 
+	/**
+	 * an optional flag to sort the final results by index of first query match in label. Defaults to true.
+	 */
+	sortByLabel?: boolean;
+
 	/**
 	 * an option flag to control whether focus is always automatically brought to a list item. Defaults to true.
 	 */
@@ -188,6 +193,8 @@ export interface IQuickPick<T extends IQuickPickItem> extends IQuickInput {
 
 	matchOnLabel: boolean;
 
+	sortByLabel: boolean;
+
 	autoFocusOnList: boolean;
 
 	quickNavigate: IQuickNavigateConfiguration | undefined;

src/vs/vscode.d.ts

@@ -1616,6 +1616,11 @@ declare module 'vscode' {
 		 */
 		matchOnDetail?: boolean;
 
+		/**
+		 * An optional flag to sort the final results by index of first query match in label, defaults to true.
+		 */
+		sortByLabel?: boolean;
+
 		/**
 		 * An optional string to show as place holder in the input box to guide the user what to pick on.
 		 */
@@ -7853,6 +7858,11 @@ declare module 'vscode' {
 		 */
 		matchOnDetail: boolean;
 
+		/**
+		 * An optional flag to sort the final results by index of first query match in label. Defaults to true.
+		 */
+		sortByLabel: boolean;
+
 		/**
 		 * Active items. This can be read and updated by the extension.
 		 */

src/vs/workbench/api/common/extHost.protocol.ts

@@ -475,6 +475,8 @@ export interface TransferQuickPick extends BaseTransferQuickInput {
 
 	matchOnDescription?: boolean;
 
+	sortByLabel?: boolean;
+
 	matchOnDetail?: boolean;
 }
 

src/vs/workbench/api/common/extHostQuickOpen.ts

@@ -54,6 +54,7 @@ export class ExtHostQuickOpen implements ExtHostQuickOpenShape {
 			placeHolder: options && options.placeHolder,
 			matchOnDescription: options && options.matchOnDescription,
 			matchOnDetail: options && options.matchOnDetail,
+			sortByLabel: options && options.sortByLabel,
 			ignoreFocusLost: options && options.ignoreFocusOut,
 			canPickMany: options && options.canPickMany
 		}, token);
@@ -485,6 +486,7 @@ class ExtHostQuickPick<T extends QuickPickItem> extends ExtHostQuickInput implem
 	private _canSelectMany = false;
 	private _matchOnDescription = true;
 	private _matchOnDetail = true;
+	private _sortByLabel = true;
 	private _activeItems: T[] = [];
 	private readonly _onDidChangeActiveEmitter = new Emitter<T[]>();
 	private _selectedItems: T[] = [];
@@ -550,6 +552,15 @@ class ExtHostQuickPick<T extends QuickPickItem> extends ExtHostQuickInput implem
 		this.update({ matchOnDetail });
 	}
 
+	get sortByLabel() {
+		return this._sortByLabel;
+	}
+
+	set sortByLabel(sortByLabel: boolean) {
+		this._sortByLabel = sortByLabel;
+		this.update({ sortByLabel });
+	}
+
 	get activeItems() {
 		return this._activeItems;
 	}

src/vs/workbench/browser/parts/quickinput/quickInput.ts

@@ -343,6 +343,7 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 	private _matchOnDescription = false;
 	private _matchOnDetail = false;
 	private _matchOnLabel = true;
+	private _sortByLabel = true;
 	private _autoFocusOnList = true;
 	private _activeItems: T[] = [];
 	private activeItemsUpdated = false;
@@ -434,6 +435,16 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 		this.update();
 	}
 
+	get sortByLabel() {
+		return this._sortByLabel;
+	}
+
+	set sortByLabel(sortByLabel: boolean) {
+		this._sortByLabel = sortByLabel;
+		this.update();
+	}
+
+
 	get autoFocusOnList() {
 		return this._autoFocusOnList;
 	}
@@ -762,6 +773,7 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 		this.ui.list.matchOnDescription = this.matchOnDescription;
 		this.ui.list.matchOnDetail = this.matchOnDetail;
 		this.ui.list.matchOnLabel = this.matchOnLabel;
+		this.ui.list.sortByLabel = this.sortByLabel;
 		this.ui.setComboboxAccessibility(true);
 		this.ui.inputBox.setAttribute('aria-label', QuickPick.INPUT_BOX_ARIA_LABEL);
 	}
@@ -1259,6 +1271,7 @@ export class QuickInputService extends Component implements IQuickInputService {
 			input.matchOnDescription = !!options.matchOnDescription;
 			input.matchOnDetail = !!options.matchOnDetail;
 			input.matchOnLabel = (options.matchOnLabel === undefined) || options.matchOnLabel; // default to true
+			input.sortByLabel = (options.sortByLabel === undefined) || options.sortByLabel; // default to true
 			input.autoFocusOnList = (options.autoFocusOnList === undefined) || options.autoFocusOnList; // default to true
 			input.quickNavigate = options.quickNavigate;
 			input.contextKey = options.contextKey;
@@ -1378,6 +1391,7 @@ export class QuickInputService extends Component implements IQuickInputService {
 		ui.list.matchOnDescription = false;
 		ui.list.matchOnDetail = false;
 		ui.list.matchOnLabel = true;
+		ui.list.sortByLabel = true;
 		ui.ignoreFocusOut = false;
 		this.setComboboxAccessibility(false);
 		ui.inputBox.removeAttribute('aria-label');

src/vs/workbench/browser/parts/quickinput/quickInputList.ts

@@ -222,6 +222,7 @@ export class QuickInputList {
 	matchOnDescription = false;
 	matchOnDetail = false;
 	matchOnLabel = true;
+	sortByLabel = true;
 	private readonly _onChangedAllVisibleChecked = new Emitter<boolean>();
 	onChangedAllVisibleChecked: Event<boolean> = this._onChangedAllVisibleChecked.event;
 	private readonly _onChangedCheckedCount = new Emitter<number>();
@@ -516,7 +517,7 @@ export class QuickInputList {
 		const shownElements = this.elements.filter(element => !element.hidden);
 
 		// Sort by value
-		if (query) {
+		if (this.sortByLabel && query) {
 			const normalizedSearchValue = query.toLowerCase();
 			shownElements.sort((a, b) => {
 				return compareEntries(a, b, normalizedSearchValue);