Input locked on android device

Ionic Framework ionic-v3
1

After I run my code on my android device and click on a input element i can fill the input content with the keyboard, then when I click again the input. It is blocked and I can not type again. I want to know if my code is ok or Im missing something

Only when i not use ion-input on ion-list => ion-item tags I can select it many times.

Android Version: 6.0.1

Code:

<ion-content padding>
  <form [formGroup]="loginForm">
    <ion-list>
      <ion-item class="item-login-banner" no-lines>
        <div class="banner"></div>
      </ion-item>
      <ion-item class="item-login-input">
        <ion-label floating color="dark">Correo ElectrĂłnico</ion-label>
        <ion-input #txtUsername type="text" formControlName="username" (keyup.enter)=focusPasswordField()></ion-input>
      </ion-item>
      <ion-item class="item-login-input">
        <ion-label floating color="dark">Contraseña</ion-label>
        <ion-input #txtPassword type="password" formControlName="password" (keyup.enter)="logIn()"></ion-input>
      </ion-item>
      <ion-item class="item-login-button" no-lines>
        <button ion-button full (click)="logIn()">Iniciar SesiĂłn</button>
      </ion-item>
    </ion-list>
  </form>
</ion-content>

...
...
...
@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
 @ViewChild("txtPassword") txtPassword;

constructor(private formBuilder: FormBuilder) {
    this.loginForm = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  focusPasswordField() {
    this.txtPassword.setFocus();
  }

  logIn() {
    let username = this.loginForm.get("username").value.trim();
    let password = this.loginForm.get("password").value.trim();
    ... 
    ...
   }

}
...
2

I have the same problem. I have not found a solution yet.

3

I did not found solution to this, I read somewhere that cannot use clickeable items inside tag so I use a div with ion-item attribute. Working in this way.

  <form [formGroup]="loginForm">
    <ion-grid>
      <ion-row>
        <ion-col>
          <div ion-item>
            <ion-label floating color="dark">Usuario</ion-label>
            <ion-input #txtUsername type="text" formControlName="username" [(ngModel)]="username" lowercase></ion-input>
          </div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <div ion-item>
            <ion-label floating color="dark">Contraseña</ion-label>
            <ion-input #txtPassword type="password" formControlName="password" [(ngModel)]="password"></ion-input>
          </div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <div ion-item>
            <a class="link" (click)="redirectForgotPasswordPage()">Olvidé mi contraseña</a>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
4

Here is the solution that worked for me, just have to add this to your main app.scss or component’s scss file.

.input-cover {
   position: static;
}

This also seemed to fix an issue where the app wouldn’t scroll to selected input fields, thus being covered by the keyboard.

Courtesy of https://stackoverflow.com/questions/47239440/impossible-to-edit-inputs-except-the-first-of-a-ion-list#47274279

1 Like