New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
xtrembaker opened this Issue Jan 17, 2014 · 24 comments

Comments

Projects
None yet
7 participants
@xtrembaker

xtrembaker commented Jan 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@xtrembaker

xtrembaker Jan 17, 2014

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.

xtrembaker commented Jan 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 22, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 22, 2014

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Jan 22, 2014

Member

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

Member

agcolom commented Jan 22, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 22, 2014

Contributor

Reproduced on browserstack.

Contributor

gabrielschulhof commented Jan 22, 2014

Reproduced on browserstack.

@v666

This comment has been minimized.

Show comment
Hide comment
@v666

v666 Jan 22, 2014

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!

v666 commented Jan 22, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 22, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 22, 2014

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

@v666

This comment has been minimized.

Show comment
Hide comment
@v666

v666 Jan 22, 2014

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

v666 commented Jan 22, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 23, 2014

Contributor

@v666 Nice!

Contributor

gabrielschulhof commented Jan 23, 2014

@v666 Nice!

@salbahra

This comment has been minimized.

Show comment
Hide comment
@salbahra

salbahra Feb 26, 2014

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.

salbahra commented Feb 26, 2014

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

This comment has been minimized.

Show comment
Hide comment
@JB22

JB22 Mar 26, 2014

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!

JB22 commented Mar 26, 2014

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

This comment has been minimized.

Show comment
Hide comment
@v666

v666 Mar 26, 2014

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

v666 commented Mar 26, 2014

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

@salbahra

This comment has been minimized.

Show comment
Hide comment
@salbahra

salbahra Mar 26, 2014

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

salbahra commented Mar 26, 2014

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

This comment has been minimized.

Show comment
Hide comment
@v666

v666 Mar 26, 2014

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

v666 commented Mar 26, 2014

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

@gabrielschulhof gabrielschulhof added this to the 1.4.3 milestone Apr 11, 2014

@gabrielschulhof gabrielschulhof self-assigned this Apr 11, 2014

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 11, 2014

Contributor

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!

Contributor

gabrielschulhof commented Apr 11, 2014

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 comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 11, 2014

Contributor

This may be a bug in vmouse.

Contributor

gabrielschulhof commented Apr 11, 2014

This may be a bug in vmouse.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 13, 2014

Contributor

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

Contributor

gabrielschulhof commented Apr 13, 2014

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 added a commit that referenced this issue Apr 13, 2014

Popup: Request window size during resize handling
Platform: iOS 7, page saved to home screen
For some mysterious reason this prevents the subsequent focus on an input
inside the popup caused by the user clicking on said input from somehow
resulting in a vclick on the popup's screen which, in turn, causes the popup to
close. I should sign up for a course on the occult.

Fixes gh-6961
@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 13, 2014

Contributor

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.

Contributor

gabrielschulhof commented Apr 13, 2014

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 comment has been minimized.

Show comment
Hide comment
@salbahra

salbahra Apr 13, 2014

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/jquery/jquery-mobile/issues/6961#issuecomment-40320399
.

salbahra commented Apr 13, 2014

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/jquery/jquery-mobile/issues/6961#issuecomment-40320399
.

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 14, 2014

Contributor

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

Contributor

gabrielschulhof commented Apr 14, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Apr 14, 2014

Member

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)

Member

agcolom commented Apr 14, 2014

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

This comment has been minimized.

Show comment
Hide comment
@agcolom

agcolom Apr 14, 2014

Member

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

Member

agcolom commented Apr 14, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 14, 2014

Contributor

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

Contributor

gabrielschulhof commented Apr 14, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Apr 15, 2014

Contributor

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

Contributor

gabrielschulhof commented Apr 15, 2014

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

gabrielschulhof added a commit that referenced this issue Apr 19, 2014

@JTOrlando

This comment has been minimized.

Show comment
Hide comment
@JTOrlando

JTOrlando Mar 3, 2015

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.

JTOrlando commented Mar 3, 2015

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment