Fix input validation alert (#15749)

* Fix input validation alert

* Add override
This commit is contained in:
Charles Gagnon
2021-06-17 13:47:53 -07:00
committed by GitHub
parent d871efc079
commit 331f8115dc
2 changed files with 32 additions and 7 deletions

View File

@@ -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) {
super(container, contextViewProvider, options);
constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, private _sqlOptions?: IInputOptions) {
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;
}
}

View File

@@ -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) {