Android scroll stuck - cause related to keyboardPreventDefault in keyboard.js

[alexbainbridge]

On Android 4.2, using Ionic Keyboard plugin (via Phonegap Build - currently pulling keyboard version 0.0.1)

Subsequent to any text entry in a form (e.g. a regular text input), and the keyboard hiding, the scroll won't go up or down

I fear that the version of the keyboard plugin available via Phonegap Build is not as current as available here.... and this problem may have been fixed (i.e. I can see a commit on the keyboard plugin that looks likely as a fix)

So
a) Is the Phonegap Build version of the plugin being kept current at time of rapid change?
b) Or have I found a new problem that is with beta 8 and nothing to do with the plugin?

(Once I know answer to a, I can help look into this and at least get to the point where the cause is known)

Thanks!

[tlancina]

@alexbainbridge unfortunately we don't control our own plugin because PGB allows people to submit plugins for repos they don't own. As far as I know however the plugin on PGB is up to date.

This definitely sounds like a bug though, would you mind putting together a simple codepen or plunkr that recreates the issue? Then we can take a look, thanks!

[alexbainbridge]

Hi there Tim
Is there a good way to create a demo for something that happens on device only?
(ha, yeah, I think I know the answer to that!)

As for phonegap build - right now your plugin is listed twice.....

https://build.phonegap.com/plugins/793 Used for 2 apps using this one (someone else's fork)
https://build.phonegap.com/plugins/785 Used for 62 apps using this one (a 2 month old tree)

Thats pretty chaotic I think!

If you follow link from 785 to Github, that goes to a specific version I think that hasn't been updated for 2 months (but I am not a Github expert at all, so could be misreading this)

Pretty sure the problem is Phonegap build versioning as otherwise I am sure the forums would be alight right now.....

[alexbainbridge]

Yeah @tlancina I think your Android fixes (scroll, density) are post the 785 current version available via Phonegap Build

Not sure if those are exactly the bugs I have, but probably are.

I think you need to manage your own listing there :)

[tlancina]

@alexbainbridge someone submitted the plugin right after we released it, and re-submitting yields the error "A plugin already exists with that plugin id and version" unfortunately.

I wonder if we up the version number if it will auto-update? Not too familiar with Phonegap's plugin system.

[alexbainbridge]

@tlancina I don't think it auto updates. I think you can "suggest" an update though, but only if you own the plugin...... best bet right now is to email the owner of 785 and ask them to request an update process to be initiated.....

[tlancina]

@alexbainbridge I know it might not be the answer you're looking for, but at this point I'd suggest e-mailing the plugin owner yourself if you'd like it updated, or taking it up with Phonegap, since it's not really an Ionic issue.

And who knows? Maybe in the near future you won't need to use Phonegap Build to build Ionic apps ;)

Also feel free to setup a codepen or some code we can put into a starter project reproducing the issue (sometimes it's easier to use the CLI and modify the starter templates for issues only on native) and we can take a look to see if it is an Ionic bug or just the outdated plugin.

[alexbainbridge]

Well, right now there are 62 disappointed developers out there ;(

Personally I think you guys should email them, ask them to remove both the plugins, and you put your own in there, under your email credentials!

I will email the plugin owner though....

[alexbainbridge]

Plugin owner says they will try to reassign ownership to yourselves..... perhaps you should email him too so that can be arranged!

(He is also going to do an update request too, hopefully, but I am not sure this is going to work unless the version number increases!)

[tlancina]

@alexbainbridge great I'll shoot him/her a note, thanks for looking into it!

[RagingRudolf]

I just answered @tlancina on email. I will try to get an update request to PhoneGap and transfer ownership to Ionic team.

[cbruun]

(plugin owner here - along with RagingRudolf)

While we wait for the ownership transfer we will try to update the plugin on PhoneGap Build. However, I cannot find any documentation on how to start the update process. Perhaps the version specified in the plugin.xml needs to be incremented?

[alexbainbridge]

Some info about plugin updates here
http://community.phonegap.com/nitobi/topics/how_long_does_it_take_to_approve_plugin_updates

The first official reply in that thread seems to outline the process to be taken

[cbruun]

Thanks! Once the version number in plugin.xml has been incremented, I will try to update the plugin.

[alexbainbridge]

@tlancina Can you please bump up the version number in the keyboard plugin (in plugin.xml) ? Thanks!

[tlancina]

Ok I just updated the plugin version. A big thanks to @casperbruun and @RagingRudolf for helping out with this, hopefully we can get the plugin transferred and save everyone this headache in the future.

[cbruun]

I have submitted 1.0.1 to PhoneGap Build.

It took around 20 days last time to get the plugin approved, might take a while again.

[alexbainbridge]

Thank you @casperbruun

[RagingRudolf]

Drum roll... It should be available on Phonegap build as we speak. I will still be working on ownership transfer.

[alexbainbridge]

Great news everyone - thank you so much @RagingRudolf @casperbruun

This update seems to have fixed many of the problems I was experiencing with the keyboard, but not all of them.

I still have a scroll problem after text entry now but only on Android (the plugin fixed the IOS ones on tablets) ..... I am now going to try to work out whether its the plugin or something else (e.g. #1433 related as my test device is a Samsung )

[alexbainbridge]

OK back to the original problem (the one remaining one).

Android
Samsung Tab S3
Android 4.2.2
Ionic Keyboard plugin (!)

After text entry using the keyboard, scroll up and down is locked (and only restarts being scrollable when the app is closed / restarted)

I commented out from keyboard.js

keyboardShow: document.addEventListener('touchmove', keyboardPreventDefault, false);
keyboardHide: document.removeEventListener('touchmove', keyboardPreventDefault);

And all works nicely now on the android device .

Hence seems there is an ionic cause / ionic solution here........ yay !

(solution may not be as simple as what I just did of course, as I am sure that that code is there for a reason, however I do know now that a solution is out there!)

[mhartington]

Going to close this as it seems the issue has been resolved.

[alexbainbridge]

@mhartington This isn't resolved actually

My last comment was that I found the problem. I removed some code and yes it works, but presumably the code is there for a reason so removing it probably has an implication that I am not sure of ;)

[mhartington]

Okay, will reopen this.

Not sure if this will help, but here is some info from out docs.

Android Notes
If your app is running in fullscreen, i.e. you have in your config.xml file you will need to set ionic.Platform.isFullScreen = true manually.

You can configure the behavior of the web view when the keyboard shows by setting android:windowSoftInputMode to either adjustPan, adjustResize or adjustNothing in your app's activity in AndroidManifest.xml. adjustResize is the recommended setting for Ionic, but if for some reason you do use adjustPan you will need to set ionic.Platform.isFullScreen = true.

Let me know if any of this will help.

[alexbainbridge]

The scroll becomes jammed subsequent to an edit (so its not around showing or not showing)

However on another issue someone has suggested an android shim that may help (which I am going to look at). If that fixes it, I will close this one!

[mhartington]

@alexbainbridge, did that fix work?

[alexbainbridge]

Sadly not - the only fix I know of is commenting out the two lines in the ionic code (as per the June 28 comment) (in keyboard.js)

Is that code doing anything important? (ha, I hate that kind of question!).

[hydrogennz]

I had a look at this problem today and found some interesting behaviours that may help you guys find a way forward with regards to this issue.

It seems that the events that fire when keyboards are shown / hidden are sometimes firing out of order and you end up with race conditions around setting / removing touchmove preventDefault event handlers.

Example:

1. User enters a page with a form and taps on the input.
2. keyboardSetShow fires. This immediately starts a setInterval timer to detect when the keyboard is 'shown' which then fires keyboardShow.
3. During this time period, if the user is able to leave the input field a keyboardFocusOut event will fire, this can end up occurring even before the keyboardShow fires.

This leads to the events firing out of order:
keyboardSetShow -> keyboardFocusOut -> keyboardHide -> keyboardShow

As you can see, the keyboardShow event will end up finishing last and will bind an event to prevent touchmove which gives us the stuck scrolling problem.

I had a play to see how I could 'unstick' the scroll and sure enough, if I trigger the keyboardHide manually by going $(document.body).trigger("focusout"); I can get things to return to normal as it removes the touchmove preventDefault event handler.

Note: Since this is a race condition around those event handlers the only way i've been able to see it reliably reproduce is to go into an input field, as the keyboard is coming up I navigate away to another view by pressing the back button. When I console.log the event handlers I can see they are out of order, and sure enough the scroll will be stuck.

[stil4m]

@alexbainbridge. In my project I tried commenting out the the two lines which resulted in a fix for Android, however it raises problems on WP8. Probably a platform check for Windows will do.

[pranjaltech]

Any solution guys? I'm facing the same problem on Android phones. Open up the keyboard once or twice, and the vertical scrolling stops.

[alexbainbridge]

@stil4m Yes device detection would be good there (maybe!) (not my area of expertise, Android issues)

@mhartington Could this issue at least be labelled as an android issue - because then someone may spot it more easily. Seems several people have got this now (not just me)

[hydrogennz]

I'm not sure removing those 2 lines of code are good way of fixing this issue. You may end up regressing other things that those lines fix,

I'm convinced it is the way how these events fire in conjunction with the keyboard showing / hiding that stuffs up things. It most likely needs a refactor to ensure they fire correctly and clean up the state of events when the keyboard closes.

In the meantime, unless i'm completely wrong, you can try firing an event i.e.: $(document.body).trigger("focusout"); that Ionic has a cleanup handler attached to which will unstick the scroll.

[adamdbradley]

I'm working to solve this, but haven't been able to recreate the issue. I've been testing on a Samsung Tab 3, with Android 4.1. Would someone be able to create a codepen, then describe exactly how to replicate the issue? I'm sure the issue is what @hydrogennz pointed out with events being out of order, but to correct them I'd like to be able to consistently recreate it. Thanks

[alexbainbridge]

Interesting workaround idea on #2192 (its really just a version of what @hydrogennz suggested)

More of a bandage than a cure, but may help some people

[adamdbradley]

This has been a challenge mainly because I've still been unable to reproduce. I've been testing on an Android 4.2, both browser and cordova, and running through all the scenarios described above and I'm still unable to replicate the stuck scroll. That said, I did attempt to clean up any areas which may be the source of the issue: 74de015

Would you be able to test your apps with the nightly version (#457 or above): http://code.ionicframework.com/#nightly

thanks

[alexbainbridge]

Thank you @adamdbradley .

Seems to be better so that is great news. Will wait for others to feedback too

(Reason I am not entirely confident is a test device I am using just auto-updated to android 4.4 in a similar timeframe - so I am not entirely sure what has fixed it - when I raised it, the test device was on 4.2)

[adamdbradley]

Going to call this closed. Please reopen and provide a codepen if you're still experiencing this issue. Thanks

[srameshr]

@alexbainbridge and @adamdbradley I am currently using this on 0.0.11 beta. I have just fixed it temporarily. Have a look at this : #2231 (comment) . It may help you in reproducing the issue.

[Ionitron Bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.