Ionic input field does not move to next field automatically

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();
          }

        }