From d6ef42c8b007520de7908977dedc827078fe0cc2 Mon Sep 17 00:00:00 2001
From: Amir Omidi <amomidi@microsoft.com>
Date: Fri, 15 Nov 2019 15:17:46 -0800
Subject: [PATCH] Change how dropdowns get their lengths - take 2 (#8356)

* Add an element for width control

* Change the method that retrieves length

* Change to a readonly element
---
 .../editableDropdown/browser/dropdown.ts      | 20 ++++++++++++++++++-
 .../browser/media/dropdownList.css            |  6 ++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/sql/base/parts/editableDropdown/browser/dropdown.ts b/src/sql/base/parts/editableDropdown/browser/dropdown.ts
index d22f327064..2b7ec85221 100644
--- a/src/sql/base/parts/editableDropdown/browser/dropdown.ts
+++ b/src/sql/base/parts/editableDropdown/browser/dropdown.ts
@@ -96,6 +96,7 @@ export class Dropdown extends Disposable {
 
 	private _onFocus = this._register(new Emitter<void>());
 	public onFocus: Event<void> = this._onFocus.event;
+	private readonly _widthControlElement: HTMLElement;
 
 	constructor(
 		container: HTMLElement,
@@ -105,6 +106,10 @@ export class Dropdown extends Disposable {
 		super();
 		this._options = opt || Object.create(null);
 		mixin(this._options, defaults, false);
+		this._widthControlElement = DOM.append(container, document.createElement('span'));
+		this._widthControlElement.classList.add('monaco-dropdown-width-control-element');
+		this._widthControlElement.setAttribute('aria-hidden', 'true');
+
 		this._el = DOM.append(container, DOM.$('.monaco-dropdown'));
 		this._el.style.width = '100%';
 
@@ -267,14 +272,27 @@ export class Dropdown extends Disposable {
 
 	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 }; });
 			let height = this._dataSource.options.length * 22 > this._options.maxHeight! ? this._options.maxHeight! : this._dataSource.options.length * 22;
+
 			this._treeContainer.style.height = height + 'px';
-			this._treeContainer.style.width = DOM.getContentWidth(this._inputContainer) - 2 + '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();
+
 		}
 	}
 
diff --git a/src/sql/base/parts/editableDropdown/browser/media/dropdownList.css b/src/sql/base/parts/editableDropdown/browser/media/dropdownList.css
index 899d941da9..fca82f0bbe 100644
--- a/src/sql/base/parts/editableDropdown/browser/media/dropdownList.css
+++ b/src/sql/base/parts/editableDropdown/browser/media/dropdownList.css
@@ -12,6 +12,12 @@
 	background-image: url("dropdownarrow_inverse.svg");
 }
 
+.monaco-dropdown-width-control-element {
+	position: absolute;
+	left: -10000px;
+	visibility: hidden;
+}
+
 .monaco-dropdown .monaco-action-bar .action-label.codicon.dropdown-arrow {
 	padding: 0;
 	background-size: 10px;