s:selectDate does not have focus when h:selectOneMenu is bel

byoudan Jul 19, 2007 3:53 PM

When you have a selectDate tied to a h:inputText box and there is h:selectOneMenu control directly below, the h:selectOneMenu item has focus and shows through the date picker when the date picker is selected. This only happens on IE6. IE7 and Firefox are ok but the standard browser here is IE6. Any ideas?

<tr>
 <td>Queue Date</td>
 <td>
 <s:decorate>
 <h:inputText id="queueDate" value="#{sAppAdmin.queueDate}">
 <s:convertDateTime pattern="MM/dd/yyyy"/>
 </h:inputText>
 <s:selectDate for="queueDate">
 <h:graphicImage url="../img/dtpick.gif" style="margin-left:5px;cursor:pointer" />
 </s:selectDate>
 </s:decorate>
 </td>
</tr>
<tr>
 <td>Project Status</td>
 <td>
 <s:decorate>
 <h:selectOneMenu id="projectStatus" layout="pageDirection" value="#{projectStatusId}">
 <f:selectItem itemValue="3749" itemLabel="(Select one)" />
 <f:selectItem itemValue="5083" itemLabel="Active"/>
 </h:selectOneMenu>
 </s:decorate>
 </td>
</tr>

1. Re: s:selectDate does not have focus when h:selectOneMenu is

shane.bryzak Jul 19, 2007 7:23 PM (in response to byoudan)

The issue is that IE6 uses a native control for select boxes, giving it a higher z-index than all the other "normal" controls (i.e. it's rendered "on top" of everything else on the page).

One workaround I've seen (on an internet banking site) is to hide the select menu while the popup is open, then redisplay it again when the popup is closed. This should only take a couple of lines of javascript to implement and is probably the easiest fix.

IE == shonky.
Actions