Modal with textarea scroll position after using keyboard multiple times

ionic-v1
1

I’m having an issue with a modal containing many text inputs and a single textarea. The issue is occurring on both Android and iPhone. I’m using Ionic v1.0.0-rc.1 “osmium-ostrich”.

My form contains a stack of several text inputs followed by one textarea at the bottom. The modal is taller than the viewport when it opens which may be relevant.

Before opening the keyboard the modal looks like this:

image
Screenshot_2015-03-24-12-45-33.png1440×2560 85.2 KB

Tapping on the textarea at the bottom of the list opens the device keyboard as expected - if I type in the textarea and then tap elsewhere on the screen, the modal closes and everything looks great.

However, if I tap into the textarea a second time, the modal scrolls way up off the top of the screen:

image
Screenshot_2015-03-24-12-46-31.png1440×2560 109 KB

If I tap elsewhere, the keyboard closes but the top of the modal has now been forced up off the top of the screen and pushed out of view::

image
Screenshot_2015-03-24-12-46-43.png1440×2560 80.7 KB

Scrolling as high possible shows that the modal is now cutoff at the top of the screen by about the same gap that has been introduced at the bottom.

Any ideas?

Thanks!

2

Quick update on one thing I tried that did not fix the issue.

I added the keyboard plugin to my project and set:

cordova.plugins.Keyboard.disableScroll(true);

Unfortunately I’m still seeing the same behavior.

Any help or ideas for workarounds would be appreciated!

3

Do you have or could you put a codepen replicating the issue?

Try scrolling to the bottom when the textarea or last element gets focus or is clicked.

4

Thanks for taking a look.

Here’s the Codepen:

See the Pen XJOyaN by Scott Metoyer (@scottmetoyer) on CodePen.

To reproduce, on an Android or iPhone device:

  • Tap the textarea at the bottom of the list and add a few lines.
  • Focus out of the textarea by tapping somewhere else on the screen or hitting the Android back key.
  • Tap back into the textarea and add a few more lines.
  • Focus back out of the textarea.

It might take a few cycles of this, but consistently after a few tries the the list will scroll up past the top of the screen when leaving the textarea and produce the behavior in my last two screenshots.

Thanks again!

5

I’m going to take a look at this tonight. Sorry for the delay.

6

You can also see a similar issue if you look at the Pen http://codepen.io/pattyok/pen/aExmf by @pattyok on CodePen. Click on one of the list items and enter a few lines into the text area below the photos and see that the top of the modal is shifting and cannot be scrolled to any more.

I am seeing this exact same issue with a textarea or inputs on my modals on Android. As soon as the keyboard is opened for one of the input elements close to the bottom of the page, one cannot scroll to the top any more.

7

I’ve been trying and trying and can’t reproduce the issue on Android and iOS simulators. I guess this only happens in real devices but sadly right now I don’t have one :(. Sorry.

8

Actually, it happens in Chrome on my desktop… http://codepen.io/pattyok/pen/aExmf

Click on one of the list items and enter a few lines into the text area below the photos and see that the top of the modal is shifting and cannot be scrolled to any more.

9

It’s a different problem because you are changing the height of the textarea. If you check @scottmetoyer example you will see he is not.

To solve your problem use the resize and scrollBottom methods of $ionicScrollDelegate. Also, add ng-trim to the textarea. I’m using ng-trim to watch also for spaces added at the end of the lines (including line breaks).

http://quick.as/dxxzh3ekd