Focus is not pointing to first input

Ionic Framework ionic-v3
1

Hi, I have 3 input fields, focus is pointing to 3 input field, but I need on first input field only. how can we do this. please help me.below is sample code.

<ion-content style=" background-image: linear-gradient(#92c95c, #00a5d1);">
  <div class="">
                  
    <img src="assets/icon/tetra.png"   style="width: 47px;height: 35px;"  class="logo-cs" />  
    
</div>
<div style="background-color: #fff;
border-radius: 5px;margin:20% 8%; width:300px;position: fixed;">
  <ion-item >
      <ion-label stacked>ID</ion-label>
      
      <ion-input type="password" [(ngModel)]="uid" #uidip autofocus="true" ></ion-input>
    </ion-item>

<ion-item >
  <ion-label stacked>Username</ion-label>
  <ion-input [(ngModel)]="username" #unip ></ion-input>
</ion-item>

<ion-item style="margin-bottom: 5px;">
  <ion-label stacked>Password</ion-label>
  <ion-input type="password" [(ngModel)]="password" #pwdip></ion-input>
</ion-item>
<div text-center margin-top>
  <button ion-button color="secondary" (click)="login(uid,username,password)" routerLink="/chatHome" style="width: 90%;
  border-radius: 5px;background-color: #7CB342;">
    Login
  </button>   

  </div>
</div>


</ion-content>

Below is my login.ts

  ionViewLoaded() {

    setTimeout(() => {
     // Keyboard.show();
       // for android
      this.userid_ip.setFocus();
      // this.uname_ip.setFocus();
      // this.password_ip.setFocus();    
    },150); //a least 150ms.

   
  }
2

Firstly ionViewLoaded() is no longer a valid lifecycle event.
And for set focus please refer this Setting Focus to an Input in Ionic

1 Like
3

Thirdly, setTimeout, especially with magic numbers, is virtually always papering over an existing race condition. Don’t do it. Fix the underlying issue instead.

1 Like
4

Hi all,

It was worked for me in another way,

<ion-item class="input-has-focus">

Just I added the input-has-focus to my ion-item, Soo issue was fixed