Cross browser solution
Solution I've come up with is cross browser and works in Chrome, Firefox and IE7+. It required an additional event to be handled and that is the mousedown
of the dropdown menu. Clicking an option on a dropdown menu normally fires a focusout
event in IE and FF, even though user clicked within the same element that is in focus. That's why we set next focusout
to be ignored and not close the menu.
Chrome does not fire focusout
menu option clicks, so we also have to handle that by manually re-enabling closing after some short enough time. I've set it to 100ms, but it can be much shorter as it only needs to be delayed until next focusout
handler is being executed. It seems that 10ms is also enough. Maybe even less if event handlers are all being queued by the browser before they start executing. In that case a value of 0 would be sufficient. But to make it safe I've left it on 100ms.
This is the code that does what's expected:
// toggle dropdown menu display
$(".dropdown-toggle").mousedown(function(evt) {
evt.preventDefault();
log("Menu toggle");
var dd = $(this).parent().toggleClass("open");
// only focus it when visible
dd.hasClass("open") && dd.children(".dropdown-menu")[0].focus();
});
// dropdown closing on focusout
$(".dropdown-menu").focusout(function(evt) {
log("Menu focus out");
var m = $(this);
// check that closing is not cancelled this time
m.data("cancel-close") === true && m.removeData("cancel-close").length || m.parent().removeClass("open");
});
// cancel dropdown closing when user clicks a menu option
$(".dropdown-menu").mousedown(function(evt) {
log("Cancel next focusout");
var m = $(this);
// cancel next focusout event
m.data("cancel-close", true);
// reenable closing for browsers that don't focusout ie. Chrome
window.setTimeout((function(context) {
return function() {
log("Focusout is reenabled.");
context.removeData("cancel-close");
};
})(m), 100);
});