Why does tabbing to a DojoX grid result in a JavaScript "Can't move focus to control" error?

Question

Problem
I've got a number of Dojo components on a page. When the user tries to tab from an input like component to a grid like component, I get a JavaScript "Can't move focus to control" error. The user base uses IE6.

Solution
The first element in the DojoX Grid layout cannot be hidden. If it is hidden, you get a a JavaScript "Can't move focus to control" error. To fix this, I added a row # that displays. See below.

  var gridLayout = [
    new dojox.grid.cells.RowIndex({ name: "row #", 
                                    width: 2, 
                                    styles: "text-align: right;"
                                 }),
    {
      field: "ele_id",
      name: "Element ID",
      styles: "text-align:right;",
      width:5,
      hidden:"true"           
    },
    {
      field: "ele_nm",
      name: "Element Name",
      styles: "text-align:left;",
      width:8          
    }
  ];

Answer 1

You have to handle the keydown event and listen for character 9 (which is the tab character). To invalidate the event you simply return false when the user presses character 9.

function handleKeyDown(e)

{

var keynum;

var keychar;

var numcheck;

if(window.event) // IE

{

keynum = e.keyCode;

}

else if(e.which) // Netscape/Firefox/Opera

{

keynum = e.which;

}

return keynum != 9; ` }`

Answer 2

<input name="z" onfocus="this.blur()"/>

Answer 3

I would personally think this type of behavior is a bit annoying. Why are you prohibiting the user from focusing on that field?

A better solution would be to hide/disable the field until it is ready to have data entered into it. You should also have some text to explain why the field is disabled.

Edit: The error message you posted has some results on google, but it seems like it could be any number of issues, this one http://www.francoisfaubert.com/2008/03/06/cant-move-focus-to-control/ sounds like it could be a possibility. Check your HTML to see if there are other controls with the same ID on the page.

Answer 4

You can set Input-Z as a disabled control. Then, when the user tabs into Input-Y and fill it, change Input-Z to enabled. How can you do it:

<input id="Input-x" type="text" />
<input id="Input-y" type="text" onChange="document.getElementById('Input_Z').removeAttribute('disabled');" />
<input id="Input-z" type="text" disabled />

Answer 5

Preventing tabbing may disrupt partially sighted users who are browsing your site using a screenreader.

Answer 6

If input Y doesn't accept user input, then don't make it an input field!

If you're just using this for value display, use a styled <span> or <div> instead.

Answer 7

Give the component element a tabindex attribute with the value -1

Answer 8

After your comments clarifying the issue, I understand you need that user can't focus an element with tab key. Try to add to the element:

tabindex="-1"

by example:

<div id="mygrid" tabindex="-1"> <!-- Some stuff here --> </div>

More information about negative tabindexes: introduction-to-wai-aria

Edit: More information about ARIA: http://www.w3.org/WAI/intro/aria

Answer 9

Regarding the error message: From Fake's tank:

"odds are you have conflicting ids in your document. Also, remember IE 7 and the previous versions are alone to think a name attribute should be treated like an id."

So, firstly, this is an IE-specific bug. Secondly, go change your ids. It appears to be something that afflicted some HP html-based software before, and appeared when the users upgraded from IE6 to IE7.

Regarding the question about disabling focus - just hide any inputs that are unwanted with type=hidden in the tag, and they will cease to be a problem. Never mess about with people's tabbing - it's the one thing that has improved with html over Windows apps.

Morals of the tale:

• Do It Properly
• Microsoft Is Crap At Web Stuff
• Don't Mess With Standard GUI Behaviour

Answer 10

Solution
The first element in the DojoX Grid layout cannot be hidden. If it is hidden, you get a a JavaScript "Can't move focus to control" error. To fix this, I added a row # that displays. See below.

  var gridLayout = [
    new dojox.grid.cells.RowIndex({ name: "row #", 
                                    width: 2, 
                                    styles: "text-align: right;"
                                 }),
    {
      field: "ele_id",
      name: "Element ID",
      styles: "text-align:right;",
      width:5,
      hidden:"true"           
    },
    {
      field: "ele_nm",
      name: "Element Name",
      styles: "text-align:left;",
      width:8          
    }
  ];