New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 7423 link

Starred by 21 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Mar 2016
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

Sign in to add a comment

Select box inside a floating div does not dropdown on clicking the arrow

Reported by, Feb 5 2009

Issue description


The best way to describe the issue is if you look at - use the select box at the top to
change the language to English. An on-screen keyboard  should appear (click
in the text field in case it doesn't), - this is just lots of floated &
nested divs. It Has been made draggable using the dojo drag&drop facility,
but nothing special beyond that.

The select in the bottom right corner of this refuses to drop down on
clicking the arrow, though works fine in Mozilla & IE. I initially thought
it was due to the click event being cancelled, but this is not the case
(the problem remains even if I disable all event handling). Then I though
z-index (because keyboard is at 10000, but removing that does not help
either. Something to do with layouts, I guess.

It would really help if there is a workaround...

oops, I meant the select box in the bottom left corner. It has 2 valid options for
English language.

Comment 2 by *, Feb 5 2009

Labels: -Area-Misc Area-Compat Webkit-specific NeedsReduction
Status: Untriaged
Confirmed in build (Developer Build 9215).

IE 7: OK
Firefox 3: OK
Safari 3(nightly 40471): Not OK, same issue.

Comment 3 by, Apr 3 2009

Status: Available
Chrome, Safari 4 - NOT OK

Comment 5 Deleted

Comment 6 by, Jul 29 2009

Same problem for me, it seems that this is more a javascript issue since disabling
the css for my site doesn't change anything, the select box doesn't popup in chrome 2
but it works in IE7, 8, 6, FF2 and FF3 ...

Comment 7 by, Jul 29 2009

The problem is when you have a select with a parent div having a return false in a
mousedown event, like this :

        <div id="container">



                    return false;


all other browsers keep the select being selectAble but chrome says no ! Who is right ?
Have the same problem with Chrome
Can not click on select box inside a floating div
13.1 KB View Download

Comment 9 by, Sep 21 2009

@wouaren: thanks a lot for investigating this. I can confirm that my observations
agree with your findings - <select> works as expected if I do not cancel the
mousedown event on the containing div.

This is a workaround for this issue, but I think the Chrome behaviour is still a bug,
since it differs from all other DOM implementations in this regard - even though the
spec might be ambiguous on this.
Update: turns around that the workaround is not possible after all. I am cancelling
mousedown event because I do not want the parent of the <select> to steal focus upon
a mouse click.

Plan was to cancel the DOMFocusIn event instead of mousedown - but that also prevents
the <select> from expanding.

So, I think that the bug is that <select> elements in WebKit (and only WebKit) do not
drop down without acquiring focus. This should be fixed.
Attaching a reduced test case, with no external dependencies. Hoping this will help
the developers narrow this down quicker, or suggest a workaround.

I have used old style event handling to keep the file short, and to avoid branching
for IE. But exactly the same behaviour is seen with addEventListener/preventDefault apis.
1.8 KB Download

Comment 12 by, Oct 26 2009

Labels: -Area-Compat Area-WebKit Mstone-X
Labels: -NeedsReduction has-reduction

Comment 14 by, Jan 4 2011

What was the original bug that this was trying to solve?  This is a painful bug caused by this behavior.  Do we tell customers to use FireFox instead of Chrome and Safari?

What is the current plan to make the select box working in this case?

1) I think this issue's title should be something like:
"SELECT elements children of an element with onmousedown='return false;' can't be opened."
(I mean, it's not related to a "floating div", but to the "onmousedown")

2) simple code snippet to reproduce the bug:
<body onmousedown="return false;" >
<select><option value="1">ONE</option></select>

3) one could say that this is not a bug, because the "onmousedown" is doing his job OK by cancelling the click event.
but at least 2 reasons confirm that this should be considered as a bug:
3.1) in IE and FF the select opens OK
3.2) if we insert an input type="button" as a sibling to the select, that button is clickable.
(or any clickable element)

4) this issue is related to #65176, which has been marked as "Won't fix"

Has anyone figured out a work-around for this?

Comment 17 by Deleted ...@, Feb 18 2012

No you guys are turning into a problem its not. It has nothing to do with return false, it has to do with the z-index in css. I had the same issue and I notices the z-index:99 css rule in the style attribute fixed it!

Comment 18 by Deleted ...@, Feb 18 2012

I noticed that even though that was the issue for me it still may not be for everyone here, but its worth looking into your javascript to see if there is a change of z-index, for example the poster has '#keyboard_candidates-panel-container' and '#lipik-control-strip-container-keyboard_candidates-panel-container' have z-index inline. I noticed though by removing those alone it did not work, so I started with console removing bunch of position and float display and z-index rules and it finally worked.
 - event.preventDefault()


<div><select><option></select></div>   HTML

div.addEventListener( "click", function() { event.preventDefault(); }, false );   JS


div.addEventListener( "click", function() { /* remove preventDefault */ }, false );   JS

Removing event.preventDefault in my container handlerfunction solved it.

Issue occured by invoking event.stopPropagation() and then event.prefentDefault() to disable zooming on the iPad (which is always again enabled by stopPropagation). Removing the preventDefault did the trick.

Returning true in the function didn't help me.
Project Member

Comment 21 by, Mar 10 2013

Labels: -Area-WebKit Cr-Content
Project Member

Comment 22 by, Apr 6 2013

Labels: -Cr-Content Cr-Blink
Labels: -Mstone-X -has-reduction mstone-X has-Reduction
Status: WontFix (was: Available)
Original URI is no longer available.
Test case in #11 behaves exactly the same in Internet Explorer and FireFox as Chrome does these days. Canceling the event in a parent will prevent the select box from opening.

Closing legacy issue.

Sign in to add a comment