Opened 6 years ago
Last modified 3 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:
- Use the code given at http://dojotoolkit.org/reference-guide/1.8/dijit/Tree.html#context-menu
- Give to browser with mime-type application/xhtml+xml
- Right click on tree to open menu
- Either press "Tab", or left click away from tree
- Menu stays open
Expected Result
- 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
comment:2 Changed 6 years ago by
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
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).
comment:4 Changed 6 years ago by
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
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 3 years ago by
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.
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...