The ContextMenu widget supports navigating from one item to another using the up/down arrow keys. If an item is focused, it receives the "k-state-focused" class and highlights the item visually. However, as soon as this or any other item is hovered, all focus classes are removed and therefore the highlight disappears. When pressing the arrow keys again, it reappears again, but the focus always starts moving from the hovered item instead of the most recently focused item.
This behavior can be reproduced in the following DOJO: https://dojo.telerik.com/ACIpeYIm
Unfortunately, we currently don't really see any way to fix this without directly modifying Kendo code or rebuilding the entire keyboard navigation ourselves, because the contextMenu keyboard navigation does not seem to set the DOM focus at all, but works with CSS-classes only.
Do you have any suggestions?
Hello Michael,
Thank you for reaching out.
However, the described behavior is intended. By design, it is not expected to have two active elements (focused and hovered) at the same time. This could be an issue if the user decides to select an item by pressing Enter, for example. The behavior of the contextMenu in the Chrome browser is similar.
When testing I noticed that actually, it is possible to have hovered and focused elements at the same time if for example the user opens the ContextMenu and does not move the cursor (screencast). Thus I opened a new Bug Report on your behalf and below you will find a link to the item.
- https://feedback.telerik.com/kendo-jquery-ui/1563517-contextmenu-keyboard-focus-disappears-on-hover
Your Telerik points are updated accordingly referencing the issue linked above.
Let me know in case you have any other questions on the matter.
Regards,
Neli
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.