#9122 open bug ()

Opened February 26, 2013 12:58AM UTC

Last modified September 08, 2014 09:10AM UTC

Dialog: Removing modal dialog with iframe blocks focus in IE9 / IE10

Reported by: zanadar84 Owned by: zanadar84
Priority: minor Milestone: none
Component: ui.dialog Version: 1.10.1
Keywords: Cc:
Blocked by: Blocking:
Description

I recognize that you want a jsfiddle or jsbin but my example is not easily written using these tools due to the dependence of the iframe src...

Steps to reproduce with example (might take a couple of attempts as it is not 100% consistent):

*Load IETest.htm in IE9 and ensure that Browser Mode and Document Mode is set to IE9 standards using debug (F12) (Seems to work ok in ie8 mode but other things do not such as ms-filter css so that is not an option for us!)

*Click "Show Dialog"

*(Optional) Put the input focus in the dialog's text input

*Close the dialog

*Attempt to put the input focus in the main form's text input (You can't, nor can you type into it)

Potential fix:

Clear the src of iframe prior to destroy and remove in jQuery ui.

The following simple html (save as a file called IE9Test.htm) reproduces the issue:

----------START IE9TEST.HTM----------

<!doctype html>
<html lang="en">
<head id="Head1" runat="server">
	<meta charset="utf-8" />
	<title>IE9Test</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
	<link rel="Stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
</head>
<body>
	<form id="form1" runat="server">		
		<div>
			<input id="TextBox1" type="text" />
			<br />
			<a id="Show" href="#">Show Dialog</a>
		</div>

		<script type="text/javascript">
			function ShowButton_Click(e) {
				var dialog = $('<div id="jqueryuidialog" ><iframe width="100%" height="100%" frameborder="0"></iframe></div>').hide();
				var frame = dialog.children("iframe");
				frame.attr("src", "IE9Test.htm");
				dialog.dialog({ modal: true, autoOpen: false, title: "", width: 600, height: 600 });
				dialog.dialog('open');
				dialog.bind('dialogclose', function(){
					//frame.attr('src', 'about:blank'); //uncomment this line to fix input bug
					jQuery(this).dialog('destroy').remove(); // this line causes error, without it we have no error but we collect dialog iframes in DOM
				});
				
				e.stopPropagation();
			}

			jQuery(document).ready(new function() {
				jQuery("#Show").click(ShowButton_Click);
			});
		</script>

	</form>
</body>
</html>

----------END IE9TEST.HTM----------

Attachments (0)
Change History (8)

Changed February 26, 2013 02:46AM UTC by tj.vantoll comment:1

owner: → zanadar84
status: new → pending

Hi zanadar84,

Thanks for taking the time to contribute to the jQuery UI project. I'm having trouble following your example so a jsFiddle or JS Bin would be helpful. You actually can test iframes by simply pointing one test case at another, see http://jsfiddle.net/tj_vantoll/kGYQm/. The same technique is possible on JS Bin as well.

Thanks.

Changed February 26, 2013 03:01AM UTC by zanadar84 comment:2

status: pending → new

Thanks, i wasn't aware of that feature :)

http://jsfiddle.net/GwbAS/

Click "Show Dialog" put the focus in the input text box then close the dialog.

Attempt to enter text in the main input text box and you will be unable to get focus in the box or add text.

NB: Make sure IE9 is running in IE9 mode for both browser and document mode under F12 debug tools!

Changed February 26, 2013 04:02AM UTC by tj.vantoll comment:3

Thanks.

I can get focus in the textbox it just seems to take 2 clicks for some reason. I won't have the chance to look into this further tonight but this does seem like it might be related to #9067.

Changed February 26, 2013 04:56AM UTC by zanadar84 comment:4

Of 3 systems here running Windows 7 + IE9 (Fully windows updated), 2 of them fail to get focus in the text box at all after only 1 or two dialog open/closes, the third generally takes more than 2 dialog open/closes to cause the error.

Sooner or later though they all break to the point of not being able to get focus in the text box at all.

At this point, opening and closing the dialog restores the input's functionality.

I believe this is a IE9 bug, however setting the iframe src to 'about:blank' prior to destroying the dialog resolves the issue.

Changed February 27, 2013 03:25AM UTC by tj.vantoll comment:5

status: new → open
summary: Destroy/Remove Dialog created from iframe causes IE9 input issue → Dialog: Removing modal dialog with iframe blocks focus in IE9 / IE10

Reduced and verified against master: http://jsfiddle.net/tj_vantoll/GwbAS/10/

This, is an odd one. The bug occurs in IE9 & IE10. It does not occur in IE7, IE8, Firefox, Chrome, Safari, or Opera. On the test case give the input in the dialog focus, close it, then attempt to give the input on the main page focus. You cannot do it in IE9 & 10. Although occasionally after a few clicks it will work.

Not sure what's going on here.

Changed February 27, 2013 06:06AM UTC by zanadar84 comment:6

Note that the workaround/fix is to set the src on the iframe to 'about:blank' before removing it!

Changed February 27, 2013 06:24AM UTC by zanadar84 comment:7

I wonder if this is a jQuery core issue, however my testing seems to indicate that it is not.

Changed September 08, 2014 09:10AM UTC by alerde comment:8

This issue is a bug in IE9+ and reproducible without jquery. However, the proposed workaround does fine.