IE7 <select> tag locks up entire browser when disabled and clicked

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

G-Toe - 22 Jun 2007 18:08 GMT

Bring up the following HTML in IE7. Put focus in the text input box then
click on the dropdown box. You will see your IE7 browser totally locks up.
You can't click on tabs, favorites, url, refresh... nothing. ALT-TAB or put
focus to a different app and return back to IE7 browser then see everything
works normally. I don't know if any other HTML elements behave like the
<select> tag when disabled and clicked on but I did try it to the button
element with no problems.

<html>
<head>
<script language="JavaScript">
function myFunc(){
document.getElementById('SEL1').disabled = true;
}

function showDiv(){
document.getElementById('okdiv').style.display = ''
}
</script>
</head>
<body>
<form name="main" method="post" action="http://action" >
<input type="text" name="TEXT1" id="TEXT1" size="21" value="" maxlength="10"
onBlur="myFunc()">
<SELECT name="SEL1" id="SEL1" size="1">
<OPTION VALUE=""></OPTION>
<OPTION VALUE="A">Option A</OPTION>
<OPTION VALUE="B">Option B</OPTION>
<OPTION VALUE="C">Option C</OPTION>
</SELECT>
<div name="okdiv" id="okdiv" style="display:none">ok pressed</div>
<br>
<input value=" OK " type="button" name="OKButt" onclick="showDiv()">
</form>
</body>
</html>

Reply to this Message

PA Bear - 22 Jun 2007 20:28 GMT

Start here http://msdn2.microsoft.com/en-us/ie/default.aspx and here
http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

Signature

~Robear Dyer (PA Bear)
MS MVP-Windows (IE, OE, Security, Shell/User)
AumHa VSOP & Admin; DTS-L.org

> Bring up the following HTML in IE7. Put focus in the text input box then
> click on the dropdown box. You will see your IE7 browser totally locks
[quoted text clipped - 46 lines]
>
> http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?mid=11e6
f657-f890-43b2-ac67-c7ccae7e1e1c&dg=microsoft.public.internetexplorer.general

Reply to this Message

G-Toe - 25 Jul 2007 20:44 GMT

Here's an actual solution to this problem.

The mouse event on the <select> tag when clicking on it is somehow still
acting when the onBlur event from the text box occurs and they collide
somehow. The easy and wimpy way out of this would be to use the timeout
function to delay the disabling of the <select> element for a fraction of
second. However, I think I found a much better solution.

I narrowed down the problem to the mouse and stumbled upon the following web
page ( http://www.webdevelopersjournal.com/articles/jsevents2/jsevents2.html
) where I read similar symptoms I was experiencing in the Mouse Capture
section of the article. This is where I discovered the releaseCapture()
function.

The fixed HTML is below...
<html>
<head>
<script language="JavaScript">
function myFunc(){
document.getElementById('SEL1').releaseCapture();// <---- SOLUTION!!!!
document.getElementById('SEL1').disabled = true;
}

function showDiv(){
document.getElementById('okdiv').style.display = ''
}
</script>
</head>
<body>
<form name="main" method="post" action="http://action" >
<input type="text" name="TEXT1" id="TEXT1" size="21" value="" maxlength="10"
onBlur="myFunc()">
<SELECT name="SEL1" id="SEL1" size="1">
<OPTION VALUE=""></OPTION>
<OPTION VALUE="A">Option A</OPTION>
<OPTION VALUE="B">Option B</OPTION>
<OPTION VALUE="C">Option C</OPTION>
</SELECT>
<br>
<input value=" OK " type="button" name="OKButt" id="OKButt"
onclick="showDiv()">
<div name="okdiv" id="okdiv" style="display:none">ok pressed</div>
</form>
</body>
</html>

Of course the form in our application is more complex than this example. We
have a loop to determine which fields we wanted to disable depending on which
field we were onBlur'ing from. We also have 5 <select> elements on the form
instead of just one as shown in the example. So as we loop, we check to see
if the type of the elements we want to disable are 'select-one' and perform
the releaseCapture() on them. This effective releases multiple <select>
elements no matter which one you click on.

> Bring up the following HTML in IE7. Put focus in the text input box then
> click on the dropdown box. You will see your IE7 browser totally locks up.
[quoted text clipped - 41 lines]
>
> http://www.microsoft.com/communities/newsgroups/list/en-us/default.aspx?mid=11e6
f657-f890-43b2-ac67-c7ccae7e1e1c&dg=microsoft.public.internetexplorer.general

Reply to this Message