Pressing Escape Key on Open File Dialog Fires a JavaScript Key Press

Question

I have an HTML dialog set to remove itself when the escape key is pressed. I have a file field in the HTML dialog. If a user is using the system file dialog to select a file for the file field in the HTML dialog and presses escape, that event closes the system dialog and also passes the escape key event to the browser, which also closes the HTML dialog. I want the HTML dialog to stay open, and don't want that event to hit the browser.

How can I fix this?

More info: This behavior is in Firefox.

Answer 1

If you are using the jQuery uI dialog, you could check for the escape key in the beforeClose event, and use e.preventDefault to stop it from closing:

$( ".selector" ).dialog({
   beforeClose: function(event, ui) {
                 if(event.keyCode == 27) {  
                     alert("Esc key tried to close the dialog");
                     event.preventDefault();
                 } else {  
                     alert("You used something other than the escape key to close the dialog.");  
                 }
   }
});

Only drawback is if you want to allow closing the dialog with the escape key when the system file dialog is NOT open, this will prevent that from working.