Cross browser button with popup menu using focusout event

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:

User clicks a button and menu appears
Clicking on the same button should close the menu
Clicking on a menu option should fire click even of the option (and optionally keep the menu open)
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 blurevent 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?

charlietfl · Answer 1 · 2013-01-13 01:41:22Z

up vote0down vote

Can use a click handler on document to replace the focusout code. Not exactly sure of behavior you want but try this:

$(document).click(function(e){
  var $tgt=$(e.target)
  if( !$tgt.closest('.container').length){
   log('non menu el clicked')

  }else{
    /* close other open menus when a new one clicked*/
    $tgt.closest('.container').siblings().removeClass('open')
  }

})

DEMO http://jsfiddle.net/zMdxw/5/

This could be refined to only add document click handler when a menu is open and remove it when all menus are closed

answered Jan 13 at 1:41

charlietfl
20.5k31022

	Thank you, but as I've stated in my last last paragraph I can't use that, as other controls stop click propagation (because they have to work this way) so clicking on such controls wouldn't close the menu as event will not bubble up to document. – Robert Koritnik Jan 13 at 1:49
	BTW: I've changed my example yet again, so feel welcome to click on it again as I've managed to make it work 75% in FF and IE9. And if you have IE8 or IE7 I would be very happy if you provided some info about them... – Robert Koritnik Jan 13 at 1:50
	sorry didn't read full spec , missed last paragraph. I rarely find need to stop click propagation when building a UI so higher level click handler is simplest approach when i do stuff like this. WHen propagation is an issue I usually use `target` as I did here – charlietfl Jan 13 at 1:55
	tried newest case in IE 7&8. Events work fine. No arrows display in IE7 on top buttons – charlietfl Jan 13 at 1:58
	There is another problem with your approach. My application runs within an IFRAME, so whenever user would click on top frame my menu wouldn't close as user wouldn't click anywhere within my frame. `focusout` on the other hand works as expected. Whenever user clicks anywhere (even within developer tools), element would loose focus and menu would hide. and BTW your code has a bug because simply clicking within the frame doesn't really close the menu. Menu only gets closed when a different drop down button gets clicked. – Robert Koritnik Jan 13 at 1:59

show 2 more comments

Robert Koritnik · Accepted Answer · 2013-01-14 15:59:22Z

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

Perfect MVC code

Monday, 18 March 2013