Reactive popup close by esc key

Would it be possible to close the reactive popup by pressing the esc key?

Hi Freek, 

There is no default option to close the reactive popup by pressing the esc key. You need to create event for the popup like Onkeypress or Onkeyup to trigger event. After that it will be possible to close popup by esc key..  

 

Hi Freek,

You can add below script using JS block on onReady event of the screen

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc");
    } else {
        isEscape = (evt.keyCode === 27);
    }
    if (isEscape) {
        $actions.Hide();
    }
};

In the $Action.Hide client action just set the show pop variable to false.

Hi freek!

That's a good question! I tried with the event OnKeyPress but I did not work.
The only solution that I can imagine by now is for you to build a JS script with a key listener that hides the popup. You will need to pass the Widget Id so that the JS code recognize the HTML object.

Hope it helps you.

Cheers

Tiago Rodrigues wrote:

Hi freek!

That's a good question! I tried with the event OnKeyPress but I did not work.
The only solution that I can imagine by now is for you to build a JS script with a key listener that hides the popup. You will need to pass the Widget Id so that the JS code recognize the HTML object.

Hope it helps you.

Cheers

HIi Tiago,

Yes, you are right. A key listener is needed but there is no need to pass the widget id and setting widget's style for hiding it. It will break its relation with the boolean variable we are using originaly to show/ hide the popup.

From the javascript we can simply call a screen client action which sets the boolean variable to false and popup will close automatically based on this boolean value.