This might be old news for some, but I had never encountered this particular IE bug before. It's such a good example of what is utterly wrong with Microsoft and the quality of their product that I had to write it up. If you ever hear someone say, "Oh, IE's not that bad" then please send them a link to this post. This is the kind of bug that is ridiculous to deal with as a developer. We spend way too much time hunting down these bugs. It's not even behaving like their own documentation says it should.

So here's the situation: you want to use tabindex to skip over a radio button. In IE, only checked radio buttons are focusable anyway, so here's a test case showing a few radio buttons all checked without any tabindex set, except for the middle one that's set to -1, which should make your tabbing skip over it. Just click on the first one and you can use tab and shift-tab to navigate back and forth along them:

  • no tabindex set
  • tabindex=-1, should be skipped
  • no tabindex set

Notice how using -1 doesn't actually skip over that radio (if you're using IE9). That's surprising, because it seems to work for every other element type, so why should radios be any different? Searching around will yield some results that tell you that setting the tabindex to -40000 will fix this problem.

Oh, of course. Obviously. -40000. Why didn't I try that first?

This is the part where I take an ax to the mannequin I have with the IE logo pasted to its face. It is so incredibly frustrating to deal with quirks like this that every once in a while you just have to let out your rage by chopping some heads off.

I couldn't just let that answer fly though. After some investigation, I figured out that the actual number this starts working at is -32769. -32768? No go. But -32769 and anything below that works. Wait. 32768 looks vaguely familiar...oh, it's 2^15. So obviously that's Microsoft's limit for the memory assigned to the tabindexes integer (this is actually mentioned in the documentation linked to above), and we're now able to skip the radio because it's out of that range. But it doesn't explain why -1 doesn't work in the first place. At least the mystery of -40000 has been solved - it's just the next nice round number. To conclude, here are some fun radios showcasing these numbers and this bug:

  • tabindex=0, normal page flow
  • tabindex=-1, should be skipped
  • tabindex=-32768, should also be skipped
  • tabindex=-32769, actually skipped
  • tabindex=-40000, also skipped
  • tabindex=0, normal flow again

Dear Microsoft, this bug is in IE9, the current release of the browser right now in 2012. Not IE6, so you can't claim it was made a decade ago and you didn't know what you were doing. Shame, shame on you.

Comments

says

Awesome find!! Thank you so much!

says

Thanks for the blog entry!
Would have had trouble finding that Bug without your article.
It's a shame that Microsoft still hasn't fixed it...well, at least there is a workaround.