Question

I implemented a custom drop down with HTML, CSS and JavaScript. It works well now, but I am not happy with the way I am doing “blurring” right now. When you open the list, and then click somewhere else, it should collapse. What I did was that I added an event listener (mousedown) to the window after expanding the list, and removing the listener after collapsing. The event basically checks whether the DOM event happened on the right element using target and if not, then blur the drop down control.

I know about focus and blur. However, they only seem to work on form elements, which I find quite understandable. They also support other scenarios like when “tabbing” away.

Anyway, I am asking you if there is a better way of doing what I am doing right now. What I do just feels stupid.

Answer 1

Maybe you could have a dummy input and focus that when the control is active. Then watch the blur and close the list. It would not be able to be display:none but maybe opacity:0, or just out-of-view.