Keyboard not working in Android

[abhisheksett]

We are using liquid-tether version 2.0.3 and we are facing issue with keyboard in Android. We have text boxes inside liquid-tether container and when we focus on the text box, keyboard comes up and immediately goes away. The issue was not there with 1.1.0 version.

[pzuraq]

Does the issue appear on any other mobile browsers? Which versions of Android and which web browsers? And how are you focusing the textbox, manually or programmatically?

[abhisheksett]

We have created hybrid app using Cordova and tested in 4.4.4 and 5.1.1. We are focusing textbox manually. Surprisingly the behavior differs in different OEM's. For example, the issue is consistent in Samsung, Lenovo devices, whereas it works fine in Redmi devices.

[pzuraq]

Different OEMs = slightly different browsers, so it makes sense that this would only pop up on a subset of machines. I don't have those devices so I can't test it out myself, but if you can reproduce in any browser on iOS, or a desktop browser, I'm happy to dive in.

What's weird to me is that this is happening when you manually (i.e. using your finger) touch the element to focus it. Nothing should be able to interfere with that, unless you have some custom logic running on touch events.

[abhisheksett]

We have tested the app in iOS and it works fine. We have tried to find the issue and here is our observation:
When we focus into the textbox, the keyboard comes up and it triggers window resize event. The resize event triggers focus out which eventually hides the keyboard. We have no custom logic written. The same textbox component works fine when it's placed outside tether container.

[pzuraq]

Interesting. liquid-tether doesn't have any logic that fires on resize events, but Tether.js probably does so that might be the root of it. Can you figure out where the resize event is being started?

[abhisheksett]

Yes, the resize event gets triggerred from Tether.js. Tether tries to handle resize with a fix which triggers focus out.

[pzuraq]

Ok, so it's probably a problem with Tether.js then. Can you checkout v2.0.1 of this library to see if it still has the issue? I want to see if the bug was introduced recently in Tether or if it's older.

Either way, you'll probably need to submit a fix to Tether.js. Alternatively, you can use the underlying liquid-wormhole library which does all of the animation work, but doesn't do positioning. It sounds like you have a full screen modal, which should be very easy to do with some simple CSS and probably doesn't need the full power of Tether.js.

[abhisheksett]

Did you mean to try v2.0.2? Because v2.0.1 is not available.

[pzuraq]

Not sure why it wasn't published, but no I meant v2.0.1. You can check it out directly at this commit:

40ce878