Dismissable pop up closed itself on input focus with fullscreen webapp ios >= 7.0.3

[xtrembaker]

Hi everyone,

I'm having trouble with the jqm pop up, when trying to get focus on an input field inside the pop up, the iOS virtual keyboard shows up but the popup closed itself !
This behavior only happen in those case :

• pop is dismissible
• the app is in fullscreen mode (using meta "apple-mobile-web-app-capable")
• IOS >= 7.0.3. Haven't tried on 6.X but works great with a 5.1

I'm using jqm 1.3.2 with jQuery 1.9.1, here's a simple fiddle you can try (do not forget to open the app in fullscreen mode !) : http://jsfiddle.net/xtrembaker/N2rE5/1/

P.S : In the fiddle, I noticed that sometimes the pop up don't close itself and you're able to type text in input. But other times, the behavior described above happens.

Hope this feedback helps !

[xtrembaker]

Hello !

I'm not sure it's related to Cordova since we do not use this one... Our app is a basic web application, full js and html.

[gabrielschulhof]

Can you please try again with the latest version of jQuery Mobile? It's available from

http://code.jquery.com/mobile/git/jquery.mobile-git.js
http://code.jquery.com/mobile/git/jquery.mobile-git.css

[agcolom]

Here's the jsbin using latest: http://jsbin.com/omixiliJ/1/edit
I can confirm the behavior when the app is launched full-screen by going to http://jsbin.com/omixiliJ/1/ then adding it to home screen and then launching it. Without that, it works as expected. Tested on iPhone 4S with iOS 7.0.4

[gabrielschulhof]

Reproduced on browserstack.

[v666]

Just my opinion, but I'm not sure if 6961 is the same as 6986?

6961 is reproduced through the device built-in browser, while 6986 occurs through the UIWebView component inside a native iOS App...

I don't know just making sure... Thank you!

[gabrielschulhof]

@v666 We'll see when we fix this issue whether it also fixes #6986 ...

[v666]

Just a note, if it helps: setting the focus() on the input text inside the "afteropen" event for the popup seems to work-around the situation for accepting User input - both popup and keyboard are displayed correctly and user can input...

[gabrielschulhof]

@v666 Nice!

[salbahra]

I am also observing this issue. I used the same workaround discussed by @v666 however the issue persists if the user hides the keyboard and taps an input field, showing the keyboard again. This repeat action causes the popup to close again.

I am also using the app within PhoneGap/Cordova.

[JB22]

I had the same issue as above in my iphone 4s IOS 7.0, after literally hours of research the other day I stumbled upon a fix today - adding height=device-height into . @salbahra this also fixes the issue with the hiding of the keyboard - hope this helps someone else!

[v666]

@JB22 That sounds great - but can you give better explanation? "height=device-height" where?

[salbahra]

He means in the tag in the header. Example:
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">

I actually went about this by removing extra pages from the DOM and somehow that fixed my issue. I also switched to using the popup dynamically (removing it from DOM when not needed).

[v666]

Ok, sounds good. I'll give a try and let you know. Thank you!