I have created a website, it has a dropdown menu. The downward arrow key navigates to the next item in the menu.
I have used rich:hotKey to handle the down arrow key event, it calls a method menuDown() which selects the next item in the menu.
On the page is a rich:extendedDataTable showing a list. The down arrow key can be used to navigate downward through the list (focus needs to be on the list though).
When currently pressing the down arrow key, both the dropdown menu and datatable respond: both navigate to the next item in the menu and list.
What I am trying to achieve, is when the dropdown menu is open/active, only the menu will respond to the key being pressed, but the datatable must not respond.
I have read many articles about the use of event.preventDefault() and event.stopPropagation() and returning false (which seems kind of forbidden) etc. but they do not seem to have any effect. Eventually I have used just about all of them with rich:hotKey like this:
But no luck. The menuDown() method makes sure the next item in the menu is selected, but annoying as it is, the datatable still keeps responding as well.
Am I not using the event methods correctly, or do they not apply to the rich:extendedDataTable element? Is there another way to achieve this?