Dialog: Scrolling in dialog in iframe disables iOS keyboard

[jason/day]

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.

[jason/day]

first line is supposed to read:

iOS 6 or 7

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

[jason/day]

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

[tj.vantoll]

Replying to jason/day:

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

[jason/day]

Replying to tj.vantoll:

Replying to jason/day:

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

[jason/day]

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

[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

[jason/day]

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