Tab Index is not working richfaces pop up panelk

Question

I am new to Rich Faces and we are using richfaces 4.0. We are having an pop up requirement in our project and we used rich:popupPanel.
In the pop up we are having a form with 5 to 10 input text boxes.

We are facing the following issue: Tab is not working in order to go the next text box.

We used tabindex property but it is not working in rich faces.

Can anyone help me on this?

Thanks in advance.

Answer 1

Here is a sample popup panel with tab feature enabled in Richfaces 4:

<script type="text/javascript">
    jQuery('input').live("keypress", function(e) {
        var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
        /* ENTER PRESSED*/
        if (key == 9) {  // 9 for TAB
            /* FOCUS ELEMENT */
            var inputs = jQuery(this).parents("form").eq(0).find(":input");
            var idx = inputs.index(this);

            var move = (e.shiftKey) ? (-1) : (1); // for Shift+TAB

            if (idx == inputs.length - 1) {
                inputs[0].select()
            } else {
                inputs[idx + move].focus(); //  handles submit buttons
                inputs[idx + move].select();
            }
            return false;
        }
    });
</script>

<rich:jQuery query="focus().select()" selector="#thegrid :input:visible:enabled:first" name="focusInput"/>

<rich:popupPanel id="samplepopup" modal="true" resizeable="true" height="220" width="400"
                 onmaskclick="#{rich:component('samplepopup')}.hide()"
                 onshow="focusInput();">

    <f:facet name="header">
        <h:outputText value="sample"/>
    </f:facet>

    <h:form>

        <h:panelGrid id="thegrid" columns="2" style="direction: rtl;">
            <h:outputText value="Current Pass"/>
            <h:inputSecret id="pass1" value="#{userBean.pass}"/>
            <h:outputText value="New Pass"/>
            <h:inputSecret id="pass2" value="#{userBean.newPass}"/>
            <h:outputText value="New Pass Confirm"/>
            <h:inputSecret id="pass3"/>
        </h:panelGrid>
    </h:form>

</rich:popupPanel>

<a4j:commandButton value="show sample" onclick="#{rich:component('samplepopup')}.show()"/>