jQuery <select> .blur

[The Letter E]

Hey Everyone,

 

I thought this would be a simple blur call, but it seems to have some unexpected behavior. So, we have a select box with a blur event, but the blur event fires only if you select an option from the list. Problem, if you click the <select> then click outside the list that pops up (making it dissappear) the select box stays focused...right? right. so, my question is, what's that event?? The event when you click away from the select list without actually blurring the <select>.

 

Any help is appreciated.

 

Thank You,

 

E

[Adam]

There is no such event. Select menus have always been a little unpredictable though, and new JS specs haven't really helped in this particular area. You just have to work around it. This would be pretty simple to implement though.

 

Basically as the select is clicked, attach a new, separate click event to the document that waits for the next click event to bubble up. When that click event is received, check the origin element wasn't the select itself, and if not trigger your blur event.

 

Just be sure to remove the click event from the document when that click is received, or if the normal blur event is triggered. Quick tip by the way! Given you're using jQuery, you can namespace events for easier removal:

 

$(document).on('click.select', function(event) { .. });

 

Then remove it with:

 

$(document).off('click.select');