Dojo - Prevent dijit/popup cancel on escape key press

Question

I have am using dijit/popup to display a dialog widget when a button is clicked. The documentation below describes how to use dijit/popup to control the popup.

https://dojotoolkit.org/reference-guide/1.10/dijit/popup.html

The code is as follows:

define(["dijit/popup"], function(popup){
...

// wrap the pop-up widget and position it offscreen so
// that it can be measured by the widget’s startup method
popup.moveOffScreen(dropDown);

// if the pop-up has not been started yet, start it now
if(dropDown.startup && !dropDown._started){
    dropDown.startup();
}

// make the pop-up appear around my node
popup.open({
    parent: this,
    popup: dropDown,
    around: this.domNode,
    orient: ["below-centered", "above-centered"],
    onExecute: function(){
        popup.close(dropDown);
    },
    onCancel: function(){
        popup.close(dropDown);
    },
    onClose: function(){
    }
});

...

However the default behavior of dijit/popup is to call the onCancel callback function either when the popped up widget signals its cancelled or when the ESC key is pressed:

https://dojotoolkit.org/reference-guide/1.10/dijit/popup.html#keyboard-handling

I can see this happening when the ESCape key is pressed however I don't want the dialog to be closed for ESC (or TAB) key press - how can I achieve this? How can I detect when the onCancel callback is executed as a result of the user pressing the Escape key?

Alternatively how can I prevent dijit/popup calling onCancel only when the escape key is pressed?

pgianna pgianna · Accepted Answer · 2016-09-09T13:05:35

It seems that there is no clean way to do this. What you can do is suppress the escape key event for the popup/dropdown. To do this you must set up a key handler after the popup has been displayed. To do this you need the function name that opens the popup and you need access to the popup itself or its parent. Note that the popup is placed at a random place in the DOM and is not a child of the widget that opens it/drops it. For example the DateTextBox calls the openDropDown function to open its calendar widget and stores it in member dropDown. You can suppress the key event so that the drop down is not closed with the escape key like this:

require([
    "dijit/form/DateTextBox",
    "dojo/aspect",
    "dojo/on",
    "dojo/keys",
    "dojo/domReady!"
], function(DateTextBox, aspect, on, keys){

    var dateBox = new DateTextBox({});
    aspect.after(dateBox, "openDropDown", function () {
        on(this.dropDown, "keydown", function(event)
        {
            if (event.keyCode == keys.ESCAPE)
            {
                event.stopPropagation();
                event.preventDefault();
                return;
            }
        });
    });
    dateBox.placeAt("datebox");
    dateBox.startup();
});

You may need to add an additional function to your popup (or an aspect to an existing function) to expose the popup after it is opened (the equivalent of this.dropDown in the above snippet).

Dojo - Prevent dijit/popup cancel on escape key press

2 Answers