Ionic 4 – Keyboard scroll view when ion-input is focused

Hi Ionic Fans !

I’am facing a big problem with Ionic 4 and form.
Sometimes, the keyboard move ion-input below navigationBar or keyboard is above the ion-input

With Ionic 3, I fixed it with scrollPadding, scrollAssist and autoFocusAssist in IonicModule.forRoot() (app.module.ts) + Keyboard.disableScroll(true) in my component.
But with Ionic 4, autoFocusAssist doesn’t exist and Keyboard.disableScroll(true) neither.

Any ideas ?

Thanks you Ionic community :slightly_smiling_face:

1 Like

Hi, I was faced this problem when I started the project. Can you share your code?

Hi !

app.module.ts

[...]
IonicModule.forRoot({
  backButtonText: 'Retour',
  mode: 'ios',
  scrollPadding: false,
  scrollAssist: true
}),
[...]

register.page.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start" padding-start>
            <ion-back-button defaultHref="login"></ion-back-button>
        </ion-buttons>
        <ion-title>
            <img src="./assets/logo.svg" class="header-logo" />
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <form class="register-form" [formGroup]="registerForm">
        <ion-list padding>
            <ion-item>
                <ion-input placeholder="Nom*" formControlName="lastname"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input placeholder="Prénom*" formControlName="firstname"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input placeholder="Email*" formControlName="email"></ion-input>
            </ion-item>
            <ion-item>
                <ion-input placeholder="Téléphone*" type="number" formControlName="telephone"></ion-input>
            </ion-item>
        </ion-list>
        <ion-list padding>
            <ion-label position="stacked">Adresse postale</ion-label>
            <ion-item>
                <ion-input placeholder="Adresse*" formControlName="address"></ion-input>
            </ion-item>
            <ion-grid class="birth">
                <ion-row>
                    <ion-col>
                        <ion-input placeholder="Code postal*" type="number" formControlName="postal_code"></ion-input>
                    </ion-col>
                    <ion-col>
                        <ion-input placeholder="Ville*" formControlName="city"></ion-input>
                    </ion-col>
                </ion-row>
            </ion-grid>
            <ion-item>
                <ion-input placeholder="Complément d'adresse" formControlName="address_sup"></ion-input>
            </ion-item>
        </ion-list>
        <div padding>
            <ion-button (click)="register()" [disabled]="!registerForm.valid">S'Register</ion-button>
        </div>
    </form>
</ion-content>

As you can see, nothing special cause autoFocusAssist & Keyboard.disableScroll(true) not exist on Ionic 4. But why, that’s the question…

I am using simply IonicModule.forRoot().

The same issue on iOS - focused input autoscrolled under the header

Have you find any solution for this., Ionic4 is not scrolling content up, so keyboard is covering text field, could you please help me

1 Like

@mhartington it’s seem to be a global bug.
Can we have a blog post to explain how really work keyboard & form on Ionic ? :slight_smile:

@jeanpierre42 is there any way to scroll up content when keyboard open.

Yes, using scrollTo()

This worked for me today. It prevents the scrolling on focus and does not add extra 20px padding bottom.:

IonicModule.forRoot({
  mode: 'ios',
  scrollAssist: false,
  scrollPadding: false
}),

Any update? Facing the same issue as my input is placed in the ion-footer. Need ion-content to resize so that the keyboard does not cover my input in ion-footer.

:pensive::pensive::pensive::pensive::pensive::pensive::pensive:

hi :slight_smile:
Have you been successful since all this time?

Use — this.keyboard.onKeyboardWillHide()

Did anyone find a solution to this, it used to work in my Ionic 3 app without any problems but I am migrating to Ionic 4 and when testing on iOS device no scrolling okays when the keyboard shows when I select and ion-input box, for example, if the input box is at the bottom of the screen then the keyboard covers it?

Is there some settings that need to be applied to get this to work out of the box with Ionic 4 or have I got to write something custom using “scrollToPoint”?

I’m having this jump too, but it seems to be only on ios.

which part of the appModule do I add this code in, I’m getting errors

One alternative solution:

In your constructor

window.addEventListener("keyboardDidShow", () => {
        document.activeElement.scrollIntoView(true);
    });
2 Likes

1 Like

Just wondering, would this make other child components be set with mode=“ios” as well?