Opened 9 years ago
Last modified 9 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 )
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 9 years ago by
comment:2 Changed 9 years ago by
Description: | modified (diff) |
---|
comment:3 follow-ups: 4 7 Changed 9 years ago by
Owner: | set to 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.
comment:4 follow-up: 5 Changed 9 years ago by
Status: | pending → new |
---|
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 follow-up: 6 Changed 9 years ago by
Status: | new → pending |
---|
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 Changed 9 years ago by
Status: | pending → new |
---|
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 Changed 9 years ago by
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.
comment:8 follow-up: 9 Changed 9 years ago by
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
comment:9 Changed 9 years ago by
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.
first line is supposed to read:
iOS 6 or 7