Blur() event not firing in webkit browsers for select form

Question

I have a simple <select> element that has several <option> elements within:

<select id="dollarAmount">
    <option>select dollar amount</option>
    <option>$5</option>
    <option>$10</option>
    <option>$15</option>
    <option>$20</option>
</select>

This <select> form is only shown when the user mouses over another element on the page:

$("#parentDiv").mouseenter(function(){  
    $("#selectFormDiv").show();  //dollarAmount contained in this div
});

Upon triggering the mouseleave event on the parentDiv, I make sure the form is blurred so that the options do not remain expanded. Once it is blurred, I can safely hide the containing <div id="selectFormDiv"> so that the form and its container properly hide.

$("#parentDiv").mouseleave(function(){  
    $("#dollarAmount").blur();
    $("#selectFormDiv").hide();
});

My issue is: this works in IE8 and Firefox 5.1, but does not in Chrome 12.0 or Safari 5.1. I've detected if the browser is a webkit and used different commands to test, and it just seems that blur() does not cause a <select> form to collapse (correct term? Attempting to hide the options that were dropped down). The above code does not hide the options if they were expanded upon leaving the parentDiv. Triggering the hide() event on the form does hide the options in Chrome (still no luck in Opera), but of course also causes the entire form to hide:

$("#parentDiv").mouseleave(function(){
    if($.browser.webkit) {
        $("#dollarAmount").hide();
        $("#selectFormDiv").hide();
    }
    else {
        $("#dollarAmount").blur();     //blur only triggers for non webkits?
        $("#selectFormDiv").hide();
    }
});

I've tried several other events/methods, including triggering document.mouseup upon mouseleave to trigger a blur(). I've attempted to use focusout, change, and click events to collapse the select form, but with no success.

Is there any way to hide a <select> form's <option>s in webkit browsers through an event call?

Edit: For clarity, the actual blur() event does seem to be triggering. I have the dollarAmount form listening for onblur just to print to the console. The console print does execute, but the form is just not collapsed as it is in non webkit browsers when blur() is called.

Here's a fiddle to elaborate on the problem: http://jsfiddle.net/JpWLb/4/ On non webkit browser: Click the <select> element, but do not hover over any <option>s once they roll out. With the options still expanded, mouse out of the containing div. In firefox and IE, the resulting $("#mySelect").blur() call causes the options to retract (yay!). However, on webkit browsers, blurring the expanded <select> element seems to do nothing: the options remain expanded. My desired outcome is for all the browsers to hide the expanded options upon mousing out of the containing div.

Answer 1

I don't think this is possible. It appears that when the select element is activated in webkit, the DOM doesn't recognize any mouse events other than a click. So the problem isn't that your blur() method isn't firing. The problem is that the mouseleave() method isn't firing!

See this fiddle: http://jsfiddle.net/JpWLb/

Open your console. When you move your mouse around, it will constantly get fed the string "ok". But as soon as you click on the select element, those console logs will cease.