Adding property for focusing on the last input when the code is filled fully

Author: AlexMiniApps

angular-code-input/src/lib/code-input.component.html

@@ -2,6 +2,7 @@
       [class.empty]="isInputElementEmptyAt(i)"
       [class.code-hidden]="isCodeHidden">
   <input #input
+         (click)="onClick($event)"
          (paste)="onPaste($event, i)"
          (input)="onInput($event, i)"
          (keydown)="onKeydown($event, i)"

angular-code-input/src/lib/code-input.component.ts

@@ -30,6 +30,7 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
   @Input() readonly isNonDigitsCode = false;
   @Input() readonly isCodeHidden = false;
   @Input() readonly isPrevFocusableAfterClearing = true;
+  @Input() readonly isFocusingOnLastByClickIfFilled = false;
   @Input() readonly inputType = 'tel';
   @Input() readonly code?: string | number;
 
@@ -72,6 +73,29 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
    * Methods
    */
 
+  onClick(e: any): void {
+    // handle click events only if the the prop is enabled
+    if (!this.isFocusingOnLastByClickIfFilled) {
+      return;
+    }
+
+    const target = e.target;
+    const last = this.inputs[this.codeLength - 1];
+    // already focused
+    if (target === last) {
+      return;
+    }
+
+    // check filling
+    const isFilled = this.getCurrentFilledCode().length >= this.codeLength;
+    if (!isFilled) {
+      return;
+    }
+
+    // focusing on the last input if is filled
+    setTimeout(() => last.focus());
+  }
+
   onInput(e: any, i: number): void {
     const next = i + 1;
     const target = e.target;
@@ -205,6 +229,16 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
   }
 
   private emitCode(): void {
+    const code = this.getCurrentFilledCode();
+
+    this.codeChanged.emit(code);
+
+    if (code.length >= this.codeLength) {
+      this.codeCompleted.emit(code);
+    }
+  }
+
+  private getCurrentFilledCode(): string {
     let code = '';
 
     for (const input of this.inputs) {
@@ -213,11 +247,7 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
       }
     }
 
-    this.codeChanged.emit(code);
-
-    if (code.length >= this.codeLength) {
-      this.codeCompleted.emit(code);
-    }
+    return code;
   }
 
   private isBackspaceKey(e: any): Promise<boolean> {