JSF dropdown list inside a tab header

Question

I'm using JSF and rich faces 4.5.5 and I'm trying to display a dropdown in the header of a tab panel. So far this is what I have:

<rich:tabPanel id="reportTabPanel" >
    <a4j:repeat var="reportCategory" value="${workBean.categories}">
        <rich:tab>
            <f:facet name="header">
                <h:panelGroup>                   
                    <h:selectOneMenu value="#{reportCategory.currentSelection}" style="background:none;border:none;width:15px">
                        <f:selectItems value="#{reportCategory.availableReports}" />
                    </h:selectOneMenu>

                    <h:outputText  value="#{reportCategory.displayedTitle}" />                          
                </h:panelGroup>
            </f:facet>

            <div id="reportContent" name="content" >
                <h:outputText value="#{reportCategory.displayedContent}" escape="false" />
            </div>              
        </rich:tab>
    </a4j:repeat>
</rich:tabPanel>

It displays fine. I have the drop-down arrow displayed on the left and the tab's name on the right of each tab header. However the event handling is dodgy. When I click the dropdown, the list opens and closes as soon as I release the button (preventing me from making a selection in the list). In order to select anything from the dropdown list, I have to keep the mouse button pressed and release it outside of the header area so that the list does not close. Only then am I able to select my option in the dropdown zone. I believe that the tab header is grabbing the release button event and using it to change tab if needed (which seems obvious).

What I would like is the dropdown to take priority over the tab header. Anyway of doing that? Alternatively, is there a way of opening the dropdown when it is hovered over?

I'm not a huge expert in JSF. I've tried looking at implementing a custom Renderer but my issue is more to do with events than visual so not sure that is the right way to go. Any suggestion? Pointers?

Thanks w.

Answer 1

Simply add onclick="event.stopPropagation()" to the h:selectOneMenu, that will prevent the click event reaching the tab.

(That said why do you need a select in the tab header? It's a navigation element.)