Keyboard issue with ionic v1.0.0


#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:


#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

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


#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.


#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


#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)


#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.


#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