fix keyboard issues in editable dropdown (#1600)

src/sql/base/browser/ui/editableDropdown/dropdown.ts

@@ -132,7 +132,7 @@ export class Dropdown extends Disposable {
 			ariaLabel: this._options.ariaLabel
 		});
 
-		this._register(DOM.addDisposableListener(this._input.inputElement, DOM.EventType.FOCUS, () => {
+		this._register(DOM.addDisposableListener(this._input.inputElement, DOM.EventType.CLICK, () => {
 			this._showList();
 		}));
 
@@ -145,9 +145,13 @@ export class Dropdown extends Disposable {
 		this._register(DOM.addStandardDisposableListener(this._input.inputElement, DOM.EventType.KEY_DOWN, (e: StandardKeyboardEvent) => {
 			switch (e.keyCode) {
 				case KeyCode.Enter:
+					if (this._contextView.isVisible()) {
 						if (this._input.validate()) {
 							this._onValueChange.fire(this._input.value);
 						}
+					} else {
+						this._showList();
+					}
 					e.stopPropagation();
 					break;
 				case KeyCode.Escape:
@@ -192,6 +196,11 @@ export class Dropdown extends Disposable {
 			this._contextView.hide();
 		});
 
+		this._controller.onDropdownEscape(() => {
+			this._input.focus();
+			this._contextView.hide();
+		});
+
 		this._input.onDidChange(e => {
 			if (this._dataSource.options) {
 				this._filter.filterString = e;
@@ -231,6 +240,7 @@ export class Dropdown extends Disposable {
 	}
 
 	private _layoutTree(): void {
+		if (this._dataSource && this._dataSource.options && this._dataSource.options.length > 0) {
 			let filteredLength = this._dataSource.options.reduce((p, i) => {
 				if (this._filter.isVisible(undefined, i)) {
 					return p + 1;
@@ -243,6 +253,7 @@ export class Dropdown extends Disposable {
 			this._tree.layout(parseInt(this.$treeContainer.style('height')));
 			this._tree.refresh();
 		}
+	}
 
 	public set values(vals: string[]) {
 		if (vals) {

src/sql/base/browser/ui/editableDropdown/dropdownTree.ts

@@ -101,10 +101,19 @@ export class DropdownController extends TreeDefaults.DefaultController {
 	private _onSelectionChange = new Emitter<Resource>();
 	public readonly onSelectionChange: Event<Resource> = this._onSelectionChange.event;
 
+	private _onDropdownEscape = new Emitter<void>();
+	public readonly onDropdownEscape: Event<void> = this._onDropdownEscape.event;
+
 	constructor() {
 		super();
 	}
 
+	protected onEscape(tree: tree.ITree, event: IKeyboardEvent): boolean {
+		let response = super.onEscape(tree, event);
+		this._onDropdownEscape.fire();
+		return response;
+	}
+
 	protected onLeftClick(tree: tree.ITree, element: any, eventish: TreeDefaults.ICancelableEvent, origin: string): boolean {
 		let response = super.onLeftClick(tree, element, eventish, origin);
 		if (response) {

src/vs/base/browser/ui/contextview/contextview.ts

@@ -248,7 +248,8 @@ export class ContextView {
 		this.$view.hide();
 	}
 
-	private isVisible(): boolean {
+	// {{SQL CARBON EDIT}}
+	public isVisible(): boolean {
 		return !!this.delegate;
 	}