#9737 open bug ()

Opened January 13, 2014 04:04PM UTC

Last modified January 13, 2014 11:04PM UTC

Dialog: Scrolling in dialog in iframe disables iOS keyboard

Reported by: jason/day Owned by: jason/day
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:
Description

Steps to reproduce:

  • iOS 6 or 7
  • tap into field
  • keyboard opens
  • type characters
  • scroll in the background, while keyboard is active
  • keyboard is now completely disabled, non-responsive except for delete key

Reproducible in the following scenarios:

''Example 1:''

<iframe>

<dialog>

<form>

<input></input>

<form>

<dialog>

<iframe>

''Example 2:''

<dialog>

<iframe>

<form>

<input></input>

</form>

</iframe>

</dialog>

Bug test url:

Reproducible on jqueryui.com under the dialog/modal form demo.

Dialog is within an iframe.

http://jqueryui.com/dialog/#modal-form

Reproduced on versions 1.8.24+

I have not tested on older versions.

Attachments (0)
Change History (9)

Changed January 13, 2014 04:05PM UTC by jason/day comment:1

first line is supposed to read:

iOS 6 or 7

Changed January 13, 2014 07:08PM UTC by tj.vantoll comment:2

description: '''Steps to reproduce:''' \ - iOS 6 || 7 \ - tap into field \ - keyboard opens \ - type characters \ - scroll in the background, while keyboard is active \ - keyboard is now completely disabled, non-responsive except for delete key \ \ '''Reproducible in the following scenarios:''' \ \ \ ''Example 1:'' \ \ <iframe> \ <dialog> \ <form> \ <input></input> \ <form> \ <dialog> \ <iframe> \ \ \ ''Example 2:'' \ \ <dialog> \ <iframe> \ <form> \ <input></input> \ </form> \ </iframe> \ </dialog> \ \ \ '''Bug test url:''' \ Reproducible on jqueryui.com under the dialog/modal form demo. \ Dialog is within an iframe. \ \ http://jqueryui.com/dialog/#modal-form \ \ \ Reproduced on versions 1.8.24+ \ I have not tested on older versions. \ \ → '''Steps to reproduce:''' \ - iOS 6 or 7 \ - tap into field \ - keyboard opens \ - type characters \ - scroll in the background, while keyboard is active \ - keyboard is now completely disabled, non-responsive except for delete key \ \ '''Reproducible in the following scenarios:''' \ \ \ ''Example 1:'' \ \ <iframe> \ <dialog> \ <form> \ <input></input> \ <form> \ <dialog> \ <iframe> \ \ \ ''Example 2:'' \ \ <dialog> \ <iframe> \ <form> \ <input></input> \ </form> \ </iframe> \ </dialog> \ \ \ '''Bug test url:''' \ Reproducible on jqueryui.com under the dialog/modal form demo. \ Dialog is within an iframe. \ \ http://jqueryui.com/dialog/#modal-form \ \ \ Reproduced on versions 1.8.24+ \ I have not tested on older versions. \ \

Changed January 13, 2014 07:13PM UTC by tj.vantoll comment:3

_comment0: This is a bit crazy but I was able to recreate the problem. It would be nice to be able to reproduce the problem outside of the demo. This basic demo of a modal dialog in an iframe works fine for me: http://jsfiddle.net/tj_vantoll/4mJ4e/show. \ \ jason/day: Can you recreate the problem in my jsFiddle? Any ideas on what's going on here? \ \ Thanks. → 1389640480557980
owner: → jason/day
status: new → pending

This is a bit crazy but I was able to recreate the problem. It would be nice to be able to reproduce the problem outside of the demo. This basic demo of a modal dialog in an iframe works fine for me: http://jsfiddle.net/tj_vantoll/4mJ4e/show.

jason/day: Can you recreate the problem in my jsFiddle? Any ideas on what's going on here?

Thanks.

Changed January 13, 2014 07:16PM UTC by jason/day comment:4

status: pending → new

Replying to [comment:3 tj.vantoll]:

This is a bit crazy but I was able to recreate the problem. It would be nice to be able to reproduce the problem outside of the demo. This basic demo of a modal dialog in an iframe works fine for me: http://jsfiddle.net/tj_vantoll/4mJ4e/show. jason/day: Can you recreate the problem in my jsFiddle? Any ideas on what's going on here? Thanks.

I was able to recreate in our production code (hence, how I initially discovered the issue). I will see if I can recreate in the jsfiddle; however that may be tricky because jsfiddle uses iframes as well.

Changed January 13, 2014 07:19PM UTC by tj.vantoll comment:5

status: new → pending

Replying to [comment:4 jason/day]:

Replying to [comment:3 tj.vantoll]: > This is a bit crazy but I was able to recreate the problem. It would be nice to be able to reproduce the problem outside of the demo. This basic demo of a modal dialog in an iframe works fine for me: http://jsfiddle.net/tj_vantoll/4mJ4e/show. > > jason/day: Can you recreate the problem in my jsFiddle? Any ideas on what's going on here? > > Thanks. I was able to recreate in our production code (hence, how I initially discovered the issue). I will see if I can recreate in the jsfiddle; however that may be tricky because jsfiddle uses iframes as well.

When using the 

/show
URL the 
<iframe>
s are removed.

Changed January 13, 2014 07:31PM UTC by jason/day comment:6

status: pending → new

Replying to [comment:5 tj.vantoll]:

Replying to [comment:4 jason/day]: > Replying to [comment:3 tj.vantoll]: > > This is a bit crazy but I was able to recreate the problem. It would be nice to be able to reproduce the problem outside of the demo. This basic demo of a modal dialog in an iframe works fine for me: http://jsfiddle.net/tj_vantoll/4mJ4e/show. > > > > jason/day: Can you recreate the problem in my jsFiddle? Any ideas on what's going on here? > > > > Thanks. > > I was able to recreate in our production code (hence, how I initially discovered the issue). I will see if I can recreate in the jsfiddle; however that may be tricky because jsfiddle uses iframes as well. When using the 
/show
URL the 
<iframe>
s are removed.

It may be tomorrow, but I will look further. As for the why, I have been puzzling over this for some time now, and I have not found a duplicate scenario. In our scenario, our iframe within ui-dialog is an https, so I thought there was some type of cross scripting issue. That's when I discovered I could recreate on jqueryui.com.

In other testing, I am finding further issues with iframes & the iOS ui keyboard. For example, if a field is focused and is then hidden or removed from the DOM, the keyboard does not dismiss.

Changed January 13, 2014 07:58PM UTC by jason/day comment:7

_comment0: Replying to [comment:3 tj.vantoll]: \ > This is a bit crazy but I was able to recreate the problem. It would be nice to be able to reproduce the problem outside of the demo. This basic demo of a modal dialog in an iframe works fine for me: http://jsfiddle.net/tj_vantoll/4mJ4e/show. \ > \ > jason/day: Can you recreate the problem in my jsFiddle? Any ideas on what's going on here? \ > \ > Thanks. \ \ \ Able to reproduce here: \ \ http://jsfiddle.net/jasonday/4mJ4e/2/show \ \ Introducing a scroll recreates the issue. \ \ So here are the 2 scenarios with apparent behaviors: \ \ ''Example 1:'' \ \ <iframe> \ \ <dialog> \ \ <input> \ \ <dialog> \ \ <iframe> \ \ Behavior: ui-dialog is scrollable (ui-content is longer than dialog height). On scroll, issue presents. \ \ \ ''Example 2:'' \ \ <dialog> \ \ <iframe> \ \ <input> \ \ </iframe> \ \ </dialog> \ \ Behavior: On scroll of parent (body) that contains the dialog, the issue presents. → 1389643461153938

Replying to [comment:3 tj.vantoll]:

This is a bit crazy but I was able to recreate the problem. It would be nice to be able to reproduce the problem outside of the demo. This basic demo of a modal dialog in an iframe works fine for me: http://jsfiddle.net/tj_vantoll/4mJ4e/show. jason/day: Can you recreate the problem in my jsFiddle? Any ideas on what's going on here? Thanks.

Able to reproduce here:

http://jsfiddle.net/jasonday/4mJ4e/2/show

Introducing a scroll recreates the issue.

So here are the 2 scenarios with apparent behaviors:

''Example 1:''

<iframe>

<dialog>

<input>

<dialog>

<iframe>

Behavior: ui-dialog is scrollable (ui-content is longer than dialog height). On scroll of ui-content, issue presents.

''Example 2:''

<dialog>

<iframe>

<input>

</iframe>

</dialog>

Behavior: On scroll of parent (body) that contains the dialog, the issue presents.

Changed January 13, 2014 10:05PM UTC by tj.vantoll comment:8

status: new → open
summary: Any combination of dialog/iframe/form field disables iOS keyboard → Dialog: Scrolling in dialog in iframe disables iOS keyboard

Thanks for reducing this; that helps a lot. I'm very curious about this now. My first thought is that 

_allowInteraction()
in inadvertently blocking this. https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L771

Changed January 13, 2014 11:04PM UTC by jason/day comment:9

Replying to [comment:8 tj.vantoll]:

Thanks for reducing this; that helps a lot. I'm very curious about this now. My first thought is that 
_allowInteraction()
in inadvertently blocking this. https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L771

Interesting, I may play around with this to see if I can produce a patch.