The keyboard covers the input field in ios - Ionic 5

Ionic Framework Ionic Angular
1

Hello developers, I’ve been with this same problem for months and I still can’t find a solution. I have an application where there are several forms, when focusing on an input field the keyboard covers this input field and the user cannot see anything. This only happens on ios, on android everything works normal.

In this application I am using ionic 5 with capacitor.

This is how I would like my application to work: https://i.stack.imgur.com/DEEiA.gif

It is currently working like this: https://i.stack.imgur.com/23DoT.gif

.HTML

<form [formGroup]="formSubmit" (ngSubmit)="formSubmit()">      
  <mat-form-field appearance="outline" class="field-style">
    <input matInput maxlength="35" class="input-form" placeholder="Agregar un alias (opcional)" formControlName="alias">
  </mat-form-field>
  <button mode="ios" class="btn-siguiente-enable" expand="block" type="submit" *ngIf="formSubmit.valid">Siguiente</button>    
</form>

.TS

ngOnInit() {
    this.initForms();

    Plugins.Keyboard.setScroll({isDisabled: true});

    Plugins.Keyboard.addListener('keyboardWillShow', (info: KeyboardInfo) => {
      Plugins.Keyboard.setResizeMode({mode: KeyboardResize.None});
    });

    Plugins.Keyboard.addListener('keyboardWillHide', () => {
      Plugins.Keyboard.setResizeMode({mode: KeyboardResize.Native});
    });
  }

Any idea how to solve this?

2 Likes
2

I’m using Capacitor for my ionic app & this worked for me:

  • Just install the Keyboard plugin & it should fix the issue. You read that right, just install the plugin, and you don’t have to use it anywhere.