I've created a simple custom dropdown list using html UL and INPUT text.
Dropdown require a service from mouse and keyboard. To show list we have to click at button or press 'down' (↓) button at keyboard. Then by clicking at value it should show up in input element. It almost work properly but I found few problem.
First: When clicked at button that show list I have to set focus at his input because i binded keyboard service to input field. But If input is focused and i click at element from a list it set value in input once per few clicks.
Second: Keyboard servie works good. It always set a good value into input. Problem is with 'Esc' button. I binded esc to hide my list. But when i use it it also change current value to previous or delete it.
In first problem i was trying to prevent focus out, blur event from input. But when o click at list it always lose focus.
Second problem i was trying just using prevenftDefault() at pressing 'Esc' but it also didn't help.
Here's my code(it's not perfect because i couldn't copy too much content from my site)
Here is my fiddle
EDIT: Using Firefox debuger it shows me that sometimes click event on LI element dont even trigger. With Esc button...it works in chrome good but problem is still wit firefox.
EDIT(2): Another news. Problems is that i bind event on hidden elements. Searching for solution.
EDIT(3): Or maybe its not problem with hidden elements. My mouseover event works good with changing class, but click fails. And it fails because input element that has to receive value from click is focused.
EDIT(4): I found problem. In click event handler i set input value of clicked element and i close list. But i added 1 more event that close the list, it close list when input lose focus() and by clicking at list it lose focus. In this way closing element is doubling. And problem is that blur event is trigerring (and closing list ) before click event.
