Keyboard issue with ionic v1.0.0

ionic-v1
1

I was excited about the new stable version of ionic and I have to say that native scrolling is amazingly smooth for me but I run into a serious issue with a keyboard and scrolling.

Config:

if (ionic.Platform.isAndroid()) {
    $ionicConfigProvider.scrolling.jsScrolling(false);
}

The template looks like this (I removed obviously some angular logic, “if conditions” which has nothing to do with the issue:

<ion-view>
<ion-content ng-class="{ 'has-header': auth.user.id }">
    <div ng-controller="specificStatusCtrl" class="SPECIFIC-STATUS">

        <div class="list card">
            <div class="tb-status">
                <div ng-if="status.imageName.length > 5;" class="item item-body">
                </div>
            </div>

            <div class="comments-list">
                <div class="comment-list-item" ng-repeat="comment in comments">
                    <a ui-sref="wall({ username: comment.username })" class="username">{{ comment.username }}:</a> 
                </div>

                <textarea
                        class="comment-textarea"
                        ng-model="comment.comment"
                        name="comment"
                        placeholder="Write comment...">
                </textarea>
            </div>
        </div>
    </div>
</ion-content>

<ui-view></ui-view>

And you can see this issue here:

Once you click on textarea to write a comment I am not able to scroll, I don’t see the textarea and the output looks like this:

Android: 4.4.2
Mobile: Samsung note 3

Am I missing some directive, class, whatever? Or it’s a bug :frowning:

4 Likes
2

I’ve just opened the link you provided on my mobile (Android 4.1.2) and I can see the problem. As soon as you click on the textarea the scrolling is disabled and you are stuck!

3 Likes
3

@brandyshea @mhartington any idea? Its pretty important bug for a stable release :frowning:

4 Likes
4

Hmm, is their anyway you could provide a simplified codepen of this for use to test with.

5

Hi @mhartington

I created a codepen to demonstrate this issue, just scroll to the input and tap it to freeze the scroll

There’s also a Github issue open

6

Any solutions yet? I have a similar problem. For me it scrolls the view up to the top on input focus. i found the reason for this in the ionic.bundle.js, but deactivating this behaviour doesn’t solve the rest of the issues.

7

Hmm, I jsut tested this out on a blank project

ionic start tmp http://codepen.io/mhartington/pen/NqRqNP && cd tmp
ionic platform add android
ionic  run android --device

Tested on an android 4.4 device, and everything worked fine for me.

8

Maybe it’s related to crosswalk or fullscreen mode. or both :slight_smile: had no chance to test this myself yet

9

HI mhartington,
I’ve just tried running your command (amazing work done by ionic to simplify the process to put code for git to device :slight_smile: )
and i got the scrolling bug on my G3 running android 5.1.1
Some customers also report that problem and we have to disable native scroll to workaround it.

1 Like
10

Hi @mhartington, I just tested with your codepen and the problem ocurred. I made a video: http://imgur.com/SU3u7fY

The test was made on a Samsung I9190 Galaxy S4 mini;
Android 4.4.2

Let me know if you guys need more info

1 Like
11

@lastikas @mhartington @mathias_muller guys, any progress on this topic?

12

Hmm, alright, suddenly it’s not working for me either.
Since there is an issue already open for this, please direct any information or examples you have there.

13

I can confirm there’s a problem with the keyboard.
I don’t use cross-walk but I force native scrolling for android:

    if(!ionic.Platform.isIOS())
    {
        $ionicConfigProvider.scrolling.jsScrolling(false);
    }

Google Nexus 5 (Lollipop 5.1)

2 Likes
14

Is there a solution for this? This makes this totally unusable.

15

Problem on Android and on iOS.
I noticed that when focus on input and keyboard overlay that if I type something the view scroll correctly to the input.

16

How about this: http://codepen.io/anon/pen/gpgWOe

ionic start fix_suggestion http://codepen.io/anon/pen/gpgWOe && cd fix_suggestion
ionic platform add android
ionic run android --device

I don’t know if this is enough but it seems to work. I can’t tell if it’ll cause any troubles, because I haven’t tested every possible scenario, but is working for me.

If this is fine, I could submit a pull request

17

This problem is caused when jsScrolling is disabled,
when I set $ionicConfigProvider.scrolling.jsScrolling(true); the problem is eliminated.

The same problem happens in ios as well.

1 Like
18

Keyboard stuff relies heavily on JS scrolling, if you guys disable the Ionic keyboard code with ionic.keyboard.disable() do you still have issues?

19

@tim I described the problem with inputs here https://github.com/driftyco/ionic/issues/3727#issuecomment-112462833

I tested with ionic.keyboard.disable() but the problem became worst.

20

Same problem here.
My page displays ~15 inputs (input text, select, …). When the user tries to write or select something which was out of the view on page load (= fields at the bottom of the page), he gets stuck almost every time (impossible to scroll top/bottom, UI seems frozen).

Galaxy Tab 4 7’’ (SM-T230) / Android 4.4.2