IE6 bug using blur and focus on form events

While developping SelectOverflow (a Mootools plugin for long selects), IE6 fired the blur event when I said focus(). Here's how I circumvented the bug.

While developping SelectOverflow (a Mootools plugin for long selects), IE6 fired the blur event when I said focus(). Here’s how I circumvented the bug.

Setup

When the user focuses on a text input, the hidden select is shown and focused. When the select is blurred, it is hidden.

Bad IE6 behaviour

The first time the text input was clicked, the select didn’t show up. What was weird, adding alert() in the code that displays the select solved the bug… Anyway, after some testing I found out that when IE6 encountered select.focus(), it fired the blur event instead, but only the first time.

Fixing it

Just before calling select.focus(), I call input.focus(). This shouldn’t have any unwanted effect because the input is already focused at that time, and doing this prevents IE6 from firing select.blur instead of select.focus.

Publié le 27 juillet 2009

Commentaires

SySwatis,le 02 juin 2010

Great !!! the best fix i've found all over the web ! Thanks

Phil,le 17 août 2010

Aprés diverses recherches sur le net, j'ai pris le temps de lire votre conseil.

Résultat, j'ai résolu mon bug de focus() sous IE.

Extrait du code :
// confirmer focus avant de retirer
element = document.getElementById("buttonEffacer");
element.focus();
// enlever focus du button
focusHidden() // passer le focus à un Iinput de type hidden;

Un grand Merci..

Goulvenle 31 août 2010

Je suis heureux que cela vous soit utile, et merci d'avoir pris le temps de le dire ici.