Keyboard Ionic v7 with Ios

Ionic Framework Ionic Angular
1

hello, I have a problem with the input focus in Ios, the keyboard covers the input without scrolling.

I’m using an app created in ionic 7 with devextreme framework components inside.
This is an example of the login page but the problem occurs on all inputs:

<div class="d-flex flex-column justify-content-center align-items-center h-100">

  <div class="wrapper">
      <div class="text-center">
          <img src="/assets/images/logo-full.svg" class="logo my-3">
      </div>

      <div class="dx-card base-border-radius elevation-8">

          <div class="text-center">
              <p class="font-28 fw-semibold-600 mt-0 mb-3 lh-1">Login</p>
              <p class="font-14 m-0 mb-4">{{env.appTitle}}</p>
          </div>

          <form (submit)="onSubmit($event)" autocomplete="off">
              <dx-form [formData]="formData" [disabled]="loading" labelMode="outside" (onContentReady)="form_onContentReady($event)">

                  <dxi-item dataField="email" editorType="dxTextBox" [editorOptions]="{ stylingMode: 'outlined', placeholder: 'Email', mode: 'email' }">
                      <dxi-validation-rule type="required" message=""></dxi-validation-rule>
                      <dxi-validation-rule type="email"></dxi-validation-rule>
                  </dxi-item>

                  <dxi-item dataField="password" editorType="dxTextBox" [editorOptions]="{ stylingMode: 'outlined', placeholder: 'Password', mode: 'password'}">
                      <dxi-validation-rule type="required" message=""></dxi-validation-rule>
                  </dxi-item>

                  <dxi-item itemType="button" cssClass="pb-0 pt-4">
                      <dxo-button-options width="100%" height="40" type="default" text="Login" [template]="'signInTemplate'" [useSubmitBehavior]="true"></dxo-button-options>
                  </dxi-item>

                  <ng-container *dxTemplate="let item of 'signInTemplate'">
                      <span class="dx-button-text">
                          <ng-container *ngIf="loading; else notLoading">
                              <dx-load-indicator width="24px" height="24px" [visible]="true" style="margin-top: 8px;"></dx-load-indicator>
                          </ng-container>
                          <ng-template #notLoading>Login</ng-template>
                      </span>
                  </ng-container>
                  
              </dx-form>
          </form>
      </div>
      <p class="font-12 text-center color-dark-60 fw-medium-500">v{{env.version}}</p>
  </div>
</div>

Single input focus works fine if I manually close the keyboard, but if I switch from one input to another without closing the keyboard, the whole view returns to its initial position and the content that should remain visible is covered by the keyboard instead.
With android everything works fine, the problem occurs with ios

what can be the cause of this behavior?

2

ionic only focus ion-input and ion-textarea elements, since you hare using your own you’ll have to focus them yourself

3

Thanks for your reply,
I have implemented a function in my component with host listener like this:

  @HostListener("focusin", ["$event"])
  onFocus(event: Event) {
    this.scrollUpIfBehindKeyboard(event);
  }

then once inside the scrollUpIfBehindKeyboard function I make my evaluations on how much to scroll and it’s ok. But I don’t understand why the page scroll is performed only when I press a button on the keyboard and not when the keyboard is displayed, what could be the cause?
Is the event I listened to wrong? this situation occurs only on Ios.

4

Try with the keyboard plugin events instead, they trigger as soon as the keyboard appears, not when you start typing.