I’m using a native select with form validation. When there is a validation error, the error popup appears behind the drop down in the select to the lower right of the mouse pointer. This causes the popup to be partially hidden by the drop down content which is confusing to users.
The problem appears in both Chrome and FireFox, however FireFox appears to trigger the mouse-over event for the entire drop down, not just the closed combobox widget, so the issue is much more noticeable. I captured some screenshots of the issue here:
https://www.dropbox.com/sh/j2m5ud9fr55t3w4/_Qh1utzIyS
This looks like it is related to an old bug http://dev.vaadin.com/ticket/1663 where a decision was made to put the error popup at the mouse point rather than next to the component.
The order in which elements i rendered on top of each others are defined with the css rule z-index. Basically the item with the highest z-index will be on top. You can look with Chrome’s inspector or Firefox’s Firebug to see what the dropdown’s and tooltip’s z-index is, and try to modify them inside the inspector to see if it fixes your issue. Then it is just a theme fix (that should be also fixed in Vaadin).
The bad side with this is that NativeSelect, as the name says, is a native component rendering that the browser provides. It might be that the browser decides to ignore css rules on something that it should control.
So I think you’re right that I may be stuck because of the native select. It would be nice if I could disable, relocate, or hide the popup easily but from what I’ve seen in the forums that may have to wait until Vaadin 7.