Release v 1.2.2: Have added the prop initialFocusField for focusing on the appropriate input when the component has been appeared.

Author: AlexMiniApps

README.md

@@ -1,8 +1,8 @@
 # Code/pincode input component for angular 
 
-Code (number/chars) input component for Angular 7, 8, 9 + projects.<br />
+Robust and <b>tested</b> code (number/chars) input component for Angular 7, 8, 9, 10 + projects.<br />
 Ionic 4, 5 + is supported, can be used in iOS and Android.<br />
-Clipboard events are supported.
+<b>Clipboard</b> events are supported.
 
 Preview
 
@@ -12,9 +12,9 @@ Preview
 
 ## Supported platforms
 
-<b>Angular</b> 7, 8, 9 +<br />
+<b>Angular</b> 7, 8, 9, 10 +<br />
 <b>Ionic</b> 4, 5 +<br />
-Mobile browsers and WebViews on: <b>Android and iOS</b><br />
+Mobile browsers and WebViews on: <b>Android</b> and <b>iOS</b><br />
 Desktop browsers: <b>Chrome, Firefox, Safari, Edge v.79 +</b><br />
 Other browsers:  <b>Edge v.41 - 44</b> (without code hidden feature)
 
@@ -116,6 +116,7 @@ Example with only bottom borders:
 | <b>`isNonDigitsCode`</b> | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter <b>`code`</b> contains non digits chars and `isNonDigitsCode` is `false` the value will be ignored |
 | <b>`isPrevFocusableAfterClearing`</b> | boolean | true | When `true` after the input value deletion the caret will be moved to the previous input immediately. If `false` then after the input value deletion the caret will stay on the current input and be moved to the previous input only if the current input is empty |
 | <b>`isFocusingOnLastByClickIfFilled`</b> | boolean | false | When `true` and the code is filled then the focus will be moved to the last input element when clicked |
+| <b>`initialFocusField`</b> | number | - | The index of the input box for initial focusing. When the component will appear the focus will be placed on the input with this index. <br/> Note: If you need to dynamically hide the component it is needed to use <b>*ngIf</b> directive instead of the `[hidden]` attribute. |
 | <b>`code`</b> | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isNonDigitsCode` is `false` the value will be <b>ignored |
 
 #### Events

angular-code-input/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 1.2.2 (04.08.2020)
+**Note:** Have added the prop initialFocusField for focusing on the appropriate input when 
+the component has been appeared.
+
 # 1.2.1 (20.06.2020)
 **Note:** Have added the prop isFocusingOnLastByClickIfFilled for focusing on the last input box 
 if the code is full, and any input box clicked. 

angular-code-input/README.md

@@ -1,8 +1,8 @@
 # Code/pincode input component for angular 
 
-Code (number/chars) input component for Angular 7, 8, 9 + projects.<br />
+Robust and <b>tested</b> code (number/chars) input component for Angular 7, 8, 9, 10 + projects.<br />
 Ionic 4, 5 + is supported, can be used in iOS and Android.<br />
-Clipboard events are supported.
+<b>Clipboard</b> events are supported.
 
 Preview
 
@@ -12,9 +12,9 @@ Preview
 
 ## Supported platforms
 
-<b>Angular</b> 7, 8, 9 +<br />
+<b>Angular</b> 7, 8, 9, 10 +<br />
 <b>Ionic</b> 4, 5 +<br />
-Mobile browsers and WebViews on: <b>Android and iOS</b><br />
+Mobile browsers and WebViews on: <b>Android</b> and <b>iOS</b><br />
 Desktop browsers: <b>Chrome, Firefox, Safari, Edge v.79 +</b><br />
 Other browsers:  <b>Edge v.41 - 44</b> (without code hidden feature)
 
@@ -116,6 +116,7 @@ Example with only bottom borders:
 | <b>`isNonDigitsCode`</b> | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter <b>`code`</b> contains non digits chars and `isNonDigitsCode` is `false` the value will be ignored |
 | <b>`isPrevFocusableAfterClearing`</b> | boolean | true | When `true` after the input value deletion the caret will be moved to the previous input immediately. If `false` then after the input value deletion the caret will stay on the current input and be moved to the previous input only if the current input is empty |
 | <b>`isFocusingOnLastByClickIfFilled`</b> | boolean | false | When `true` and the code is filled then the focus will be moved to the last input element when clicked |
+| <b>`initialFocusField`</b> | number | - | The index of the input box for initial focusing. When the component will appear the focus will be placed on the input with this index. <br/> Note: If you need to dynamically hide the component it is needed to use <b>*ngIf</b> directive instead of the `[hidden]` attribute. |
 | <b>`code`</b> | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isNonDigitsCode` is `false` the value will be <b>ignored |
 
 #### Events

angular-code-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-code-input",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Code or pin code input for Angular 7, 8, 9 + / Ionic 4, 5 + projects",
   "keywords": ["angular", "pincode", "angular-pincode",  "otp", "code-input", "angular-otp", "ionic-otp", "ionic-code-input", "ionic-pincode"],
   "author": "Alexander Dmitrenko",

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

@@ -1,4 +1,5 @@
 import {
+  AfterViewChecked,
   AfterViewInit,
   Component,
   ElementRef,
@@ -22,7 +23,7 @@ enum InputState {
   templateUrl: 'code-input.component.html',
   styleUrls: ['./code-input.component.scss']
 })
-export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
+export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges, AfterViewChecked {
 
   @ViewChildren('input') inputsList: QueryList<ElementRef>;
 
@@ -32,6 +33,7 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
   @Input() readonly isPrevFocusableAfterClearing = true;
   @Input() readonly isFocusingOnLastByClickIfFilled = false;
   @Input() readonly inputType = 'tel';
+  @Input() readonly initialFocusField?: number;
   @Input() readonly code?: string | number;
 
   @Output() codeChanged = new EventEmitter<string>();
@@ -41,6 +43,10 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
 
   private inputs: HTMLInputElement[] = [];
   private inputsStates: InputState[] = [];
+  private state = {
+    isFocusingAfterAppearingCompleted: false,
+    isInitialFocusFieldEnabled: false
+  };
 
   constructor() {
   }
@@ -51,6 +57,7 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
 
   ngOnInit(): void {
     this.placeHolders = Array(this.codeLength).fill(1);
+    this.state.isInitialFocusFieldEnabled = !this.isEmpty(this.initialFocusField);
   }
 
   ngAfterViewInit(): void {
@@ -63,6 +70,10 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
     this.onInputCodeChanges();
   }
 
+  ngAfterViewChecked(): void {
+    this.focusOnInputAfterAppearing();
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.code) {
       this.onInputCodeChanges();
@@ -224,6 +235,19 @@ export class CodeInputComponent implements AfterViewInit, OnInit, OnChanges {
     });
   }
 
+  private focusOnInputAfterAppearing(): void {
+    if (!this.state.isInitialFocusFieldEnabled) {
+      return;
+    }
+
+    if (this.state.isFocusingAfterAppearingCompleted) {
+      return;
+    }
+
+    this.inputs[this.initialFocusField].focus();
+    this.state.isFocusingAfterAppearingCompleted = document.activeElement === this.inputs[this.initialFocusField];
+  }
+
   private emitChanges(): void {
     setTimeout(() => this.emitCode(), 50);
   }