Search code examples
javascriptyuiyui2

How to autohide YUI2 Menu on blur?

I have a YAHOO.widget.Button of the type "menu". My task is simple: The menu is shown when the user clicks on the button, and is hidden when the user clicks elsewhere on the screen.

Here's my code on jsfiddle: http://jsfiddle.net/tRssn/

What I've tried so far: 1. Setting the clicktohide property of the Menu widget to true (see above code) and 2. Subscribe to the blur event on the Button/Menu widget and close the menu if it's visible.

Approach 1 doesn't work for some reason and approach 2 works with IE and Mozilla, but not Chrome.

Shouldn't there be an easy way to do this?

Any help appreciated!

Solution

  • Okay, I was able to solve this by explicitly creating a YAHOO.widget.Menu object, rendering it, and then assigning it as the menu to the YAHOO.widget.Button object.

    http://jsfiddle.net/tRssn/1/

    Strangely, I have to set the config for the Menu widget like this instead of at the time of the creation: oButton.getMenu().cfg.config.clicktohide.value = true;