disable or replace behaviour of ESC key in AJS.Dialog

[Alexej Geldt]

Hello.

I am using some simple AJS.Dialogs in my plugin as described here: https://docs.atlassian.com/aui/latest/docs/dialog.html

When a Dialog is poping up, it is setting the focus on its first field.

When i use the cancel or submit button of the Dialog, it is eventually calling some action and then removes itself (dialog.remove()).

But when i hit ESC on keyborad, the Dialog seems to be just hidden, and not removed. When i open the Dialog again, it is creating a new one and the hidden one remains on page causing multiple elements with same id. Therefore we fail to set focus correctly.

So my question is:

how can i force the dialog to be removed instead of just hidden, after hitting the ESC button?

I tried catching the key=27 event and using dialog.remove(). But the default escape handler seems to catch it first.

i couldn't find any documentation about options that can be used while creating dialogs.

[Alexej Geldt · Accepted solution]

found easy work-around.

just attempt to remove any remaining hidden dialogs before creating new ones.

// remove any remaining hidden dialogs
AJS.$("#edit-shared-options-category-dialog").remove();
        
        
        // define popup dialog
        var popup = new AJS.Dialog({
            width:600, 
            height:80, 
            id:"edit-shared-options-category-dialog",
            closeOnOutsideClick: true
        });

[Remo Siegwart]

You should be able to replace the ESC key behavior by overriding the keypressListener option:

var popup = new AJS.Dialog({
	width:600,
	height:80,
	id:"edit-shared-options-category-dialog",
	closeOnOutsideClick: true,
	keypressListener: function(e) {
		if (e.keyCode === 27) {
			popup.remove();
		}
	}
});

var popup = new AJS.Dialog({
	width: 600,
	height: 80,
	id: "edit-shared-options-category-dialog",
	closeOnOutsideClick: true,
	keypressListener: AJS.$.noop
});

Hope this helps