Why is Firefox setting focus to this div html element?
In our JavaScript app, Firefox is setting focus to this div element for no discernible reason:
<div class="dijitContentPane dijitBorderContainerNoGutter-child dijitBorderContainerNoGutter-dijitContentPane dijitBorderContainerNoGutterPane dijitAlignCenter" id="dijit_layout_ContentPane_79" style="border: medium none; height: 415px; padding: 0px; left: 0px; top: 0px; position: absolute; width: 939px;" widgetid="dijit_layout_ContentPane_79">
When I use the tab key, Firefox stops on the expected buttons and input fields, all of which contain tabindex="0" attributes. But it also stops at a point between the buttons and input fields where there is no control and no displayed cursor. I displayed document.activeElement from Firebug to identify this div element.
IE, Safari, and Chrome do not stop on it.
The problem occurs on many machines and with all Firefox versions we have tried, including 17.0, ESR 24.2.0, 28.0, and 29.0.
Can anyone explain why Firefox is stopping on this element and how to prevent it?
Here's the div element with its contents:
<div class="dijitContentPane dijitBorderContainerNoGutter-child dijitBorderContainerNoGutter-dijitContentPane dijitBorderContainerNoGutterPane dijitAlignCenter" id="dijit_layout_ContentPane_79" style="border: medium none; height: 415px; padding: 0px; left: 0px; top: 0px; position: absolute; width: 939px;" widgetid="dijit_layout_ContentPane_79"><div class="dijitLayoutContainer dijitContainer dijitTableLayout" id="dojox_layout_TableContainer_3" style="border: medium none; padding-bottom: 5px;" widgetid="dojox_layout_TableContainer_3"><table width="100%" cellspacing="0" class="tableContainer-table tableContainer-table-horiz formStep-table formStep-table-horiz"><tbody><tr><td class="tableContainer-valueCell formStep-valueCell formStep-valueCell-0"><div class="dijitContentPane" id="dijit_layout_ContentPane_77" style="padding-bottom: 5px;" widgetid="dijit_layout_ContentPane_77"><span tabindex="0" style="outline: none; font-size: 9pt; font-weight: bold; color: #105CB6;" id="_00000000-0000-0000-0000-000000000000-0_pe_newEventLog_focus">Specify New Event Log</span></div></td></tr><tr><td class="tableContainer-valueCell formStep-valueCell formStep-valueCell-1"><div class="dijitContentPane" id="dijit_layout_ContentPane_78" style="padding-bottom: 5px;" widgetid="dijit_layout_ContentPane_78"><span tabindex="0" style="outline: none;">New work queue</span></div></td></tr></tbody></table></div><div class="dijitContentPane dijitContentPaneSingleChild" id="dijit_layout_ContentPane_95" style="width: 100%; height: 100%;" widgetid="dijit_layout_ContentPane_95"><div class="dijitBorderContainer dijitContainer dijitLayoutContainer" id="dijit_layout_BorderContainer_5" style="border: 5px none; height: 399px; width: 923px; padding: 0px;" widgetid="dijit_layout_BorderContainer_5"><div class="dijitContentPane dijitBorderContainer-child dijitBorderContainer-dijitContentPane dijitBorderContainerPane dijitAlignTop" id="dijit_layout_ContentPane_80" style="border: medium none; height: auto; padding: 3px; left: 5px; top: 5px; position: absolute; width: 907px;" widgetid="dijit_layout_ContentPane_80"></div><div role="presentation" class="dijitGutter dijitGutterH dijitAlignTop" id="dijit_layout_ContentPane_80_splitter" widgetid="dijit_layout_ContentPane_80_splitter" style="left: 5px; top: 11px; position: absolute; width: 913px;"></div><div class="dijitContentPane dijitBorderContainer-child dijitBorderContainer-dijitContentPane dijitBorderContainerPane dijitAlignCenter" id="dijit_layout_ContentPane_81" style="border: medium none; height: 378px; padding: 0px; left: 5px; top: 16px; position: absolute; width: 913px;" widgetid="dijit_layout_ContentPane_81"><div class="dijitContentPane dijitContentPaneSingleChild" id="dijit_layout_ContentPane_82" style="border: medium none; height: auto; padding: 0px;" widgetid="dijit_layout_ContentPane_82"><div class="dijitLayoutContainer dijitContainer dijitTableLayout" id="dojox_layout_TableContainer_4" style="border: medium none;" widgetid="dojox_layout_TableContainer_4"><table width="100%" cellspacing="0" class="tableContainer-table tableContainer-table-horiz propFieldTab-table propFieldTab-table-horiz"><tbody><tr><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-0"><div class="dijitContentPane" id="dijit_layout_ContentPane_83" style="border: medium none; text-align: center; padding-top: 3px; padding-bottom: 3px;" widgetid="dijit_layout_ContentPane_83"><span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: xx-small; font-weight: normal; color: #FF0000">*</span></div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-1"><div class="dijitContentPane" id="dijit_layout_ContentPane_84" style="width: 15em; border: medium none; padding-top: 3px; padding-bottom: 3px;" widgetid="dijit_layout_ContentPane_84"><label for="PE_General_Name_00000000-0000-0000-0000-000000000000-0">Name: </label></div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-2"><div role="presentation" id="widget_PE_General_Name_00000000-0000-0000-0000-000000000000-0" class="dijit dijitReset dijitInline dijitLeft dijitTextBox dijitValidationTextBox" style="width: 31em;" widgetid="PE_General_Name_00000000-0000-0000-0000-000000000000-0"><div class="dijitReset dijitValidationContainer"><input type="text" role="presentation" readonly="readonly" tabindex="-1" value="? " class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner"></div><div class="dijitReset dijitInputField dijitInputContainer"><input type="text" autocomplete="off" data-dojo-attach-point="textbox,focusNode" class="dijitReset dijitInputInner" tabindex="0" aria-invalid="false" id="PE_General_Name_00000000-0000-0000-0000-000000000000-0" aria-disabled="false" aria-required="true" value=""></div></div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-3"><div class="dijitContentPane" id="UNIT_PE_General_Name_00000000-0000-0000-0000-000000000000-0" style="border: medium none; padding: 3px;" widgetid="UNIT_PE_General_Name_00000000-0000-0000-0000-000000000000-0"></div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-4"><div class="dijitContentPane" id="dijit_layout_ContentPane_85" style="border: medium none;" widgetid="dijit_layout_ContentPane_85"> </div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-5"><div class="dijitContentPane" id="dijit_layout_ContentPane_86" style="border: medium none;" widgetid="dijit_layout_ContentPane_86"> </div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-6"><div class="dijitContentPane" id="dijit_layout_ContentPane_87" style="border: medium none;" widgetid="dijit_layout_ContentPane_87"> </div></td></tr><tr><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-7"><div class="dijitContentPane" id="dijit_layout_ContentPane_88" style="border: medium none; text-align: center; padding-top: 3px; padding-bottom: 3px;" widgetid="dijit_layout_ContentPane_88"> </div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-8"><div class="dijitContentPane" id="dijit_layout_ContentPane_89" style="width: 15em; border: medium none; padding-top: 3px; padding-bottom: 3px;" widgetid="dijit_layout_ContentPane_89"><label for="PE_General_Desc_00000000-0000-0000-0000-000000000000-0">Description: </label></div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-9"><textarea autocomplete="off" data-dojo-attach-point="focusNode,containerNode,textbox" class="dijitTextBox dijitTextArea" tabindex="0" id="PE_General_Desc_00000000-0000-0000-0000-000000000000-0" style="overflow: auto; width: 30em; height: 15em; font: inherit; resize: none;" widgetid="PE_General_Desc_00000000-0000-0000-0000-000000000000-0" value=""></textarea></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-10"><div class="dijitContentPane" id="dijit_layout_ContentPane_90" style="border: medium none;" widgetid="dijit_layout_ContentPane_90"> </div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-11"><div class="dijitContentPane" id="dijit_layout_ContentPane_91" style="border: medium none;" widgetid="dijit_layout_ContentPane_91"> </div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-12"><div class="dijitContentPane" id="dijit_layout_ContentPane_92" style="border: medium none;" widgetid="dijit_layout_ContentPane_92"> </div></td><td class="tableContainer-valueCell propFieldTab-valueCell propFieldTab-valueCell-13"><div class="dijitContentPane" id="dijit_layout_ContentPane_93" style="border: medium none;" widgetid="dijit_layout_ContentPane_93"> </div></td></tr></tbody></table></div></div><div class="dijitContentPane" id="dijit_layout_ContentPane_94" style="border-style: none; padding-left: 1px; padding-top: 5px;" widgetid="dijit_layout_ContentPane_94"></div></div></div></div></div>
Modified by cor-el
All Replies (9)
Sorry, this wiki-based forum does not handle HTML well. Could you put it in Pastebin and post a link here?
Or if you have a running test case online, that would be easier.
I see that my html elements are not displaying correctly in my original post. Here's the div element that Firefox is focusing on:
<div class="dijitContentPane dijitBorderContainerNoGutter-child dijitBorderContainerNoGutter-dijitContentPane dijitBorderContainerNoGutterPane dijitAlignCenter" id="dijit_layout_ContentPane_79" style="border: medium none; height: 415px; padding: 0px; left: 0px; top: 0px; position: absolute; width: 939px;" widgetid="dijit_layout_ContentPane_79">
The div element with its contents it greater than 10,000 characters, so I can't post it.
I have not been able to reproduce this problem with a test case, but I'll keep trying. Here's the div element and contents: http://pastebin.com/SE5Nk7rJ
That div element contains numerous elements that have tabindex > -1. For example, these precede the form controls:
<span tabindex="0" style="outline: none; font-size: 9pt; font-weight: bold; color: #105CB6;" id="_00000000-0000-0000-0000-000000000000-0_pe_newEventLog_focus">Specify New Event Log</span>
<span tabindex="0" style="outline: none;">New work queue</span>
Are those the buttons you mentioned?
Are you saying that the outer container of the div itself is focused as you tab to or past those spans?
I have attached a screen shot. I used inspect.exe to display information about the active element, outlined by a yellow box. As you can see, the buttons are above the div that is highlighted in the screen shot. When I use the Tab key in that page, focus goes first to the Next button, then to the Cancel button; the active button is displayed with a dotted border to identify it. When I press Tab again, there is no cursor or highlighted control, nothing on the screen identifies the active element. Pressing Tab again takes me to the Name input field and then to the Description textarea; for both of these fields, a text-input cursor appears. When running inspect.exe and using the Tab key, a yellow box appears around the Next and Cancel buttons, the div element, the Name field, and the Description field, in that order.
I have pasted the html for the entire panel here: http://pastebin.com/dxcMteR1
In that paste, this is the div that gets focus:
<div class="dijitContentPane dijitBorderContainerNoGutter-child dijitBorderContainerNoGutter-dijitContentPane dijitBorderContainerNoGutterPane dijitAlignCenter" id="dijit_layout_ContentPane_141" style="border: medium none; height: 501px; padding: 0px; left: 0px; top: 0px; position: absolute; width: 1259px;" widgetid="dijit_layout_ContentPane_141">
Note that there are several hidden elements that have tabindex="0" attributes. Could these be confusing Firefox? There are seven occurrences of tabindex="0" in this paste. Of these seven, elements 1, 2, 6, and 7 are visible and elements 3, 4, and 5 are not visible. The non-visible elements are hidden buttons, etc.
I don't think that the tabindex="-1" attributes are causing the problem.
The two span elements with tabindex="0" that you identified in my first paste were caused by a bug, which I have fixed in the most recent paste. Previously, the Tab key stopped on those two labels. Firefox stops at the div element regardless of whether those two span elements have tabindex="0".
I haven't had a chance to play with the code, but I definitely would not set tabindex="0" on hidden elements. Is it an option to remove the tabindex attribute and only add it if/while those elements are displayed?
I used Firebug to set tabindex="-5" for those three hidden elements that previously had tabindex="0", but that didn't fix the problem. To validate this test, I did the same thing for the textarea element and that caused the Tab key to skip that element.
Remember that only FF has this problem. IE, Safari, and Chrome do not.
Is it possible to get a FF developer to look at this?
I can't replicate this by pasting your code into the body of an HTML document. Obviously there's something more to it, whether related to the larger document structure, scripts, or something else.
You can file a bug: https://bugzilla.mozilla.org/
However, I think you will need to provide a link to a test case or other public page that replicates the problem.
I didn't see a focus rectangle on that div, and it didn't come up on the list captured by this (at the end of the body):
<div id="debug">activeElement:</div>
<script type="text/javascript">
function report(e){
document.getElementById("debug").innerHTML += "<br>" + document.activeElement.nodeName + "#" + document.activeElement.id;
}
document.onkeyup = report;</script>