选项卡标题内的 JSF 下拉列表

Question

我正在使用 JSF 和丰富的面孔 4.5.5，我正在尝试在选项卡面板的标题中显示下拉菜单。到目前为止，这就是我所拥有的：

<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>

显示正常。我在左侧显示下拉箭头，在每个选项卡标题的右侧显示选项卡名称。然而，事件处理是狡猾的。当我单击下拉列表时，列表会在我释放按钮后立即打开和关闭（阻止我在列表中进行选择）。为了从下拉列表中选择任何内容，我必须按住鼠标按钮并将其释放到标题区域之外，以便列表不会关闭。只有这样我才能在下拉区域中选择我的选项。 我相信选项卡标题正在抓取释放按钮事件并在需要时使用它来更改选项卡（这似乎很明显）。

我希望下拉菜单优先于选项卡标题。无论如何要这样做？ 或者，有没有办法在悬停时打开下拉菜单？

我不是 JSF 方面的专家。我尝试过实现自定义渲染器，但我的问题更多与事件有关，而不是视觉问题，所以不确定这是正确的方法。有什么建议吗？指针？

谢谢 w。

Answer 1

只需将onclick="event.stopPropagation()" 添加到h:selectOneMenu，即可防止点击事件到达标签页。

（那是说为什么你需要在标签页头中选择？它是一个导航元素。）