PDA

View Full Version : LayoutDialog keyListeners not unbound on hide?



evan.leonard
14 Dec 2006, 9:46 AM
Hi,
I'm using the LayoutDialog to create a dialog in my application. I've bound the escape key to the dialog.hide method to close the dialog. I also am using the opening and closing animation using the animateTarget parameter to the show method.



...
dialog.addKeyListener(27, dialog.hide, dialog);
...
dialog.show(animateTarget);


What i've found however is that even after the dialog is hidden, you can still hit the escape key to "close" the dialog again. The animation reruns again each time you hit escape. Shouldn't the keyListeners be unbound when the dialog is hidden?

Thank you for all the work,
Evan

jack.slocum
14 Dec 2006, 9:54 AM
Keys should not be going to the dialog once it is hidden. Is there a field in the dialog possibly retaining the focus?

After hiding the dialog, you may want to transfer focus to something else if that is the case.

tryanDLS
14 Dec 2006, 10:00 AM
Just tried that with my simple sample. I see the same thing. Nothing else on the page but the trigger button.



helloWorld = function () {
var dlg;

return {
showDialog: function () {
if (!dlg) {
dlg = new YAHOO.ext.BasicDialog('dlgHello', {
width: 300, height: 300,
resizable: true, minWidth:200, minHeight:300,
shadow: true,
shim: true,
animateTarget: 'btn'
});

dlg.addKeyListener(27, dlg.hide, dlg);
dlg.setDefaultButton(dlg.addButton('Close', dlg.hide, dlg));
}

dlg.show();
},

init: function() {
getEl('btn').on('click', this.showDialog, this, true);
}
}
}();

YAHOO.ext.EventManager.onDocumentReady(helloWorld.init, helloWorld, true);

jack.slocum
14 Dec 2006, 10:33 AM
The reason why is:

dlg.setDefaultButton(dlg.addButton('Close', dlg.hide, dlg));

focuses the button. Then when the dialog is hidden, the button still has the focus so keys are still routed to dialog. Make sense?

I could blur the button, but that is pretty worthless since their could be other stuff in the dialog that has the focus.

Ideally the key functionality for the basic dialog should be converted to use the KeyMap object. Then it could be enabled/disabled when shown or hidden. It could also provide a way to share key configs across different dialogs, even setting a default key config.

tryanDLS
14 Dec 2006, 11:16 AM
You could do this for now. In your dialog creation add an event to set focus to some other element on hide. In my sample it just sets focus back to the button that triggered the dialog to begin with



dlg.on('hide', function() {getEl('btn').focus();});

evan.leonard
14 Dec 2006, 1:07 PM
Thanks Jack and Tryan-
I'll give those ideas a shot!
Evan