From d647dbde09d08dc33c6a93c2122d973f73b15b37 Mon Sep 17 00:00:00 2001
From: Charles Gagnon <chgagnon@microsoft.com>
Date: Fri, 3 Jan 2020 11:07:24 -0800
Subject: [PATCH] Make dropdown update width immediately upon opening (#8716)

* Make dropdown update width immediately upon opening

* remove type

* min size of the input container width

* use clamp
---
 .../editableDropdown/browser/dropdown.ts      | 34 +++++++++++--------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/sql/base/parts/editableDropdown/browser/dropdown.ts b/src/sql/base/parts/editableDropdown/browser/dropdown.ts
index 2b7ec85221..8c5cc5edde 100644
--- a/src/sql/base/parts/editableDropdown/browser/dropdown.ts
+++ b/src/sql/base/parts/editableDropdown/browser/dropdown.ts
@@ -23,6 +23,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { Tree } from 'vs/base/parts/tree/browser/treeImpl';
 import { ITree } from 'vs/base/parts/tree/browser/tree';
 import { onUnexpectedError } from 'vs/base/common/errors';
+import { clamp } from 'vs/base/common/numbers';
 
 export interface IDropdownOptions extends IDropdownStyles {
 	/**
@@ -264,31 +265,36 @@ export class Dropdown extends Disposable {
 			}, 0);
 			let height = filteredLength * this._renderer.getHeight() > this._options.maxHeight! ? this._options.maxHeight! : filteredLength * this._renderer.getHeight();
 			this._treeContainer.style.height = height + 'px';
-			this._treeContainer.style.width = DOM.getContentWidth(this._inputContainer) - 2 + 'px';
+			this.updateTreeWidth();
 			this._tree.layout(parseInt(this._treeContainer.style.height));
 			this._tree.refresh().catch(e => onUnexpectedError(e));
 		}
 	}
 
+	/**
+	 * Update the width of the context tree to better fit the contents.
+	 */
+	private updateTreeWidth(): void {
+		if (this._dataSource && this._dataSource.options) {
+			const longestOption = this._dataSource.options.reduce((previous, current) => {
+				return previous.value.length > current.value.length ? previous : current;
+			}, { value: '' });
+			this._widthControlElement.innerText = longestOption.value;
+
+			const inputContainerWidth = DOM.getContentWidth(this._inputContainer);
+			const longestOptionWidth = DOM.getTotalWidth(this._widthControlElement);
+			this._treeContainer.style.width = `${clamp(longestOptionWidth, inputContainerWidth, 500)}px`;
+		}
+
+	}
+
 	public set values(vals: string[] | undefined) {
 		if (vals) {
-			const longestString = vals.reduce((previous, current) => {
-				return previous.length > current.length ? previous : current;
-			}, '');
-
-			this._widthControlElement.innerText = longestString;
-
 			this._filter.filterString = '';
 			this._dataSource.options = vals.map(i => { return { value: i }; });
+			this.updateTreeWidth();
 			let height = this._dataSource.options.length * 22 > this._options.maxHeight! ? this._options.maxHeight! : this._dataSource.options.length * 22;
-
 			this._treeContainer.style.height = height + 'px';
-
-			if (longestString.length > 10) {
-				this._treeContainer.style.width = DOM.getTotalWidth(this._widthControlElement) + 'px';
-			}
-			this._treeContainer.style.maxWidth = `500px`;
-
 			this._tree.layout(parseInt(this._treeContainer.style.height));
 			this._tree.setInput(new DropdownModel()).catch(e => onUnexpectedError(e));
 			this._input.validate();