;
- /**
- * Runs input validation
- */
- reportValidity() {
- this._dirty = true;
- this.input.checkValidity();
+ connectedCallback(): void {
+ super.connectedCallback();
+ this.addEventListener('keydown', this.onKeydown);
+ this.addEventListener('invalid', this.onError);
+
+ this.internals.form?.addEventListener('submit', () => {
+ this.reportValidity();
+ });
}
- @state() private _dirty = false;
+ disconnectedCallback(): void {
+ super.disconnectedCallback();
+ this.removeEventListener('keydown', this.onKeydown);
+ this.removeEventListener('invalid', this.onError);
+ }
- private get dirty(): boolean {
- return this._dirty;
+ private onKeydown = (event: KeyboardEvent): void => {
+ if (event.code === 'Enter' && this.form) {
+ submit(this.form);
+ }
}
- private get hasValue(): boolean {
- return this.input?.value.length > 0;
+ private onError = (): void => {
+ this.onInvalid(this.internals.validity);
}
- private get _invalidText() {
- return this.customInvalidText || this.input?.validationMessage;
+ @state() private dirty = false;
+
+ validityCallback(): string | void {
+ return this.customInvalidText || this.validationTarget?.validationMessage;
}
- private get _invalidState() {
- return this.input && !this.input?.validity.valid;
+ reportValidity() {
+ this.dirty = true;
+ return this.checkValidity();
}
- private inputHandler() {
- this.validity = this.input?.validity;
- this.value = this.input.value;
- this.onInput(this.input.value);
+ valueChangedCallback(value: string): void {
+ this.value = value;
}
- private changeHandler() {
- this._dirty = true;
- this.onChange(this.input.value);
+ private inputHandler(event: Event) {
+ const value = (event.target as HTMLInputElement).value;
+
+ this.setValue(value);
+ this.onInput(value);
+ }
+
+ private changeHandler(event: Event) {
+ const value = (event.target as HTMLInputElement).value;
+
+ this.dirty = true;
+ this.setValue(value);
+ this.onChange(value);
}
firstUpdated() {
- this.validity = this.input?.validity;
- if (this._invalidState) {
- this.requestUpdate();
- }
+ this.setValue(this.value);
}
render(): TemplateResult {
- const invalidMessage = this._invalidState
- ? html`${this._invalidText}
`
+ const invalidMessage = !this.checkValidity()
+ ? html`${this.validationMessage}
`
: ``;
const helpMessage = this.helpText ? html`${this.helpText}
` : ``;
const icon = this.icon
@@ -182,8 +205,8 @@ export default class BlInput extends LitElement {
const classes = {
'dirty': this.dirty,
- 'has-icon': this.icon || (this.dirty && this._invalidState),
- 'has-value': this.hasValue,
+ 'has-icon': this.icon || (this.dirty && !this.checkValidity()),
+ 'has-value': this.value !== null && this.value !== '',
};
return html`
diff --git a/src/utilities/form-control.test.ts b/src/utilities/form-control.test.ts
new file mode 100644
index 00000000..9287ec42
--- /dev/null
+++ b/src/utilities/form-control.test.ts
@@ -0,0 +1,41 @@
+import { elementUpdated, expect, fixture, fixtureCleanup } from "@open-wc/testing";
+import { html, LitElement } from "lit";
+import { customElement, query } from "lit/decorators.js";
+import { innerInputValidators } from "./form-control"
+
+@customElement('my-valid-input')
+class MyValidInput extends LitElement {
+ validationTarget: HTMLInputElement;
+}
+
+
+@customElement('my-invalid-input')
+class MyInvalidInput extends LitElement {
+ @query('input')
+ validationTarget: HTMLInputElement;
+
+ render() {
+ return html``
+ }
+}
+
+describe('Form Control Validators', () => {
+ afterEach(fixtureCleanup);
+
+ it('should return true if validationTarget is not present', async () => {
+
+ const el = await fixture(html``);
+
+ expect(innerInputValidators.every(validator => validator.isValid(el))).to.be.true;
+ });
+
+ it('should return correct value if validationTarget present', async () => {
+ const el = await fixture(html``);
+
+ await elementUpdated(el);
+
+ expect(innerInputValidators.every(validator => validator.isValid(el))).to.be.false;
+ expect(innerInputValidators.find(validator => !validator.isValid(el))?.key).to.eq('valueMissing');
+
+ });
+});
diff --git a/src/utilities/form-control.ts b/src/utilities/form-control.ts
new file mode 100644
index 00000000..f6cd2b3b
--- /dev/null
+++ b/src/utilities/form-control.ts
@@ -0,0 +1,20 @@
+const validityStates: Array = [
+ 'valueMissing',
+ 'typeMismatch',
+ 'tooLong',
+ 'tooShort',
+ 'rangeUnderflow',
+ 'rangeOverflow',
+ 'badInput',
+ 'customError',
+];
+
+export const innerInputValidators = validityStates.map(key => ({
+ key,
+ isValid(instance: HTMLElement & { validationTarget: HTMLInputElement }) {
+ if (instance.validationTarget) {
+ return !instance.validationTarget.validity[key];
+ }
+ return true;
+ },
+}));