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.

4 Responses to “IE bug with a label related to select”

  1. Anonymous Says:

    Oh man, this helped out a lot! Thanks.–>

  2. Robert Says:

    Any advice for using labels on a td to select an option using an ID?

    ie

    I am using PHP 5.1 with smarty templates
    Firefox handles this perfectly but IE and Safari (apparently) dont.

    Rob

  3. Robert Says:

    Sorry I meant to have included this:

    «label for="f{$key}"»«img src="/images/kits/{$jacket.1}.jpg" alt="{$jacket.0}" title="{$jacket.0}" /»«/label»«input type="radio" name="jacket_colour" value="{$key}" id="f{$key}" {if $key==$jacket_colour} checked="checked"{/if}/»

  4. splintor Says:

    Hi Robert,
    I’m sorry for my late response.

    I didn’t understand your problem. I don’t know PHP and the smarty templates, but if you have an HTML problem that works in Firefox but not in IE, you can post a short HTML section (without PHP tags) that demonstrates the problem, and then I can see if I can tell where the problem is, and if and how it can be bypassed.

    splintor

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: