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.

have you tried setting focus on an invisible element rather then blurring the current one? — Joseph Marikle, Jul 25 '11 at 18:59
Good ideas. I hadn't thought to do that. I attempted to focus() a few different objects (fake objects, other select forms on the page, and the document itself) but I was never able to get the focused select form to blur. — Jared Sheets, Jul 25 '11 at 19:13

score 2 · Answer 1 · answered Jul 25 '11 at 23:39

2

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.

answered Jul 25 '11 at 23:39

maxedison

17,243
14
67
114

Maxedison: Hmm, interesting. I haven't been able to look this over with the proper respect it deserves (currently not at my machine with my project on it). But I plan on thinking it through tomorrow morning and replying with some comments and possibly accepting answer. Many thanks :) – Jared Sheets Jul 26 '11 at 22:31
Maxedison: I've looked at that fiddle from Chrome, IE, Firefox, and Safari. Chrome and Safari both stop firing the 'mousemove' event when the mouse is inside the ` – Jared Sheets Jul 27 '11 at 13:13
Chrome & Safari are both webkit, so that explains their similar behavior. Given what I posted, I'm not sure why you say: "it seems like I should still be able to detect a mouseleave". As my fiddle shows, no mouse events are registering with the DOM at all it seems, other than a click. But I would love to see a solution... haven't had to worry about this problem yet myself, but I may someday :) – maxedison Jul 28 '11 at 11:10
I'm attempting to detect a mouseleave on a parent `
` that is containing the ` form. I've got a fiddle up now at the end of my original post that shows the setup I am using. The code doesn't run perfect on non-webkits (mousing over an
– Jared Sheets Jul 29 '11 at 19:06
I understand that. But I'm saying that no DOM events other than a click fire on anything, parent divs, the active select element, etc. – maxedison Aug 02 '11 at 14:22

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

1 Answers1

Linked