How to implement keyboard navigation in Menus?

[pallen]

How does one implement alt key and control key shortcuts within menus, in the typical style of underlined characters in the menu button label and control key shortcuts to menu actions?

[Isomorphic]

Hi pallen,
Menu items support a keys attribute which may be set to a keyName (a string like "A" or "Space"), or a key identifier (an object of the format {keyName:"N", ctrlKey:true})
Having set a 'keys' value for the menu item, selecting that keycombo, even if the menu is not showing, will trip the standard click handling behavior for the key.

Note that you should return false from the 'click' handler on your menu item to suppress the native browser behavior when these keys are pressed.


In terms of using Alt+keyName to access the menus:
We would normally suggest achieving this by setting the accessKey property on the menu button.
This means that when the user hits Alt+Keyname, or in Mozilla Shift+Alt+KeyName, keyboard focus will go to the menu button, so the user can hit the Enter or Down-Arrow key to show the menu.

Hilighting the AccessKey character on the menu button will be implemented by default in the 5.7 build, but in 5.6, for MenuButtons you will need to set a title that underlines the character in question yourself. You can use simple HTML to achieve this, such as enclosing the character in question with <u>..</u> tags.

[pallen]

Browser still triggering default action

I'm using

click: "customerLookup.show(); return false;"

on the menu item and the browser is still doing the default
action. Am I missing something obvious here?

[Isomorphic]

Hi pallen,

A couple of corrections to the previous post:

- fundamentally there are some key-combinations with native behaviors that can't be suppressed in all browsers. This is due to limitations in what events are available to JavaScript code.
Ctrl+N and Ctrl+O are examples of this - in Mozilla/Firefox browsers they can be cancelled, but not in Internet Explorer.
In fact there's a fairly strong argument against overriding these key combinations in any case, since an experienced user is somewhat likely to attempt to use them to (for example) pop a new browser window, and may be surprised by tripping a behavior within the application instead.

How you workaround this in your application is a design issue - one possible approach is to use Ctrl+Shift rather than just Ctrl as a modifier for menu shortcuts (for example setting the keys property to {ctrlKey:true, shiftKey:true, keyName:"N"})

- returning false from the item click handler is not actually required to suppress the native behavior (where this is possible) in the 5.6 build.

Sorry for any confusion caused by the previous post - let us know if the "Ctrl+Shift+N" shortcut key approach won't work for you.

Thanks
Isomorphic Software