Device tab button ignores ion-select or ion-radio


#1

Hi everyone!

I’m having some trouble when using tab button in devices.

if i have this sequence:

  1. ion-input
  2. ion-select
  3. ion-radio
  4. ion-input

And then, i use hit tab button to go to the next input, the focus go straight from item (1) to input (4), ignoring inputs (2) and (3), Even forcing it with tabindex html attribute.

So, is there a way to make ionic respect the sequencial implementation or to do it programmatically?


#2

Can you give a code example?


#3

Sure. Simple like this code below. When running from device, it jumps from “mae” field straight to “cpf” field ignoring the ion-select field.

          <ion-item>
            <ion-label floating>Nome da Mãe Completo</ion-label>
            <ion-input type="text" [formControl]="dataForm.controls['mae']"></ion-input>
          </ion-item>

          <ion-item>
            <ion-label floating>Tipo de Pessoa</ion-label>
            <ion-select [formControl]="dataForm.controls['tipo_pessoa']" (ionChange)="selectPfOrPj()">
              <ion-option [value]="PF">PF</ion-option>
              <ion-option [value]="PJ">PJ</ion-option>
            </ion-select>
          </ion-item>

          <ion-item>
            <ion-label floating>CPF</ion-label>
            <ion-input type="tel" limit="14" pattern="\d*" mask="***.***.***-**" formControlName="cpf" (ionChange)="checkCpf()"></ion-input>
          </ion-item>