JSF Dropdown-Liste in einem Tab-Header

Question

Ich benutze JSF und Rich Faces 4.5.5 und ich versuche, ein Dropdown in der Kopfzeile eines Registerkartenbereichs anzuzeigen. So weit ist das, was ich habe:

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

Es zeigt gut an. Ich habe den Dropdown-Pfeil auf der linken Seite und den Namen der Registerkarte auf der rechten Seite jeder Registerkarte angezeigt. Die Ereignisbehandlung ist jedoch zweifelhaft. Wenn ich auf das Dropdown-Menü klicke, wird die Liste geöffnet und geschlossen, sobald ich die Schaltfläche loslasse (damit ich keine Auswahl in der Liste treffen kann). Um alles aus der Dropdown-Liste auszuwählen, muss ich die Maustaste gedrückt halten und sie außerhalb des Kopfbereichs freigeben, damit die Liste nicht geschlossen wird. Nur dann kann ich meine Option in der Drop-Down-Zone auswählen. Ich glaube, dass die Registerkarte Header das Release-Button-Ereignis ergreift und es zu verwenden, um bei Bedarf Tab zu ändern (was offensichtlich scheint).

Was ich möchte, ist das Dropdown-Menü, um Vorrang vor dem Tab-Header zu haben. Wie auch immer, das zu tun? Gibt es alternativ eine Möglichkeit, das Drop-Down-Fenster zu öffnen, wenn es sich über ihm befindet?

Ich bin kein großer Experte in JSF. Ich habe versucht, einen benutzerdefinierten Renderer zu implementieren, aber mein Problem hat mehr mit Ereignissen zu tun als mit visuellen, also bin ich mir nicht sicher, ob das der richtige Weg ist. Irgendein Vorschlag? Zeiger?

Danke w.

Answer 1

Fügen Sie einfach onclick="event.stopPropagation()" zu h:selectOneMenu hinzu, das verhindert, dass das Klickereignis die Registerkarte erreicht.

(sagte, warum brauchen Sie ein wählen auf der Registerkarte Header? Es ist ein Navigationselement.)