0 Replies Latest reply on Feb 22, 2012 6:45 AM by kevin 2

    TabPanel issue after removing a tab

    kevin 2 Newbie

      Hello,

       

      In my example, I have a dynamic tabPanel with closable tabs.

      The deleteTab function removes the clicked tab from the tab list by its id and render the tabPanel.

      This worked well in RF 3.3.3 but there is a bug in 4.1.0 Final.

       

      When the page is open, there are 3 tabs (tab1, tab2, tab3), which all have a "X" to close them.

      I click on tab 3 header, tab3 is opened.

      I click on tab2's "X", this tab is closed and there are only tab1 and tab3.

      But! Now I removed one tab, I cannot switch to another tab. There is no error, just in the HTML the tab ids are incorrect (tab1, tab2) !

      If I do a refresh with F5, the tabs ids are correct and the navigation works.

       

      Here is my simple example:

       

          <h:form>
            <rich:tabPanel id="tabPanel" switchType="ajax" activeItem="#{tabManager.selectedTabId}">     
              <c:forEach items="#{tabManager.tabs}" var="tab">
      
                    <rich:tab id="#{tab.id}" name="#{tab.id}" header="#{tab.label}">
                      <f:facet name="header">
                        <a4j:outputPanel id="#{tab.id}-label-panel">
                          <h:outputText id="#{tab.id}-label" value="#{tab.label}" />
                            <a4j:commandLink id="#{tab.id}-close"
                              styleClass="tab-close-button" onclick="deleteTab('#{tab.id}');" value="X"
                              rendered="#{tab.showCloseButton}"/>
                        </a4j:outputPanel>
                      </f:facet>
                      <div class="tab-content">
                          <ui:include src="#{tab.jsfPath}" />
                      </div>
               </rich:tab>
      
             </c:forEach>
            </rich:tabPanel>
      
            <a4j:jsFunction name="deleteTab" id="deleteTab" render="tabPanel" actionListener="#{tabManager.deleteTab}">
                <a4j:param id="deleteTabParam" name="tabToDelete" />
            </a4j:jsFunction>
      
          </h:form>
      
      

       

      Does someone has the same issue ?

       

      Thanks by advance