Keyboard hides input until I start typing

I really had a pain with this issue, the solution of @CurtisDrumeo inspired me to this. I know there are many people with this problem, so hope it helps:

/**
   * This fixes the inputs behind keyboard, for this to work, put this in app.module.ts:
   * IonicModule.forRoot(MyApp, {
   *  scrollPadding: false,
   *  scrollAssist: false,
   * }),
   * @param marginTop int
   */
  manageInputFocusScroll(marginTop = 0) {
    if (this.keyboardShowSubscription) {
      this.keyboardShowSubscription.unsubscribe();
    }
    if (this.keyboardHideSubscription) {
      this.keyboardHideSubscription.unsubscribe();
    }

    let scrollContent: any = document.querySelectorAll(".scroll-content");

    if (scrollContent.length) {
      scrollContent = scrollContent[scrollContent.length - 1];

      let scrollTop = 0;
      // Controls if one input is changed to another without closing keyboard
      let lastBlur = 0;
      let lastFocus = 0;

      this.keyboardShowSubscription = this.keyboard.onKeyboardShow().subscribe(() => {
        lastFocus = 1;

        setTimeout(() => {
          if (lastBlur === 0) {
            lastBlur = 1;
            scrollTop = scrollContent.scrollTop;
            //const elementFocused: any = document.activeElement;
            const elementFocused: any = scrollContent.querySelector(":focus");

            if (elementFocused) {
              const elementToTop = elementFocused.getBoundingClientRect().top;
              const windowTaller = window.innerHeight > elementToTop + scrollTop;

              let distance = elementToTop - marginTop - 40;
              if (!windowTaller) {
                distance += scrollTop;
              }

              scrollContent.style.top = distance * -1 + "px";
            }
          }
          lastFocus = 0;
        }, 100);
      });

      this.keyboardHideSubscription = this.keyboard.onKeyboardHide().subscribe(() => {
        lastBlur = 1;
        setTimeout(() => {
          if (lastFocus === 0) {
            scrollContent.removeAttribute("style");
            scrollContent.scrollTop = scrollTop;
            lastBlur = 0;
          }
        }, 100);
      });
    }
  }

@kmiloangel Please share the html source code for same.
How it is used?. I need to try out this solution.

Actually, it doesn’t matter the HTML, because it looks for the focused input inside the scroll-content, so you can have any number of inputs and it will work, you only have to call this method inside the ionViewDidLoad() of your .ts. The margin parameter is the distance you want to have the inputs from the statusbar:

ionViewDidLoad() {
    this.helper.manageInputFocusScroll(90);
}

As you can see, I created a function into a provider called helper. And inside this helper, I got this as class properties:

keyboardShowSubscription: any = false;
keyboardHideSubscription: any = false;

Also you would need to import the keyboard:

import { Keyboard } from "@ionic-native/keyboard";

And the last step is add this to your app.module.ts:

IonicModule.forRoot(MyApp, {
      scrollPadding: false,
      scrollAssist: false,
      autoFocusAssist: false,
}),

Thats all you have to do, to make this work. Let me know if it works for you.

@kmiloangel Thanks a lot for this wonderful help. It worked for me.

Thanks a ton! Happy.

@CurtisDrumeo I’ve been looking for a solution for so long and this was the only one that actually worked! I created an account just to say thank you

excellent!
Solution works perfectly.