Auto-focus to ion-input Ionic v4

Ionic Framework ionic-v3
1

I am doing the migration of an ionic v3 app to ionic v4. I have encountered the problem that when doing the auto-focus on an ion-input the way to do it in ionic v3 does not work, I tried to create a directive to perform the auto-focus, but it has not helped me.

Have you encountered the same problem?

Thanks.

Ionic v3 auto-focus code:
.ts file:


import { ViewChild } from '@angular/core';

@Component({
  selector: 'page-inventario',
  templateUrl: 'inventario.html'
})

export class InventarioPage{
  @ViewChild('inputInventarioCB') CBProductoInventario;
ionViewDidEnter() {
    this.focusInput(this.CBProductoInventario);
  }

  focusInput(input) {
    if(this.timer){
      clearTimeout(this.timer)
    }
    this.timer = setTimeout(() => {
      input.setFocus();
    },1000);
  }

}

.html file:

<ion-input #inputInventarioCB type="text" placeholder="Código de barras" required [(ngModel)]="producto.codigoBarras" name="codigoBarras" (keypress)="controlTeclaIntro($event, codigoBarras)"</ion-input>

2

I think it isn’t there yet, but, how lucky you are, the very last commit in the Ionic project added by @manucorporat is the feature you are looking for https://github.com/ionic-team/ionic/commit/c66a34ab596bf1dc944c1f753b2e356a91348fc4

You should be good in next beta

1 Like
3

Thanks, I’ll take a look.