511468 - Unable to change select option with mouse when select is inside an anchor

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[John Paulett]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.2) Gecko/20090729 Firefox/3.5.2
Build Identifier: Firefox 3.7a1pre

When a select tag is inside an anchor tag (e.g. <a href="#"><select><option>one</option><option>two</option></select></a>), a user is unable to change the selected option using the mouse.

Use Case: When using the select as an bookmark/anchor within the page.  Specifically, the Yahoo UI TabView wraps tab labels in an A tag. Due to this issue, one can not use a select tag inside a tab label. (See also: http://yuilibrary.com/projects/yui2/ticket/2528333)

I am not sure if this represents valid HTML, but the W3C Validator indicates that it is valid HTML 4.01 Strict and HTML 4.01 Transitional


Reproducible: Always

Steps to Reproduce:
1. Create an HTML document with a SELECT tag inside an A tag (e.g. <a href="#"><select><option>one</option><option>two</option></select></a>).
2. Click on the select control
3. With the mouse, try to change to selected option (in the example in #1, click on the "two" option)
Actual Results:  
The select pull-down list disappears but the value of the select box does not change. In the example, "one" is still displayed in the select box.

Expected Results:  
The select box should display what was click on in step #3 (i.e. "two")

While using the mouse does not work, a user is still able to use the keyboard to selected the desired option once focus is given to the select box.


The issue appears Firefox in Windows and Linux, but not in Mac OS X. Opera (Win XP), Safari (Win XP & OS X), Chrome, IE (7 & 8), and Firefox (OS X only) all exhibit the expected <select> behavior. 

Issue is present:
Firefox 3.5.2 - Win XP Pro
Firefox 3.7a1pre - Win XP Pro
Seamonkey 2.0b2pre - Win XP Pro
Firefox 3.5.1 - Fedora

Issue is *not* present:
Firefox 3.5.2 - Mac OS X

Comment 1

[John Paulett]

Attachment: Simple illustration of the issue

Comment 2

[John Paulett]

If one removes the href from the anchor tag, this issue disappears:

e.g. <a><select><option>one</option><option>two</option></select></a> works as expected

Comment 3

[Boris Zbarsky [:bzbarsky]]

Sure, since in that case it's not a link.  For what it's worth, I see the problem just fine in Firefox on OS X.

Mats, any idea what's going on here?

Comment 4

[Mats Palmgren (inactive)]

Attachment: with some JS event tracing

Very odd.  I would have to trace C++ to see what's going on here.

FWIW, I also noticed that we handle nested links different from other UAs.
Should we really end up at #outer when clicking "inner"?
(may be unrelated to the reported problem though)