Transfer focus to list on arrow-down (#45589)

microsoft · Mar 26, 2018 · fa155b7 · fa155b7
1 parent 14fc1c5
commit fa155b7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/src/vs/workbench/browser/parts/quickinput/quickInput.ts b/src/vs/workbench/browser/parts/quickinput/quickInput.ts
@@ -88,21 +88,7 @@ export class QuickInputService extends Component implements IQuickInputService {
 		this.toUnbind.push(this.inputBox.onKeyDown(event => {
 			switch (event.keyCode) {
 				case KeyCode.DownArrow:
-					this.checkboxList.focus('Next');
-					break;
-				case KeyCode.UpArrow:
-					this.checkboxList.focus('Previous');
-					break;
-				case KeyCode.PageDown:
-					this.checkboxList.focus('NextPage');
-					break;
-				case KeyCode.PageUp:
-					this.checkboxList.focus('PreviousPage');
-					break;
-				case KeyCode.Space:
-					if (event.ctrlKey) {
-						this.checkboxList.toggleCheckbox();
-					}
+					this.checkboxList.domFocus();
 					break;
 			}
 		}));
@@ -123,6 +109,12 @@ export class QuickInputService extends Component implements IQuickInputService {
 		this.toUnbind.push(this.checkboxList.onSelectedCountChanged(count => {
 			this.count.setCount(count);
 		}));
+		this.toUnbind.push(this.checkboxList.onLeave(() => {
+			// Defer to avoid the input field reacting to the triggering key.
+			setTimeout(() => {
+				this.inputBox.setFocus();
+			}, 0);
+		}));
 
 		this.toUnbind.push(dom.addDisposableListener(this.container, 'focusout', (e: FocusEvent) => {
 			for (let element = <Element>e.relatedTarget; element; element = element.parentElement) {
@@ -173,7 +165,7 @@ export class QuickInputService extends Component implements IQuickInputService {
 
 		this.inputBox.setValue('');
 		// TODO: Localize shortcut.
-		this.inputBox.setPlaceholder(options.placeHolder ? localize('quickInput.ctrlSpaceToSelectWithPlaceholder', "{1} ({0} to toggle)", 'Ctrl+Space', options.placeHolder) : localize('quickInput.ctrlSpaceToSelect', "{0} to toggle", 'Ctrl+Space'));
+		this.inputBox.setPlaceholder(options.placeHolder || '');
 		// TODO: Progress indication.
 		this.checkboxList.setElements(await picks);
 		this.checkboxList.matchOnDescription = options.matchOnDescription;

diff --git a/src/vs/workbench/browser/parts/quickinput/quickInputCheckboxList.ts b/src/vs/workbench/browser/parts/quickinput/quickInputCheckboxList.ts
@@ -149,6 +149,8 @@ export class QuickInputCheckboxList {
 	onAllVisibleSelectedChanged: Event<boolean> = this._onAllVisibleSelectedChanged.event;
 	private _onSelectedCountChanged = new Emitter<number>(); // TODO: Debounce
 	onSelectedCountChanged: Event<number> = this._onSelectedCountChanged.event;
+	private _onLeave = new Emitter<void>();
+	onLeave: Event<void> = this._onLeave.event;
 	private elementDisposables: IDisposable[] = [];
 	private disposables: IDisposable[] = [];
 
@@ -165,8 +167,16 @@ export class QuickInputCheckboxList {
 		this.disposables.push(this.list);
 		this.disposables.push(this.list.onKeyDown(e => {
 			const event = new StandardKeyboardEvent(e);
-			if (event.keyCode === KeyCode.Space) {
-				this.toggleCheckbox();
+			switch (event.keyCode) {
+				case KeyCode.Space:
+					this.toggleCheckbox();
+					break;
+				case KeyCode.UpArrow:
+					const focus = this.list.getFocus();
+					if (focus.length === 1 && focus[0] === 0) {
+						this._onLeave.fire();
+					}
+					break;
 			}
 		}));
 	}
@@ -212,6 +222,10 @@ export class QuickInputCheckboxList {
 		this.list['focus' + what]();
 	}
 
+	domFocus() {
+		this.list.domFocus();
+	}
+
 	layout(): void {
 		this.list.layout();
 	}