bug: "Next" keyboard button does not focus on correct field.

Bug Report

Ionic version: [x] 4.10.0

Current behavior: When I click the “next” button on the keyboard, the focus goes to the next “ion-input” field, even though I previously had an “ion-select” field.

Expected behavior: When you click the “next” button the focus should go to the next “ion-item” of the form.

Steps to reproduce: Start a new project On a page, put the code below

Related code:

  <form>
    <ion-item tabindex="1">
      <ion-label color="secondary" position="floating" stacked>Item 1
      </ion-label>
      <ion-input text-uppercase maxlength="60" class="f-14" type="text" clearInput></ion-input>
    </ion-item>

    <ion-item tabindex="2">
      <ion-label color="secondary" position="floating" stacked>Item 2
      </ion-label>
      <ion-select class="f-14" [interfaceOptions]="{ header: 'TESTE' }" okText="CONFIRMAR" cancelText="CANCELAR"
        interface="alert">
        <ion-select-option class="f-14">
          valor</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item tabindex="3">
      <ion-label color="secondary" position="floating" stacked>Item 3
      </ion-label>
      <ion-select class="f-14" [interfaceOptions]="{ header: 'TESTE' }" okText="CONFIRMAR" cancelText="CANCELAR"
        interface="alert">
        <ion-select-option class="f-14">
          valor</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item tabindex="4">
      <ion-label color="secondary" position="floating" stacked>Item 4

      </ion-label>
      <ion-input #enderecoCep class="f-14" maxlength="9" type="tel" clearInput>
      </ion-input>
    </ion-item>

    <ion-item tabindex="5">
      <ion-label color="secondary" position="floating" stacked>Item 5
      </ion-label>
      <ion-select class="f-14" [interfaceOptions]="{ header: 'TESTE' }" okText="CONFIRMAR" cancelText="CANCELAR"
        interface="alert">
        <ion-select-option class="f-14">
          valor</ion-select-option>
      </ion-select>
    </ion-item>

    <ion-item tabindex="6">
      <ion-label color="secondary" position="floating" stacked>Item 6
      </ion-label>
      <ion-input text-uppercase maxlength="60" class="f-14" type="text" clearInput></ion-input>
    </ion-item>


    <ion-item tabindex="7">
      <ion-label color="secondary" position="floating" stacked>Item 7
      </ion-label>
      <ion-input text-uppercase maxlength="60" class="f-14" type="text" clearInput></ion-input>
    </ion-item>

  </form>

Other information: The focus sequence is in the fields: 1 --> 4 --> 6 --> 7. These are ion-input fields.

Ionic info:

Ionic CLI                     : 5.4.1
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.2.0
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : not available
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 26 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (C:\Android\sdk)
   NodeJS            : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.10.2
   OS                : Windows 10

[SidiBecker]

Hi @liamdebeasi, thanks for the consideration. It is noteworthy that it is not just “ion-select” components that have the bug. Components such as “ion-datetime” and “ionic-selectable” are also not gaining focus. That is, components that do not have a text input.

[SidiBecker]

Hi @liamdebeasi, any correction forecasts?