Liste déroulante avec JQuery [bug Firefox]

Bonjour à tous,

Après de nombreuses recherches infructueuses, je me décide enfin a exposer mon problème.
Dans le cadre de mon travail je suis amené à surchargé certains éléments des formulaires afin d’améliorer le design. Or cela ne fonctionne pas pour tous les navigateurs :

Firefox me rend la tâche difficile.

Je sais que surcharger des éléments du navigateur pour les remplacer par d’autres n’est pas très propre, mais je n’ai pas vraiment le choix ^^

L’élément qui me pose problème est la liste déroulante (dropdown list). J’ai fait en sorte que lors de l’utilisation d’une liste déroulante faite avec JQuery, les actions effectuées se répercutent sur la liste original (select input) qui sera masquée par la suite afin de laisser la place à la nouvelle liste. Par contre une suite d’évènements ne se déroule pas comme prévu.

Quand la souris est utilisée sur la liste déroulante, le clique sélectionne bien la valeur dans la liste en JQuery et dans la liste déroulante originale, même chose pour l’utilisation du clavier, aucun soucis. Par contre quand je clique pour sélectionner une valeur, que je lâche le focus, et que je reviens dessus, le curseur retourne en tête de liste au lieu de commencer par la dernière valeur sélectionné.

J’aimerais donc savoir si par le plus grand des hasards, il n’y aurait pas une solution qui me permette de corriger ce bug quelque peu fâcheux.

Pour mieux comprendre l’exemple et pour palier au fait que j’explique très mal (^^), j’ai isolé le problème avec JSFiddle, je vous laisse vous rendre compte du problème :

http://jsfiddle.net/Cyck/vtr2N/ (Bug sous Firefox)

Merci d’avance pour votre aide.

Je n'ai pas vu de bug particulier ...
Je n'ai peut être pas compris la manip du "laché de focus" ...

:lol: "laché de focus" : la chasse aux faux culs est ouverte?
SInon, j'ai testé ton code dans tous les sens et cela semble correct; une fois seulement, j'ai obtenu une différence entre les deux valeurs affichées. Mais impossible de le reproduire :calim2:

Bonsoir

Je vois le problème, juste un petit souci lors du survol (avec ou sans perte de focus) du "replicat" qui est résolu en ajoutant :
Code:

1 2 3 4 link.mouseenter( function( e ){ link.removeClass('selected'); $( e.target ).addClass('selected'); });
J'ai fait avec le code existant, j'ai eu beaucoup de peine à comprendre votre manière de coder, mais je manque de temps pour reprendre la totalité.