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

[andrefroes]

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

[Tommertom]

Use blur event of previous item to open programmatically?

[Tommertom]

No keyboard event when "next" key is pressed in a form?

I couldn’t find a proper solution. For now, I use an input (not ion-input), bind to the blur event and check if event.sourceCapabilities === null, then do whatever in that if statement. I use a regular input because ionBlur does not seem to have the sourceCapabilities property. SourceCapabilities being null or something else seems to be the only distinguishing factor between a regular blur event and a blur event caused by pressing the next button, I’m not sure though.

[andrefroes]

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

[andrefroes]

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

Keyboard - Ionic Documentation

[Virock]

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.

[SidiBecker]

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.