Tuesday, September 06, 2005

IE bug with a label related to select

Here is a nice IE bug I just found.
When a <label> is attached to a <select> element, and the user clicks the label, the <select> is selected (which is nice), but its selectedIndex becomes 0 (that's not so nice).

Here is an example page.

Update: I found out that this is an MSDN report bug. See http://support.microsoft.com/default.aspx?scid=kb;en-us;314279&Product=iep. They also suggest a workaround - use the onfocusin event to store the current selection before the focus is actually moved to the list, and reset it later. However, they say "you can only work around this problem in Internet Explorer 6" - I'm not sure why, as the onfocusin event is said to be supported on Internet Explorer 5.5 and later.

However, I would suggest a much simpler solution - simply handling the label event ourselves, without IE to interrupt and destroy. In their sample, I would use:
<LABEL for="test" onclick="document.getElementById(this.htmlFor).focus(); return false;">Citizenship Status:</LABEL>

In my tests, it does the job perfectly well.

2 Comments:

At December 29, 2005 7:17 AM, Anonymous Anonymous said...

Oh man, this helped out a lot! Thanks.

 
At July 19, 2006 10:13 AM, Anonymous Anonymous said...

For a small web page with just a few select-label pairs, the workaround's okay. For a medium-size web app with lots of forms a much better solution would be to use an HTML component. So all one needs to do is attach a behavior to the (X)HTML label element in which the label's click event is handled. Here is a some pseudo code that one might use:

function Click()
{
var control = element.document.getElementById(element.htmlFor);
if (control != null)
{
if (control.type == "checkbox")
control.click();
control.focus();
event.returnValue = false;
}
}

The type of the input control has to be checked against "checkbox" to allow the user to check/uncheck the checkbox.

 

Post a Comment

<< Home