CODEWITHSUNDEEP
ionic-frameworkkeyboardcapacitor
Colin
Colin

Reputation: 13

How to prevent ionic 4 capacitor keyboard from closing when clicking another input, after an input is already focused

I'm going to link the APK. Click the Login button to get to the issue :) https://drive.google.com/file/d/1BKol_X_FhISZw6bnuwV6PN7fopAa0xlt/view?usp=drive_link

Basically, if you select the "Enter Email" input, the keyboard opens and pushes the content of the page up. This is good, but if you then click the "Enter Password" input, the keyboard will close before the input is clicked. It does the same thing when clicking the "Login" button. I've tried (mousedown)="$event.preventDefault()" but no luck.

  <div  class="sign-in-inputs-container">
    <!--Email-->
    <mat-form-field class="welcome-input welcome-input-text">
      <input matInput placeholder="Enter Email" [(ngModel)]="email">
    </mat-form-field>

    <!--Password-->
    <ng-container *ngIf="currentWelcomeState != WelcomeState.FORGOTPASSWORD">
      <mat-form-field class="welcome-input welcome-input-text">
        <input type="password" matInput placeholder="Enter Password" [(ngModel)]="password">
      </mat-form-field>
    </ng-container>
    

    <!--Login-->
    <button *ngIf="currentWelcomeState == WelcomeState.SIGNIN" (click)="signIn()" class="login-button welcome-input welcome-input-button" mat-raised-button color="primary">Login</button>

    <!--Forgot Password-->
    <button *ngIf="currentWelcomeState == WelcomeState.FORGOTPASSWORD" (click)="forgotPassword()" class="login-button welcome-input welcome-input-button" mat-raised-button color="primary">Forgot Password</button>
  </div>
</div>

Upvotes: 0

Views: 101

Answers (2)

Colin
Colin

Reputation: 13

It ended up being really simple. I had to add a touchend event to my input.

<input id="email" (touchend)="$event.stopPropagation()" matInput>

If you also want to keep the keyboard open when you click on another element (like a button), add this:

(touchend)="$event.preventDefault();$event.stopPropagation();console.log('stuff');"

Upvotes: 0

Grant
Grant

Reputation: 6329

Swap the custom fields for Ionic fields and the keyboard will behave more consistently.

<div class="sign-in-inputs-container">
  <ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input type="email" [(ngModel)]="email"></ion-input>
  </ion-item>

  <ng-container *ngIf="currentWelcomeState !== WelcomeState.FORGOTPASSWORD">
    <ion-item>
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" [(ngModel)]="password"></ion-input>
    </ion-item>
  </ng-container>

  <ion-button *ngIf="currentWelcomeState === WelcomeState.SIGNIN" 
    (click)="signIn()" expand="block">
    Login
  </ion-button>

  <ion-button *ngIf="currentWelcomeState === WelcomeState.FORGOTPASSWORD" 
    (click)="forgotPassword()" expand="block">
    Forgot Password
  </ion-button>
</div>

Upvotes: 0

Related Questions