Fix input validation alert (#15749)

* Fix input validation alert

* Add override

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

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { InputBox as vsInputBox, IInputOptions, IInputBoxStyles as vsIInputBoxStyles, IMessage } from 'vs/base/browser/ui/inputbox/inputBox';
+import { InputBox as vsInputBox, IInputOptions as vsIInputBoxOptions, IInputBoxStyles as vsIInputBoxStyles, IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 import { Color } from 'vs/base/common/color';
 import { Event, Emitter } from 'vs/base/common/event';
@@ -18,6 +18,15 @@ export interface IInputBoxStyles extends vsIInputBoxStyles {
 	disabledInputForeground?: Color;
 }
 
+export interface IInputOptions extends vsIInputBoxOptions {
+	/**
+	 * Whether calls to validate require the force parameter to be set to true
+	 * to run the base VS Input Box validation logic. See validate() override
+	 * for more info.
+	 */
+	requireForceValidations?: boolean
+}
+
 export class InputBox extends vsInputBox {
 	private enabledInputBackground?: Color;
 	private enabledInputForeground?: Color;
@@ -34,8 +43,8 @@ export class InputBox extends vsInputBox {
 	private _isTextAreaInput = false;
 	private _hideErrors = false;
 
-	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) {
+	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, private _sqlOptions?: IInputOptions) {
-		super(container, contextViewProvider, options);
+		super(container, contextViewProvider, _sqlOptions);
 		this.enabledInputBackground = this.inputBackground;
 		this.enabledInputForeground = this.inputForeground;
 		this.enabledInputBorder = this.inputBorder;
@@ -48,7 +57,7 @@ export class InputBox extends vsInputBox {
 			self._lastLoseFocusValue = self.value;
 		});
 
-		if (options && options.type === 'textarea') {
+		if (_sqlOptions && _sqlOptions.type === 'textarea') {
 			this._isTextAreaInput = true;
 		}
 	}
@@ -137,4 +146,19 @@ export class InputBox extends vsInputBox {
 		this.inputForeground = enabled ? this.enabledInputForeground : this.disabledInputForeground;
 		this.inputBorder = enabled ? this.enabledInputBorder : this.disabledInputBorder;
 	}
+
+	public override validate(force?: boolean): MessageType | undefined {
+		// We override the validate call here because in some situations we could end up with an "invalid" alert
+		// being announced incorrectly. For example the InputBox component has its own async validation - and so
+		// if a change was made to the text then the base VS InputBox would call validate immediately - before
+		// the async validation was able to trigger and complete and so the state could still be invalid at that
+		// point
+		// So instead we allow users of the input box to control whether to let the base input box do its validation
+		// as normal or whether to require manually calling validate with force === true in order to run the validation
+		// logic.
+		if (force || this._sqlOptions?.requireForceValidations !== true) {
+			return super.validate();
+		}
+		return undefined;
+	}
 }

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

@@ -11,10 +11,10 @@ import {
 import * as azdata from 'azdata';
 
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
-import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import { IInputOptions, InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';
 
-import { IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
+import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import * as nls from 'vs/nls';
@@ -73,6 +73,7 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 			useDefaultValidation: true
 		};
 		if (this._inputContainer) {
+			inputOptions.requireForceValidations = true; // Non-text area input boxes handle our own validations when the text changes so don't run the base ones
 			this._input = new InputBox(this._inputContainer.nativeElement, this.contextViewService, inputOptions);
 			this.onkeydown(this._input.inputElement, (e: StandardKeyboardEvent) => {
 				if (e.keyCode === KeyCode.Enter) {
@@ -159,7 +160,7 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 	public override async validate(): Promise<boolean> {
 		await super.validate();
 		// Let the input validate handle showing/hiding the error message
-		const valid = this.inputElement.validate() === undefined;
+		const valid = this.inputElement.validate(true) === undefined;
 
 		// set aria label based on validity of input
 		if (valid) {