Primefaces dialog background opacity doubles when action fails in dialog

Question

I have a page modal dialog that gets rendered if a user clicks an edit button. The dialog asks for the username and password and has a submit button. If the username and password do not validate, an error is displayed.

The problem is that if the username and password do not authenticate, the modal background darkens more and more every time the authentication fails.

What would cause that?

<p:dialog id="dialog" header="Login To Edit" widgetVar="dialog" visible="#{fundingBacker.loginVisible}" modal="true" 
    resizable="false" closable="false" draggable="true" rendered="#{!userBean.loggedIn}">
    <h:form>

        <p:ajaxStatus style="width:16px;height:16px;">
            <f:facet name="start">
                <p:graphicImage value="../images/loading4.gif" />
            </f:facet>
            <f:facet name="complete">
                <h:outputText value="" />
            </f:facet>
        </p:ajaxStatus>

        <p:messages autoUpdate="true" showDetail="true" />

        <h:panelGrid columns="2" cellpadding="5">

            <h:outputLabel for="lanId" value="LanID:" />
            <p:inputText value="#{currentUser.lanID}" id="lanId" required="true" label="lanId" requiredMessage="Lan ID is required" />

            <h:outputLabel for="password" value="Password:" />
            <p:password value="#{currentUser.password}" id="password" required="true" label="password" feedback="false" requiredMessage="Password is required" />

            <p:commandButton id="loginButton" value="Login" type="submit" styleClass="primaryButton" action="#{currentUser.performLogin}" update="dialog"/>

        </h:panelGrid>
    </h:form>
</p:dialog>

Answer 1

You're updating the dialog everytime without first closing it. I'm not sure if it's a bug or a feature, but due to the visible attribute, the overlay is reinitialized on every dialog update. You might want to report it to the PrimeFaces guys along with a more compact testcase.

Easiest solution is to just close the dialog on ajax success. It'll be redisplayed faster than the enduser can blink its eyes.

<p:commandButton ... onsuccess="dialog.hide()" update="dialog" />

You'll probably only need to finetune the visible and rendered attributes to make sure that the dialog is reopened when validation failed (e.g. when the user is still not logged in).

An alternative is to update the dialog's form instead of the dialog itself.

<p:commandButton ... update="@form" />

Or to just remove that attribute altogether. It defaults to @form already.

<p:commandButton ... />

Closing the dialog on successful login could then be done by RequestContext#execute().

RequestContext.getCurrentInstance().execute("dialog.hide()");

Answer 2

This was a bug fixed in 3.1.Final;

http://code.google.com/p/primefaces/issues/detail?id=3426