fix input box issues (#15587)

src/sql/azdata.proposed.d.ts

@@ -817,6 +817,13 @@ declare module 'azdata' {
 		Informational = 'Informational'
 	}
 
+	export interface InputBoxProperties {
+		/**
+		 * The maximum number of characters allowed in the input box.
+		 */
+		maxLength?: number;
+	}
+
 	export namespace workspace {
 		/**
 		 * Creates and enters a workspace at the specified location

src/sql/base/browser/ui/inputBox/inputBox.ts

@@ -93,6 +93,16 @@ export class InputBox extends vsInputBox {
 	public setHeight(value: string) {
 		if (this._isTextAreaInput) {
 			this.inputElement.style.height = value;
+			this.inputElement.style.whiteSpace = 'normal';
+		}
+	}
+
+	public setMaxLength(value: number | undefined) {
+		if (value === undefined) {
+			this.inputElement.removeAttribute('maxLength');
+		}
+		else {
+			this.inputElement.maxLength = value;
 		}
 	}
 

src/sql/workbench/api/common/extHostModelView.ts

@@ -1074,6 +1074,14 @@ class InputBoxWrapper extends ComponentWrapper implements azdata.InputBoxCompone
 		this.setProperty('validationErrorMessage', v);
 	}
 
+	public get maxLength(): number | undefined {
+		return this.properties['maxLength'];
+	}
+
+	public set maxLength(v: number | undefined) {
+		this.setProperty('maxLength', v);
+	}
+
 	public get onTextChanged(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
 		return emitter && emitter.event;

src/sql/workbench/browser/modelComponents/inputbox.component.ts

@@ -222,6 +222,7 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 		input.setAriaLabel(this.ariaLabel);
 		input.setPlaceHolder(this.placeHolder);
 		input.setEnabled(this.enabled);
+		input.setMaxLength(this.maxLength);
 		this.layoutInputBox();
 		if (this.multiline) {
 			if (isNumber(this.rows)) {
@@ -347,6 +348,10 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 		this.setPropertyFromUI<boolean>((props, value) => props.stopEnterPropagation = value, newValue);
 	}
 
+	public get maxLength(): number | undefined {
+		return this.getPropertyOrDefault<number | undefined>((props) => props.maxLength, undefined);
+	}
+
 	public focus(): void {
 		this.inputElement.focus();
 	}