Blur event on select boxes and Firefox

Question

I have the following situation:

One selectbox and a tooltip that appears when the user clicks on the box to select an option. To show the tooltip can be easily done with css (select:focus ~ .tooltip) or jquery using the focus() event. When the user picks something the select box closes and the tooltip dissapears. This can be done with the change() event.

But there is one issue. If the user opens the selectbox and clicks somewhere else on the page, the list closes and in Firefox the blur event is not triggered right away, so the tooltip remains visible. If the user makes the second click outside of the select the blur event triggers and the tooltip dissapears.

Chrome and IE is ok, Firefox is not.

Do somebody know a workaround in Firefox?

thanks, Istvan

Answer 1

After playing around with this for about half an hour, I'm afraid to say my input would be: no. And for the following reasons:

• Firefox doesn't fire the blur event until the second click. This is evident from looking at the dropdown on the select, which remains blue.
• Therefore a pure CSS solution would definitely never work
• A JavaScript solution would also be next to impossible too, as the first click seems to go nowhere
  • I've checked this by trying to note body and document clicks, you'll see that neither fire the first time. In fact, neither does the select, so I have on which level that click registers

See my JSFiddle for my workings. Sorry! I guess it's just a FF issue.

$(document).click(function() {
    console.log("document");
});
$("body").click(function() {
    console.log("body");
});
$("select").click(function(e) {
    e.stopPropagation();
    console.log("select");
});

Edit: Sorry, posted an old JSFiddle.