loopj/jquery-tokeninput — Issue #258: In IE, tokeninput loses focus when navigating between tokens
Author: ryguasu
Created: 2012-01-24 20:08:04+00:00
State: open

This seems to affect all versions of Internet Explorer (i.e. IE6-IE9).

There are a few different scenarios that can cause tokeninput to lose focus when navigating between tokens using the arrow keys. This makes using keyboard navigation inside the tokeninput control mostly useless in IE.

Here's the easiest way to reproduce (it's not 100% deterministic, but it works most of the time). Same behavior shows up if I look at the demo.html page, or if I try to instantiate tokeninput on my own test page:

1. Click to focus the tokeninput area. ("Type in a search Term" message appears.)
2. Add a new token (by typing a few characters, using up/down arrows to go to the menu item of your choice, and pressing enter on one of the suggested items).
3. Press left-arrow. (The first token highlights.)
4. Press left-arrow again. (Now tokeninput has lost focus. In particular: You can see, visually, that the tokeninput's text input area has been moved to its proper position, before the first token. However, the text input area does *not* have browser focus, nor does the "Type in a search Term" message appear.)

I've mostly been using the Facebook theme, if that's relevant.

This seems to be caused by a bug/quirk in how IE handles requests to focus DOM elements. (Perhaps especially newly created / recently unhidden DOM elements??) I have a patch that fixes it, which I'll submit shortly.

Potentially related to issues #67 and #186, though I'm not sure.