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!

[gabrielschulhof]

Wow! This is a serious bug! The click event that is supposed to focus the input ends up hitting the screen behind the popup, thus causing it to close!

[gabrielschulhof]

This may be a bug in vmouse.

[gabrielschulhof]

Astounding! Absolutely astounding! On the emulator at least, it seems it is sufficient to retrieve the window size during the handling of the resize event, and the disappearance is averted. I mean, this is insane! Insane, I tells ya! I'm just asking for the window size, and not making any decisions with the information I get! I mean thingsOnTheFloor.push( jaw );

[gabrielschulhof]

I have made a modification to the popup and I have pushed it to a branch. To test the modification, please perform the following steps on an iOS 7 device:

1. Browse on your iOS 7 device to http://jsbin.com/omixiliJ/7
2. Click on the button that opens the menu containing the add-to-homescreen-button
3. Add to home screen
4. Click on the newly create icon on the home screen
5. When the app opens, click "Show popup"
6. Click on one of the input boxes

At this point the virtual keyboard should appear and one of two things should happen:

1. the popup should remain motionless if my modification fixes the problem
2. Otherwise, the popup should close

Please test on as many iOS 7 devices as possible, and let me know if my modification addresses this problem.

[salbahra]

This seems to work but it seems to make the issue worse on Windows Phone 8.
The issue is related to the onscreen keyboard on popup input however there
instead of closing the page height isn't adjusted leaving content cutoff
and background incorrect. Sorry to throw a wrench in there but on the
bright side this seems to work fine on my iOS 7.1 iPhone 5S.

On Sunday, April 13, 2014, gabrielschulhof notifications@github.com wrote:

I have made a modification to the popup and I have pushed it to a branch.
To test the modification, please perform the following steps on an iOS 7
device:

1. Browse on your iOS 7 device to http://jsbin.com/omixiliJ/7
2. Click on the button that opens the menu containing the
   add-to-homescreen-button
3. Add to home screen
4. Click on the newly create icon on the home screen
5. When the app opens, click "Show popup"
6. Click on one of the input boxes

At this point the virtual keyboard should appear and one of two things
should happen:

1. the popup should remain motionless if my modification fixes the
   problem
2. Otherwise, the popup should close

Please test on as many iOS devices as possible, and let me know if my
modification addresses this problem.

Reply to this email directly or view it on GitHubhttps://github.com//issues/6961#issuecomment-40320399
.

[gabrielschulhof]

@salbahra I'm not seeing a difference between the fixed version (http://jsbin.com/omixiliJ/7) and master (http://jsbin.com/omixiliJ/8), so I would say that the iOS 7 fix does not make things worse on Windows Phone 8 - and things are pretty bad on Windows Phone 8.

[agcolom]

With master (http://jsbin.com/omixiliJ/8), I get either 1, 2, or 3 where 3 is the popup remains but moves up. (tested iOS 7.0.6 iPhone 4S)

[agcolom]

With the fixed version (http://jsbin.com/omixiliJ/7), I get 1 (the popup remains motionless)

[gabrielschulhof]

I think on Windows Phone 8 the page may have some height issues.

[gabrielschulhof]

I've filed #7322 regarding the page height issues. They occur without any popups too.

[JTOrlando]

Not sure if you ever fixed this issue. I was having a similar problem and after hours of racking my brain trying to figure out why my popup kept closing itself, I added "return false;" to my popup statement and it fixed the problem for me.

<script type="text/javascript">
  $(document).on('pageshow', function(){
    $('#showPop').on('click', function(evt){
      evt.preventDefault();
      $('#moreInfo').popup('open', {transition : 'slide'});
      $('#init').trigger('create');
      return false;  // ADD THIS LINE
    });
  });
</script>

Note: My problem was noticed on devices running iOS 7. Have not got around to testing on other devices.