Question

I’m trying to create a simple cross browser plugin for buttons with dropdown menus. When user would click such button a menu would appear underneath with various options and user can subsequently select an option from it or close it.

I’ve created a simple JSFiddle with three such buttons that exemplify what I’m trying to achieve. My JSFiddle code does some additional event logging that I’ve excluded from below code, but running JSFiddle makes it pretty obvious that I’m logging events as they happen.

This is my HTML:

The way that I implemented my code I need dropdown menu focusable, hence the tabindex attribute on the container.

<div class="dropdown">
  <a href="#" class="dropdown-toggle">Open sesame</a>
  <ul class="dropdown-menu" tabindex="0">
    <li><a href="#">Some option</a></li>
    <li><a href="#">Option with longer text</a></li>
  </ul>
</div>

My script:

// menu opening and closing
$(".dropdown-toggle").mousedown(function(evt) {
  evt.preventDefault();
  var c = $(this).closest(".dropdown").toggleClass("open");
  c.hasClass("open") && c.find(".dropdown-menu")[0].focus();
});

// menu closing when clicking anywhere
$(".dropdown-menu").focusout(function(evt) {
  evt.stopPropagation();
  $(this).closest(".dropdown").removeClass("open");
})

Displaying of the menu is done by CSS. As you can see I barely set a CSS class on the container and CSS provides automatic visibility when open class is set on container.

Intended behaviour

This is the correct way as it should work:

1. User clicks a button and menu appears
2. Clicking on the same button should close the menu
3. Clicking on a menu option should fire click even of the option (and optionally keep the menu open)
4. Clicking anywhere else should close the menu if opened.

Browser issues

Different browsers seem to fire events differently and excessively. Event propagation (bubbling) and their sequence prevents upper steps to execute as expected. Chrome seems to not fire excessive events.

Chrome
Chrome seems to work as expected. All four steps execute as they should. When clicking on a link within the menu, no focusout is being fired as the link in within focused container (the menu itself).

Firefox and IE9
It seems that steps #1, #2 and #4 work as expected, but #3 fails because before menu option click can be detected and executed, focusout fires first and closes the menu.

IE8 and IE7
Anybody that has them can test for me and tell me which of the upper steps work and which fail. I haven’t tested but would really like to know as well.

Question

The main issue with this script is that focusout event fires prematurely and too often. I can’t use blur event because it’s not propagated from menu options to menu itself.

IMPORTANT – binding click handler to document – I know I could bind click event to my document, but I can’t use this usual approach because:
1. this would be very unreliable as some other controls on my form may stop click propagation, hence menu wouldn’t close when such controls would be clicked.
2. my application is running within an iframe, so clicking outside of it, would also keep the menu open.

Anybody wants to play with these events in a cross browser way?

Answer 1

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);
});