One ESC closes all modal dialogs in the jQuery user interface. Workarounds?

Question

Actually, in jQuery there was (so far) an error: http://bugs.jqueryui.com/ticket/4511 .

The reason for this behavior (from comments on the error description): "The dialog itself associates the keydown event with itself to close the dialog on ESC , in addition, the dialog overlay associates the keydown event with the document without filtering to close only the active dialog.

I can’t come up with an acceptable workaround. Is there anyone who was supposed to handle this?

Answer 1

Very simple - when creating a modal dialog, run this:

$([document, window]).unbind('.dialog-overlay'); 

If you create more than one modal dialog, pressing ESC will close only the top one. Then, when you focus on the bottom dialog box, press ESC and it will also close it.

Hope this helps!

PS jQuery UI developers should add a parameter when you want all dialogs to close immediately when you press the ESC key or just focused ones.

Answer 2

The easiest way is to add event.stopPropagation(); in the close function before return self; in the jquery.ui.dialog.js file. And I ended up with the problem of closing dialogs one by one in an escape keydown. Let me know if anyone finds a better solution.

Editorial: this needs to be added, because when you click on an object, the button's closing event is undefined.

if (typeof event! = 'undefined') {event.stopPropagation (); }

Answer 3

The root of the problem is that the jQuery UI keydown event propagates through all the dialog boxes. The fix in the jQueryUI dialog source code would be to add event.stopPropagation() when the topmost dialog was successfully closed and mark event.isPropagationStopped() at the start of the same keydown event.

As a workaround, I did, thanks for Jazzer, the following.

• Set the closeOnEscape dialog closeOnEscape to false

• When the dialog is created, add:

   //newDialog is dialog content, eg var newDialog = $('my dialog content>'); newDialog.keydown(function(event) { if (mydialogs.hasOpenDialogs() && event.keyCode && event.keyCode === $.ui.keyCode.ESCAPE) { $(newDialog).dialog("close"); event.preventDefault(); 
   event.stopPropagation(); } }); 

• when loading a document, do:

   $(function(){ //allow for ESC to close only top dialog $(document).bind('keydown', function(event) { if (event.isPropagationStopped()) return true; if (mydialogs.hasOpenDialogs() && event.keyCode && event.keyCode === $.ui.keyCode.ESCAPE) { mydialogs.closeTopDialog(); event.preventDefault(); event.stopPropagation(); } }); }); 

The event in (2) occurs when the user presses ESC while entering text in the input field inside the dialog box. The event in (3) occurs when the user presses ESC somewhere else.

mydialogs here is a wrapper around the stack (array) of modal dialogs, where each new dialog box adds itself through .push() and in .close() removes itself using .pop() .