4 Replies Latest reply on Jun 4, 2009 1:47 PM by vsirishreddy

    Issue with rich:tabPanel

    vsirishreddy

      Hello all:

      I have an issue with tabPanel and could not resolve it. Some users are born with an innate aversion towards using mouse and they prefer to work on the application by using only keyboard.

      My page consists of three tabs, with multiple tabs nested in each of them. I am using 'Ajax' type tab switch. Thanks to Richfaces! Everything works well with incredible performance.

      Now the problem being, I am not able to capture or focus on the tab labels by pressing 'Tab' key on the keyboard. During the process('Tab' key press on keyboard), it focuses one by one on all the header links above the tabbed panel, and then directly jumps to focus on the active tab content.

      Is there a solution to fix this issue, I have tried setting action attribute to the rich:tab, but that didn't help solve the problem. Any help on resolving this issue is highly appreciated.

      ~SirG

        • 1. Re: Issue with rich:tabPanel
          ilya_shaikovsky

          seems you need to add some focus keeper elements no your own to label facet. It is not possible out-of-the-box.

          • 2. Re: Issue with rich:tabPanel
            vsirishreddy

            Thanks for the response!

            Any hint on how to add the focus to the label facet of tabbed panel. Do I need to write a custom renderer?

            Thanks.

            • 3. Re: Issue with rich:tabPanel
              ilya_shaikovsky

              Seems not really necessary start with rendering rewriting. you could just add some elements which could be focused to tabs labels (using facet) and handle focus and blur on this elements via js.

              • 4. Re: Issue with rich:tabPanel
                vsirishreddy

                Wow!! Thanks a ton!! That really helped.

                If someone else is looking for a solution, this is how I have implemented:

                <rich:tabPanel switchType="ajax" activeTabClass="activeTabBlue" inactiveTabClass="inactiveTabBlue" contentClass="tabContentBlue" headerSpacing="2px" selectedTab="#{billsearch.selectedTab}" >
                
                 <rich:tab id="advancedSearch" name="advanced" onkeypress="setAdvanceFlag();" onclick="setAdvanceFlag();" reRender="criteriaDiv">
                
                 <f:facet name="label">
                 <a4j:commandLink value="Advanced Search" onclick="return false;" style="color: black; text-decoration: none"/>
                 </f:facet>
                 ..... ..... ..... ..... ..... ..... ..... ..... ..... .....
                 ..... ..... ..... ..... ..... ..... ..... ..... ..... .....
                 </rich:tab>
                </rich:tabPanel>


                Thanks.