Liste déroulante JSF dans un en-tête d'onglet

Question

J'utilise JSF et rich faces 4.5.5 et j'essaie d'afficher une liste déroulante dans l'en-tête d'un panneau à onglets. Jusqu'à présent, voici ce que j'ai:

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

Il affiche bien. J'ai la flèche déroulante affichée sur la gauche et le nom de l'onglet sur la droite de chaque en-tête de l'onglet. Cependant, la gestion des événements est douteuse. Lorsque je clique sur la liste déroulante, la liste s'ouvre et se ferme dès que je relâche le bouton (ce qui m'empêche de faire une sélection dans la liste). Afin de sélectionner quoi que ce soit dans la liste déroulante, je dois maintenir le bouton de la souris enfoncé et le relâcher en dehors de la zone d'en-tête afin que la liste ne se ferme pas. Ce n'est qu'alors que je peux sélectionner mon option dans la zone de liste déroulante. Je crois que l'en-tête de l'onglet saisit l'événement du bouton de libération et l'utilise pour changer d'onglet si nécessaire (ce qui semble évident).

Ce que je voudrais, c'est que la liste déroulante prenne la priorité sur l'en-tête de l'onglet. De toute façon de le faire? Vous pouvez également ouvrir le menu déroulant lorsque vous le survolez. Je ne suis pas un grand expert en JSF. J'ai essayé d'implémenter un Renderer personnalisé, mais mon problème concerne plus les événements que le visuel, donc je ne suis pas sûr que ce soit la bonne façon de procéder. Toute suggestion? Pointeurs?

Merci w.

Answer 1

Il suffit d'ajouter onclick="event.stopPropagation()" au h:selectOneMenu pour empêcher l'événement click d'atteindre l'onglet.

(Cela dit pourquoi avez-vous besoin d'une sélection dans l'en-tête de l'onglet? Il est un élément de navigation.)