Keyboard 'next' button not triggering ion-select in form

Greetings! I am developing an application in ionic where the focus is the usability in it and one of the problems that I am facing is that the ‘next’ button in the device never opens the ion-select, when the component is directly the next one.

I am able to open it programmatically, which for some cases it would solve already, but when the form is too mixed it is impossible to deal with all the changes, the user jumps over 3 inputs since it only goes from one input text to another.

I’ve attempted to capture the keycode for it to make it manually like this:

@HostListener(‘keydown’, [’$event’]) onInputChange(e) {
var code = e.keyCode || e.which;
console.log(code);
}

But the next button doesn’t trigger any code.
For the select, programmatically, I do like this:

@ViewChild(“pesoSelect”) pesoSelect: IonSelect;

this.pesoSelect.open();

Which work normally.
One example of one of my forms:

Nome do Talhão *:
<ion-row>
  <ion-col size="12">
    <ion-item>
      <ion-label position="floating">Cultura <span>*</span>:</ion-label>
      <ion-select #culturaSelect formControlName="cultura" name="cultura" required (ionChange)="changeCultura($event)" okText="Selecionar" cancelText="Cancelar" placeholder="Selecione">
        <ion-select-option *ngFor="let cultura of foundCulturas" [value]="cultura">{{cultura.nome}}</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-col>
</ion-row>

<ion-row>
  <ion-col size="12">
    <ion-item>
      <ion-label position="floating">Variedade <span>*</span>:</ion-label>
      <ion-input name="variedade" formControlName="variedade" placeholder="Digite uma variedade"></ion-input>
    </ion-item>
  </ion-col>
</ion-row>

<ion-row>
  <ion-col size="12">
    <ion-item>
      <ion-label position="floating">Responsável</ion-label>
      <ion-select formControlName="relacionamento" name="relacionamento" okText="Selecionar" cancelText="Cancelar" placeholder="Selecione">
        <ion-select-option *ngFor="let funcionario of foundRelacionamentos" [value]="funcionario">{{funcionario.nome}}</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-col>
</ion-row>

<ion-row>
  <ion-col size="12">
    <ion-item>
      <ion-label position="floating">Und. de Medida de Área <span>*</span>:</ion-label>
      <ion-select formControlName="unidadeMedidaArea" name="unidadeMedidaArea" required okText="Selecionar" cancelText="Cancelar" placeholder="Selecione">
          <ion-select-option *ngFor="let medida of foundUnidadeMedidaArea" [value]="medida">{{medida.nome}}</ion-select-option>
      </ion-select>
    </ion-item>
  </ion-col>
</ion-row>

<ion-row>
  <ion-col size="6 ">
    <ion-item>
      <ion-label position="floating">Área Total <span>*</span>:</ion-label>
      <ion-input formControlName="area" name="area" required type="tel"></ion-input>
    </ion-item> 
  </ion-col>
  <ion-col size="6">
    <ion-item>
      <ion-label position="floating">Sigla <span>*</span>:</ion-label>
      <ion-input formControlName="sigla" name="sigla" required></ion-input>
    </ion-item>
  </ion-col>
</ion-row>

As you can see, I have the following sequence:

  1. Input text
  2. Select
  3. Input text
  4. Select
  5. Select
  6. Input Text
  7. Input Text

If, from the start, I go clicking next in the keyboard, it will from in the following sequence:
1 -> 3 -> 6 -> 7

Can anyone assist me with this behavior?

Kind Regards

Use blur event of previous item to open programmatically?

I haven’t thought about that, will try to do like that. Thank you for the insight

Your tip worked as a charm. Thank you!

The only thing that I notice as problem was the keyboard that stood open or the space where the keyboad was at stood with a white filling where the keyboard was.

I resolved that calling the hide event of keyboard with the open for the select with a small timeout.

o

penCultura(event){
    setTimeout(() => {
      this.keyboard.hide();
      setTimeout(() => {
        this.culturaSelect.open();
      }, 250);
    }, 200);
  }

The plugin used for this in my application was the ionic native itself

1 Like

Hi.
This hack is not effective.
It will cause the select input field to be opened whenever the first input field loses focus no matter the reason.
Can the ionic team please fix this issue.
It shouldn’t exist in the first place.

Hi. How do you differentiate that the blur event is issued when you focus on another field or when you click outside of form items? I opened a issue on Ionic’s GitHub.