Primefaces Multiple Dialogs with closeOnEscape

Question

I have 2 dialogs (A and B) with closeOnEscape="true".

Both dialogs are modal and have <p:focus context="innerForm" /> inside.

The dialog A opens the dialog B. Yeah, I know, this is a bad design, but...

The problem is that when I press ESC on dialog B it closes correctly and focus return to dialog A, but ESC do not close this dialog.

Answer 1

This is a bug and has been reported to PrimeFaces on GitHub: https://github.com/primefaces/primefaces/issues/6677

PR: https://github.com/primefaces/primefaces/pull/6678

Will be in PF 9.0

Add this to your JS that loads after PF to fix it right now:

if (PrimeFaces.widget.Dialog) {
    PrimeFaces.widget.Dialog.prototype.bindEvents = function() {
        var $this = this;

        //Move dialog to top if target is not a trigger for a PrimeFaces overlay
        this.jq.on("mousedown", function(e) {
            if (!$(e.target).data('primefaces-overlay-target')) {
                $this.moveToTop();
            }
        });

        this.icons.on('mouseover', function() {
            $(this).addClass('ui-state-hover');
        }).on('mouseout', function() {
            $(this).removeClass('ui-state-hover');
        }).on('focus', function() {
            $(this).addClass('ui-state-focus');
        }).on('blur', function() {
            $(this).removeClass('ui-state-focus');
        });

        this.closeIcon.on('click', function(e) {
            $this.hide();
            e.preventDefault();
        });

        this.maximizeIcon.on("click", function(e) {
            $this.toggleMaximize();
            e.preventDefault();
        });

        this.minimizeIcon.on("click", function(e) {
            $this.toggleMinimize();
            e.preventDefault();
        });

        if (this.cfg.closeOnEscape) {
            $(document).on('keydown.dialog_' + this.id, function(e) {
                var keyCode = $.ui.keyCode;
                if (e.which === keyCode.ESCAPE && $this.isVisible()) {
                    var active = parseInt($this.jq.css('z-index')) === parseInt($('.ui-dialog:visible').last().css('z-index'));
                    if (active) {
                        $this.hide();
                    }
                };
            });
        }
    };
}