Ionic input field does not move to next field automatically - ionic-framework

Question

Im using ionic 3 for my mobile application, I have some issues with my input fields which do not move automatically to the next field. For example when I click the first input filed and fill the first one, the cursor does not move to the next field. How to do that correctly?
<ion-grid>
<ion-row>
<ion-col>
<ion-item >
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="2" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="3" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="4" ></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>

Answer 1

You can use the following approach, there could be better approaches i'm just sharing what i know.
What i am doing here is setting a reference of the next element (eg: #b), and on keyup event i am passing that reference to my function in .ts file which only calls the .setFocus() on the referenced element.
<ion-grid>
<ion-row>
<ion-col>
<ion-item >
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" (keyup)="moveFocus(b)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="2" #b (keyup)="moveFocus(c)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="3" #c (keyup)="moveFocus(d)" ></ion-input>
</ion-item>
</ion-col>
<ion-col >
<ion-item>
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="4" #d ></ion-input>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
.ts:
import { Component } from '#angular/core';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor() {
}
moveFocus(nextElement) {
nextElement.focus();
}
}

Answer 2

You can try something with the (keyup) or (keydown) events. There is also documentation available on the angular docs that talks about forms and user Input.
HTML
<input (keyup)="onKey($event)">
.ts
onKey(event) {
if (event.key === "Enter") {
console.log(event);
}
}

Answer 3

This can be achieved by using the nextElementSibling , you can use the Keyup event to achieve this , here is the Pseudo code
Add keyup event to the event fields as follows (keyup)="keytab($event)"
keytab(event){
let element = event.srcElement.nextElementSibling; // get the sibling element
if(element == null) // check if its null
return;
else
element.focus(); // focus if not null
}
In order to make it more clear manner you can create a directive also as follows
tabindex.directive.ts:
import { Directive, HostListener, Input } from '#angular/core';
import { TextInput } from 'ionic-angular';
#Directive({
selector: '[yourTabindex]'
})
export class TabindexDirective {
constructor(private inputRef: TextInput) { }
#HostListener('keydown', ['$event']) onInputChange(e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
this.inputRef.focusNext();
}
}
}
Don't forget to include this directive in Modules page and you can use it on your input fields as follows ,as a sample:
<ion-input type="tel" placeholder="*" maxlength="1" tabindex="1" yourTabindex ></ion-input>

Answer 4

Adding "scrollAssist: true" and "autoFocusAssist: true" to app.module in the #ngModule would solve this problem.
imports: [
IonicModule.forRoot(MyApp, {
scrollAssist: true,
autoFocusAssist: true
})
],