RichFaces Hotkey's not working for me

Question

I'm having trouble to get the rich:hotkey to work as intended in richfaces (version: 4.3.2)

Mainquestion: How can i make the hotkey work, only when the popuppanel is shown.

On a certain point on the site i show a popuppanel with choices to proceed on.
for example (made up):

Choices:

1 - Go to next page

2 - Go to begin of the wizard

3 - Cancel the wizard and go to homepage

If pressing '1' i want the first option to be selected, on '2' the second option.

My code so far:

<h:form prependId="false" id="contentForm">
    ...
    <rich:popupPanel id="navPopup" modal="true" autosized="true" resizeable="false" styleClass="popup-panel" 
        zindex="202" domElementAttachment="parent">
        ...
        <rich:panel id="navOptions">
            <!-- this div is used to check visibility of the navpopuppanel, for the key event -->
            <script type="text/javascript">
                /* <![CDATA[ */

                    function focusPopupChoice(getal) {
                        alert(getal);
                    }

                /*]]>  */
            </script>
            <a4j:repeat value="#{cc.attrs.managedBean.navigationMenuModel.menuOptions}" var="option" id="repeat" rowKeyVar="index">
                <a4j:commandButton action="#{controllerBean.action.menuSelect(option.viewId)}" value="#{index +1} - #{option.label}" 
                    render="@form" type="button" styleClass="btn-keuze-ok" id="popupChoice" 
                    oncomplete="#{rich:component('navPopup')}.hide(); return false;" onkeypress="return submitByEnter(event)" 
                    immediate="true"/>
                <rich:hotKey enabledInInput="true" key="#{index +1}" onkeyup="focusPopupChoice(#{index +1});" preventDefault="true"/>
            </a4j:repeat>
        </rich:panel>
    </rich:popupPanel>
    ...
</h:form>

This works great. I get the alerts when pressing 1-3. Problem: i also get the alerts when the popup is not visible.

So i found the Selecter option. So i added the selection

<rich:hotKey enabledInInput="true" selector="#navPopup" key="#{index +1}" onkeyup="focusPopupChoice(#{index +1});" preventDefault="true"/>

Now it didnt work anymore. The only moment the hotkey's now worked are when a selection button is already focused/selected. When i click anywhere on the page (except a button) the hotkeys dont work anymore.

I also tried to put selector="#contentForm", same effect.

Mainquestion: How can i make the hotkey work, only when the popuppanel is shown.

SubQuestion: The main page has also hotkeys, that i want to be disabled when a popuppanel is shown. according to me this should also be possible with a selector, correct me if i'm wrong.

Thanks in advance!

Answer 1

It's not working because the hotKey (specifically the keyup and keydown events) can only work on elements that are focusable. The panel doesn't know you're pressing buttons "on" it if it's not focused.

Keep the hotKey global, when you're processing the event you can check if the popupPanel is shown or not (property shown of the JS object).