validate on input with debounce

keycloakify · Oct 21, 2024 · 80f31ab · 80f31ab
1 parent 936a674
commit 80f31ab
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git 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;
     <input
-        [type]="attr.annotations.inputType | inputType"
+        [type]="type"
         [id]="attr.name"
         [name]="attr.name"
         [value]="value()"
@@ -26,6 +27,7 @@
         [attr.step]="attr.annotations.inputTypeStep"
         [kcAttributes]="attr.html5DataAnnotations"
         (change)="onChange($event)"
+        (input)="inputListenerTypes.includes(type) && onInput($event)"
         (blur)="onBlur()"
     />
     @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
@@ -54,6 +54,9 @@ export class InputTagComponent extends ComponentReference {
     override doUseDefaultCss = inject<boolean>(USE_DEFAULT_CSS);
     override classes = inject<Partial<Record<ClassKey, string>>>(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({