dialog will not close primefaces

Question

I have a dialog on one of my pages. It opens fine. It works fine if you use the button on the page, it closes. However, if you try and "x" out of the dialog it will not close. I believe it is related to the fact that I have an input field on the dialog, but I am not sure. I apologize if this is a dupe, I could not find a similar post.

        <p:commandButton action="#{phoneListBean.debugger}"
            value="Merge Unqiue" onclick="mdlg.show();"
            update=":pmsg, :createNewPanel, :listform" />

        <p:dialog id="mdialog" header="Merge Unqiue" widgetVar="mdlg"
            appendToBody="true">
            <h:form id="mform">
                <h:panelGrid columns="2" cellpadding="5" id="m">
                    <h:outputLabel for="listName" value="Enter the List Name:" />
                    <p:inputText value="#{phoneListBean.mergeList.name}" id="listName" />


                    <p:commandButton action="#{phoneListBean.mergeUnique}"
                        value="Merge Unqiue" update=":pmsg, :listform"
                        onclick="mdlg.hide();" />
                </h:panelGrid>
            </h:form>

        </p:dialog>

Thanks in advance for the help.

Solution

Your problem is that you don't want to use the onclick attribute with Primefaces buttons for displaying and hiding the dialogs. The click event may not get invoked before the postback because these buttons are not Ajax enabled.

Instead you should use oncomplete attribute. This will notify the Javascript event to execute only after the server postback has occurred, meaning that show() will display already updated dialog contents, and hide() will occur only after the server side execution has finished.