How to set keylistener to hide the topmost yui panel

Question

I have two or more YUI panels overlapping each other. I want to close the uppermost panel, when I will press the escape key.

How can I do that in context of YUI?

1. I have tried this YUI example http://developer.yahoo.com/yui/examples/container/keylistener.html

But on pressing escape key, It closes all the panels.

1. I have also tried using OverlayManager and z-index property of overlay, but sometimes z-index of uppermost panel is less than the z-index of lower level panel.

Answer 1

Panels are hidden on escape, because this is the default widget setting, see http://yuilibrary.com/yui/docs/api/classes/Panel.html#attr_hideOn

Unlike what the documentation says, the node firing the event is not the bounding box of the widget, but the document node, see http://yuilibrary.com/yui/docs/api/files/widget-autohide_js_Widget-Autohide.js.html#l57

Try overriding the hideOn attribute, by really specifying the widget's bounding box as the node.

Something like this should work:

var panel = new Y.Panel({...});
panel.set('hideOn', [{eventName: 'key', keyCode: 'esc', node: panel.get('boundingBox')}]);

I am sure it can be used to disable escape, by excluding it from the hideOn list.