Opened 2 years ago

Last modified 18 months ago

#18983 assigned defect

Mouse click activating DropDownButton: unable to use arrow keys for navigation

Reported by: Earl Hood Owned by: dylan
Priority: high Milestone: 1.14
Component: Dijit Version: 1.12.1
Keywords: Cc:
Blocked By: Blocking:


When using a mouse click a DropDownButton? that has a Menu associated with it, one cannot use the arrow keys to highlight the menu items.

After some analysis, I noticed this changed occurred for Dojo 1.9 (and later releases), and appears to be backported to a version of 1.8 (1.8.10 has same behavior as later releases). Using 1.7.5, the better (IMO) behavior occurs where one can use the arrow keys as keyboard focus is switched to the menu raised.

Examing the source, it appears the changes for ticket #11800,

is the culprit behind the behavior change.

Comparing with traditional applications, the behavior in 1.7 (and earlier) is consistent: regardless if menu was raised by a mouse click or a keyboard event, the keyboard can be used to navigate menu items. The newer behavior is not consistent with common practice.

Looking at the description of for #11800, I think the solution adopted goes contrary to behavior intent. First line of #11800 description:

If you right click on a page in Firefox, you get a context menu where no item is highlighted. The arrow keys still work; hitting down arrow hightlights the first item...

Note that, "arrow keys still work." With the code changes, they no longer do so. I think the original submitter was not asking for arrow key selection to no longer work, just that there is no initial item highlight.

Another related behavior change that occured between 1.8.x and 1.9.x is arrow key navigation does not work in 1.9 and later even if you hover mouse over a menu item. In versions 1.8 and prior, click to popup/dropdown menu, move mouse over first item. You can then use arrow keys move highlight to other menu items. In 1.9, this is no longer the case.

I have not been able to find the specific code changes between 1.8 and 1.9 that lead to this behavioral change.

This change a behavior goes contrary to normal GUI based applications. For example, in native GUI apps, arrow-key-based higlighting of a menu item will always work, regardless of how the menu was raised or how a menu item was highlighted (e.g. mouse hover).

The following messages to the mailing list were posted months ago regarding this issue, but no responses received:

Change History (3)

comment:1 Changed 2 years ago by bill

Agreed, it's an (unintended) side effect of #11800. DropDownButton? (or probably the base class _HasDropDown) already has a listener for the down arrow key to focus the dropdown, but for some reason it's not working after clicking to open the dropdown. Perhaps because the dropdown is already open.

comment:2 Changed 2 years ago by dylan

Milestone: tbd1.12.3
Owner: set to dylan
Priority: undecidedhigh
Status: newassigned

comment:3 Changed 18 months ago by dylan

Note: See TracTickets for help on using tickets.