Opened 6 years ago

Last modified 4 years ago

#9122 open bug

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:


<!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>

Change History (8)

comment:1 Changed 6 years ago by tj.vantoll

Owner: set to zanadar84
Status: newpending

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.

comment:2 Changed 6 years ago by zanadar84

Status: pendingnew

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!

comment:3 Changed 6 years ago by tj.vantoll

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.

comment:4 Changed 6 years ago by zanadar84

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.

comment:5 Changed 6 years ago by tj.vantoll

Status: newopen
Summary: Destroy/Remove Dialog created from iframe causes IE9 input issueDialog: 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.

comment:6 Changed 6 years ago by zanadar84

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

comment:7 Changed 6 years ago by zanadar84

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

comment:8 in reply to:  description Changed 4 years ago by alerde

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

Note: See TracTickets for help on using tickets.