diff --git a/src/login/components/input-tag/input-tag.component.html b/src/login/components/input-tag/input-tag.component.html
index 76d7d514..599ee667 100644
--- a/src/login/components/input-tag/input-tag.component.html
+++ b/src/login/components/input-tag/input-tag.component.html
@@ -1,8 +1,9 @@
@let attr = attribute();
@let index = fieldIndex();
@if (attr) {
+ @let type = attr.annotations.inputType | inputType;
@if (index !== undefined) {
diff --git a/src/login/components/input-tag/input-tag.component.ts b/src/login/components/input-tag/input-tag.component.ts
index 17ee37ae..65567112 100644
--- a/src/login/components/input-tag/input-tag.component.ts
+++ b/src/login/components/input-tag/input-tag.component.ts
@@ -54,6 +54,9 @@ export class InputTagComponent extends ComponentReference {
override doUseDefaultCss = inject(USE_DEFAULT_CSS);
override classes = inject>>(LOGIN_CLASSES);
+ inputListenerTypes = ['text', 'search', 'url', 'tel', 'email', 'password'];
+ #inputTimeout: any | undefined;
+
value = computed(() => {
const valueOrValues = this.valueOrValues();
const index = this.fieldIndex();
@@ -66,6 +69,34 @@ export class InputTagComponent extends ComponentReference {
return valueOrValues ?? null;
});
+ onInput(event: Event) {
+ if (this.#inputTimeout) {
+ clearTimeout(this.#inputTimeout);
+ }
+ this.#inputTimeout = setTimeout(() => {
+ const valueOrValues = this.valueOrValues();
+ this.dispatchFormAction.emit({
+ action: 'update',
+ name: this.attribute()?.name ?? '',
+ valueOrValues: (() => {
+ if (this.fieldIndex !== undefined) {
+ if (valueOrValues instanceof Array) {
+ return valueOrValues.map((value, i) => {
+ if (i === this.fieldIndex()) {
+ return (event.target as HTMLInputElement)?.value;
+ }
+
+ return value;
+ });
+ }
+ }
+
+ return (event.target as HTMLInputElement)?.value;
+ })()
+ });
+ }, 300);
+ }
+
onChange(event: Event) {
const valueOrValues = this.valueOrValues();
this.dispatchFormAction.emit({