#18095 Keybindings editor

- Down arrow to navigate from search to list

src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts

@@ -197,7 +197,7 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 			placeholder: localize('SearchKeybindings.Placeholder', "Search keybindings")
 		}));
 		this._register(this.searchWidget.onDidChange(searchValue => this.delayedFiltering.trigger(() => this.render())));
-		this._register(this.searchWidget.onDidChange(searchValue => this.delayedFiltering.trigger(() => this.render())));
+		this._register(this.searchWidget.onNavigate(back => this._onNavigate(back)));
 
 		const openKeybindingsContainer = DOM.append(this.headerContainer, $('.open-keybindings-container'));
 		DOM.append(openKeybindingsContainer, $('span', null, localize('header-message', "For advanced customizations open and edit ")));
@@ -236,6 +236,13 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 		this.keybindingsList.layout(this.dimension.height - DOM.getDomNodePagePosition(this.headerContainer).height);
 	}
 
+	private _onNavigate(back: boolean): void {
+		if (!back) {
+			this.keybindingsList.getHTMLElement().focus();
+			this.keybindingsList.setFocus([0]);
+		}
+	}
+
 	private onContextMenu(e: IListContextMenuEvent<IListEntry>): void {
 		if (e.element.templateId === KEYBINDING_ENTRY_TEMPLATE_ID) {
 			this.contextMenuService.showContextMenu({

src/vs/workbench/parts/preferences/browser/preferencesEditor.ts

@@ -128,7 +128,7 @@ export class PreferencesEditor extends BaseEditor {
 			placeholder: nls.localize('SearchSettingsWidget.Placeholder', "Search Settings")
 		}));
 		this._register(this.searchWidget.onDidChange(value => this.filterPreferences(value.trim())));
-		this._register(this.searchWidget.onEnter(shift => this.preferencesRenderers.focusNextPreference(!shift)));
+		this._register(this.searchWidget.onNavigate(shift => this.preferencesRenderers.focusNextPreference(!shift)));
 
 		this.settingsTabsWidget = this._register(this.instantiationService.createInstance(SettingsTabsWidget, this.headerContainer));
 		this._register(this.settingsTabsWidget.onSwitch(() => this.switchSettings()));

src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts

@@ -235,8 +235,8 @@ export class SearchWidget extends Widget {
 	private _onDidChange = this._register(new Emitter<string>());
 	public onDidChange: Event<string> = this._onDidChange.event;
 
-	private _onEnter = this._register(new Emitter<boolean>());
-	public onEnter: Event<boolean> = this._onEnter.event;
+	private _onNavigate = this._register(new Emitter<boolean>());
+	public onNavigate: Event<boolean> = this._onNavigate.event;
 
 	constructor(parent: HTMLElement, protected options: IInputOptions,
 		@IContextViewService private contextViewService: IContextViewService,
@@ -259,7 +259,7 @@ export class SearchWidget extends Widget {
 		const searchInput = DOM.append(this.searchContainer, DOM.$('div.settings-search-input'));
 		this.inputBox = this.createInputBox(searchInput);
 		this.inputBox.onDidChange(value => this._onDidChange.fire(value));
-		this.onkeyup(this.inputBox.inputElement, (e) => this._onKeyUp(e));
+		this.onkeydown(this.inputBox.inputElement, (e) => this._onKeyDown(e));
 	}
 
 	protected createInputBox(parent: HTMLElement): InputBox {
@@ -295,11 +295,19 @@ export class SearchWidget extends Widget {
 		return this.inputBox.value;
 	}
 
-	private _onKeyUp(keyboardEvent: IKeyboardEvent): void {
+	private _onKeyDown(keyboardEvent: IKeyboardEvent): void {
 		let handled = false;
 		switch (keyboardEvent.keyCode) {
 			case KeyCode.Enter:
-				this._onEnter.fire(keyboardEvent.shiftKey);
+				this._onNavigate.fire(keyboardEvent.shiftKey);
+				handled = true;
+				break;
+			case KeyCode.UpArrow:
+				this._onNavigate.fire(true);
+				handled = true;
+				break;
+			case KeyCode.DownArrow:
+				this._onNavigate.fire(false);
 				handled = true;
 				break;
 			case KeyCode.Escape: