Close p-dialog of PRIMENG on escape issue when fancy-box is open on p-dialog

Question

I have an issue closing p-dialog and fancy-box. Both are closed on pressing escape when both are open.

The flow is:

1. When I open p-dialog, I have an image in p-dialog
2. When I click on the image, fancy-box is open
3. Then I press escape
4. Both are closed

I want to close both one by one on press escape, not both on one key press.

Answer 1

There is closeOnEscape property in prime-ng Dialog. you can use this property to close the dialog on escape.

initially make it false. when the first dialog gets close on escape. add HostListener for escape event and in that change closeOnEscape to true.

so one by one dialog will be closed.

example :

in HTML :

 <p-dialog closeOnEscape="closeDialog">
        <p-dropdown appendTo="body"></p-dropdown>
    </p-dialog>

in ts :

closeDialog : boolean = false;

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log(event);
    this.closeDialog = !this.closeDialog;
}

hope this will help you.