Close dialog prior to navigate away from the page

Question

PrimeFaces: 7.0
JSF: 2.2.13
JBoss: 7.1
Java: 1.8
Chrome: 83.0.4103.116

I have a simple confirmation dialog to go to another page, there a reason for the action should be provided as a text. It boils down to the following lines of code:

<p:dialog id="dlg" widgetVar="dlg" modal="true">
    <h:form id="dlgForm">
        <p:inputText id="reason" required="true" value="#{bean.reason}"/>
        <p:message for="reason"/>
        <p:commandButton id="proceed" value="Proceed" update="dlgForm" action="#{bean.action}"/>
        <p:commandButton id="cancel" value="Cancel" resetValues="true" onclick="PF('dlg').hide()">
            <p:ajax update="dlgForm" resetValues="true"/>
        </p:commandButton>
    </h:form>
</p:dialog>

And the bean:

@ManagedBean(name = "bean")
@SessionScoped
class Bean {
    public String processGrundFuerExportDlg() {
        PrimeFaces.current().executeScript("PF('dlg').hide()");
        return "other_page";
    }
}

My requirements:

Dialog opens with the empty 'reason'-inputText.
If 'cancel' is pressed: dialog should close
If 'proceed' is pressed:
- If reason is not empty: close dialog and navigate to the 'other_page'
- If return is empty: show the error message and don't close the dialog

My problem with this code: the line

PrimeFaces.current().executeScript("PF('dlg').hide()");

seems to be executed AFTER the current page being left resulting in 'dlg' not being found (JavaScript error). The not properly closed dialog produces a nasty side effect: After returning to my first page later on, the dialog overlay stays active and inputText elements can't be activated with the mouse (TAB works). Overlay logic in the event loop blocks mouse clicks to from being passed to the components on the page.

My question:

How this standard scenario should be properly implemented with JSF and PrimeFaces?
If Upgrade to other versions is required, are there some workaround for removing stale overlays without upgrading?

Disclaimer: I studied many related questions on StackOverflow and tried all proposed solutions without success. For example this one: Keep p:dialog open when a validation error occurs after submit

@JasperdeVries I don't see, what my problem X should be. I just want to get a standard "form in a dialog with validation" thing working. I thought, with such mature technology, like JSF and PrimeFaces this shouldn't be a problem at all. — Boris Brodski
What about not closing the dialog and just navigate to the new page? — Jasper de Vries
@JasperdeVries I would love to, but this is exactly my problem (see the question). The dialog overlay stays open prevents mouse events from being delivered to the widgets. Read corresponding paragraph of my question. — Boris Brodski
"After returning to my first page later on" how? By using the browser's back button? Please provide a minimal reproducible example — Jasper de Vries

Jasper de Vries Jasper de Vries · Accepted Answer · 2020-07-07T18:56:14

You won't be having this problem if you would redirect to the new page instead of triggering an Ajax update.

You can simply add ?faces-redirect=true to your returned string, so:

return "other_page?faces-redirect=true";

Or, if you are using faces-config, add <redirect/> to the <navigation-case>.

Then you can remove the script from your bean where you try to close the dialog.

Close dialog prior to navigate away from the page

2 Answers