Keyboard hides input until I start typing

Ionic Framework ionic-v3
22

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);
      });
    }
  }
23

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

24

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.

25

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

Thanks a ton! Happy.

26

@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

27

excellent!
Solution works perfectly.

29

@kmiloangel Can you explore more details about this code. Iā€™m not clear about which youā€™re used variables. Can you explain what is the value of this.helper

30

This is the complete code of that function. Basically it detects when an input is focused and moves the input to the top scrolling the view.

manageInputFocusScroll(marginTop = 0) {
    if (this.keyboardShowSubscription) {
      this.keyboardShowSubscription.unsubscribe();
    }
    if (this.keyboardHideSubscription) {
      this.keyboardHideSubscription.unsubscribe();
    }

    let scrollContent: any = document.querySelectorAll(".scroll-content");
    const body: any = document.getElementsByTagName('body')[0];

    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 = 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";
              if (body) body.classList.add('keyboard-opened');
            }
          }
          lastFocus = 0;
        }, 100);
      });

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

It is important that you add this code to the app.module.ts:

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

Let me know if you have a question.

31

Now, Iā€™m using the ionic 4.11.0 version, while Iā€™m trying to include
autoFocusAssist: false getting following error ā€˜autoFocusAssistā€™ does not exist in type ā€˜IonicConfigā€™.ts.

32

hmm, this is for ionic v3. You should not be having this problem on v4

33

I need an example for hiding the mobile navigation bar while opening the application. Can you share with me.

34

Itā€™s working fine now, Thank you so much