Opened 5 years ago

Last modified 5 years ago

#9737 open bug

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 (last modified by tj.vantoll)

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.

Change History (9)

comment:1 Changed 5 years ago by jason/day

first line is supposed to read:

iOS 6 or 7

comment:2 Changed 5 years ago by tj.vantoll

Description: modified (diff)

comment:3 Changed 5 years ago by tj.vantoll

Owner: set to jason/day
Status: newpending

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.

Last edited 5 years ago by tj.vantoll (previous) (diff)

comment:4 in reply to:  3 ; Changed 5 years ago by jason/day

Status: pendingnew

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.

comment:5 in reply to:  4 ; Changed 5 years ago by tj.vantoll

Status: newpending

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.

comment:6 in reply to:  5 Changed 5 years ago by jason/day

Status: pendingnew

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.

comment:7 in reply to:  3 Changed 5 years ago by 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.

Last edited 5 years ago by jason/day (previous) (diff)

comment:8 Changed 5 years ago by tj.vantoll

Status: newopen
Summary: Any combination of dialog/iframe/form field disables iOS keyboardDialog: 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

comment:9 in reply to:  8 Changed 5 years ago by 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.

Note: See TracTickets for help on using tickets.