Opened 6 years ago

Last modified 4 years ago

#17788 new defect

[patch] dijit/Menu not focusing on active with xhtml+xml

Reported by: Inarus Owned by:
Priority: undecided Milestone: 1.15
Component: Dijit Version: 1.9.3
Keywords: Cc:
Blocked By: Blocking:

Description

Odd bug, I have no idea why just yet, though I shall do some further research.

Steps to reproduce:

  1. Use the code given at http://dojotoolkit.org/reference-guide/1.8/dijit/Tree.html#context-menu
  2. Give to browser with mime-type application/xhtml+xml
  3. Right click on tree to open menu
  4. Either press "Tab", or left click away from tree
  5. Menu stays open

Expected Result

  1. Menu closes

Interestingly, if I then right click on the context-menu to bring (brings up the browser menu), then the menu does gain focus, i.e. closing the browser-menu and then performing step 4. gives the expected result.

At my current level of investigation, I have found that the tree gains the type of focus that the menu should have upon opening the menu, i.e. the tree does focus events through _CssStateMixin.js when I move the mouse over, when the tree should stay silent (in the non xhtml-case) and the menu fires these events instead.

Change History (6)

comment:1 Changed 6 years ago by Inarus

Okay, I have narrowed down the bug to somewhere between focus() getting called on MenuItem? and the event, and the event surfacing with the function fih getting called in focus.js.

I don't yet know where or why this event gets lost, but somehow it does...

comment:2 Changed 6 years ago by Inarus

Okay, patch time!

First the explanation of the bug. From what I have read, xhtml gives elements an "inert"ness, i.e. objects that don't have user interaction don't do anything, and therefore cannot become focused. Dojo uses some trickery to emulate focussing on non-focusable elements, to create text based virtual elements (see ​http://www.w3.org/html/wg/drafts/html/master/single-page.html#inert-subtrees)

Anyway, the fix, I have just done some quick tests (using firefox), and it seems to work, both in normal and xhtml mode, and the answer lies in the problem, as we emulate focusing, we also have to emulate the focus event.

In dijit/MenuItem.js:

Change 

	"./_CssStateMixin",
	"dojo/text!./templates/MenuItem.html"
   ], function(declare, dom, domAttr, domClass, kernel, has, lang,
			_Widget, _TemplatedMixin, _Contained, _CssStateMixin, template){

to 

	"dojo/text!./templates/MenuItem.html",
	"dojo/on"
], function(declare, dom, domAttr, domClass, kernel, has, lang,
			_Widget, _TemplatedMixin, _Contained, _CssStateMixin, template, on){

and 

this.focusNode.focus();

to 

on.emit(this.focusNode, "focus", {
    bubbles: true,
    cancelable: true
  });

comment:3 Changed 6 years ago by leaod

This looks like the same problem as described here: ​https://bugs.dojotoolkit.org/ticket/17262, although XHTML might be the distinguishing factor here.

I'm having the exact same problem on IE10 and dojo 1.9.2. The page in question has the following DOCTYPE header:

<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

It's executing using "Standards" document mode.

I tried the proposed fix, but it did not resolve the issue for me.

I also tried the theme tester pages, as suggested in the related issue, and could reproduce the issue in both (right click on an empty area, a context menu shows up, and then it doesn't dismiss when clicking again on an empty area).

Last edited 6 years ago by leaod (previous) (diff)

comment:4 Changed 6 years ago by bill

Hmm, well I think we still need the 

this.focusNode.focus();

to actually focus the node, so that screen readers, tabbing etc. keep working, at least in normal HTML mode.

As for adding: 

on.emit(this.focusNode, "focus", { ...

It's a bit scary because it means that in normal HTML mode two focus events will bubble.

Also, there are many many places in dijit that focus <span> and <div> nodes. It's strange to just change Menu.

comment:5 Changed 4 years ago by dylan

Milestone: tbd → 1.12
Summary: dijit/Menu not focusing on active with xhtml+xml → [patch] dijit/Menu not focusing on active with xhtml+xml

Will consider for 1.12.

comment:6 Changed 4 years ago by dylan

Milestone: 1.13 → 1.15

Ticket planning... move current 1.13 tickets out to 1.15 to make it easier to move tickets into the 1.13 milestone.

Note: See TracTickets for help on using tickets.