problem using Primeface modal

Question

I’m using a modal within the

Only when I close, it gets locked the components, I think I must have done something wrong. Follow my code.

<ui:composition template="/WEB-INF/template/layoutPadrao.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<ui:define name="titulo">Pesquisa de Serviço</ui:define>

<ui:define name="corpo">
    <f:metadata>
        <f:event listener="#{consultaServico.inicializa}" type="preRenderView" />
    </f:metadata>

    <h1>Pesquisa de Servico</h1>

    <h:form id="frmPesquisaServico">
        <p:messages id="messages" autoUpdate="true" closable="true" />

        <p:toolbar style="margin-top: 20px">
            <p:toolbarGroup>
                <p:button outcome="cadastroServico" value="Novo Serviço"/>
                <p:commandButton value="Pesquisar" id="botaoPesquisa"   update="tabelaPesquisaServico" />
            </p:toolbarGroup>
        </p:toolbar>
        <br />
        <p:panelGrid columns="2" id="painel" style="width: 100%"
            columnClasses="rotulo, campo">
            <p:outputLabel value="placa do Veículo" for="placa" />
            <p:inputMask id="placa" mask="aaa-9999" />
        </p:panelGrid>

        <p:dataTable id="tabelaPesquisaServico" 
            value="#{consultaServico.servicos}" var="servico"
            style="margin-top: 20px" emptyMessage="Nenhum Serviço encontrado."
            rows="20" paginator="true" paginatorAlwaysVisible="false"
            paginatorPosition="bottom" reflow="true">
            <f:facet name="header">
                TABELA DE PESQUISA DE SERVIÇO
            </f:facet>
            <p:column headerText="Cliente" style="text-align: center; width: 300px">
                <p:outputLabel value="#{servico.cliente.nome}" />
            </p:column>
            <p:column headerText="Veículo" style="text-align: center; width: 120px">
                <p:outputLabel value="#{servico.carro.modeloCarro.nome}" />
            </p:column>
            <p:column headerText="Data do Serviço"  style="text-align: center; width: 130px">
                <p:outputLabel value="#{servico.diaServico}">
                    <f:convertDateTime pattern="dd', 'MMMM ' de ' yyyy" />
                </p:outputLabel>
            </p:column>
            <p:column headerText="Data da Garantia" style="text-align: center;width: 130px">
                <p:outputLabel value="#{servico.diaGarantia}">
                    <f:convertDateTime pattern="dd', 'MMMM ' de ' yyyy" />
                </p:outputLabel>
            </p:column>
            <p:column headerText="Valor do Serviço" style="text-align: center;width: 100px">
                <p:outputLabel value="#{servico.valor}" />
            </p:column>
            <p:column headerText="Descrição" style="text-align: center;width: 100px">
                    <p:commandButton icon="ui-icon-extlink" title="Descrição do Serviço" 
                            process="@this" oncomplete="PF('mostraDescricao').show();" update=":frmPesquisaServico:mostraServicosDialog">
                        <f:setPropertyActionListener target="#{consultaServico.servicoSelecionado}" value="#{servico}" />
                    </p:commandButton>
            </p:column>
            <p:column headerText="Observação" style="text-align: center;width: 100px">
                    <p:commandButton icon="ui-icon-extlink" title="Observação do Serviço" 
                            process="@this" oncomplete="PF('mostraObservacao').show();" update=":frmPesquisaServico:mostraObservacaoDialog">
                        <f:setPropertyActionListener target="#{consultaServico.servicoSelecionado}" value="#{servico}" />
                    </p:commandButton>
            </p:column>
            <p:column headerText="Editar / Excluir" style="text-align: center;width: 100px" >
                <p:button outcome="cadastroServico" icon="ui-icon-pencil" title="Editar">
                    <f:param name="servico" value="#{servico.codigo}" />
                </p:button>
                    -
                    <p:commandButton icon="ui-icon-trash" title="Excluir"
                    oncomplete="PF('confirmacaoExclusao').show()" process="@this"
                    update=":frmPesquisaServico:confirmacaoExclusaoDialog">
                    <f:setPropertyActionListener value="#{servico}"
                        target="#{consultaServico.servicoSelecionado}" />
                </p:commandButton>
            </p:column>
        </p:dataTable>

        <p:confirmDialog id="confirmacaoExclusaoDialog" widgetVar="confirmacaoExclusao"
                         message="Deseja excluir o serviço do carro #{consultaServico.servicoSelecionado.carro.modeloCarro.nome} ?"
                         header="Exclusão de Serviço" severity="alert">
            <p:button value="Não" onclick="PF('confirmacaoExclusao').hide(); return false;" />
            <p:commandButton value="Sim" update=":frmPesquisaServico:tabelaPesquisaServico"
                             process="@this" oncomplete="PF('confirmacaoExclusao').hide()"
                             action="#{consultaServico.excluir}" />
        </p:confirmDialog>

        <p:dialog id="mostraServicosDialog" header="DESCRIÇÃO DO SERVICO" widgetVar="mostraDescricao" 
                  hideEffect="true" height="100" width="320" modal="true" >
            <p:dataList value="#{consultaServico.servicoSelecionado}" var="serv" itemType="disc" 
                        rendered="#{not empty consultaServico.servicoSelecionado.descricaoServico}"> #{serv.descricaoServico}
            </p:dataList>
            <h:outputText value="Não Possui nenhuma descrição deste serviço." rendered="#{empty consultaServico.servicoSelecionado.descricaoServico}"/>
        </p:dialog>
        <p:dialog id="mostraObservacaoDialog" header="OBSERVAÇÃO DO SERVIÇO" widgetVar="mostraObservacao" 
                  hideEffect="true" height="100" width="320"  modal="true" >
            <p:dataList value="#{consultaServico.servicoSelecionado}" var="servico" itemType="disc" 
                        rendered="#{not empty consultaServico.servicoSelecionado.observacao}"> #{servico.observacao}
            </p:dataList>
            <h:outputText value="Não Possui nenhuma Observação deste serviço." rendered="#{empty consultaServico.servicoSelecionado.observacao}"/>
        </p:dialog>

    </h:form>
</ui:define>

Answer 1

When it comes to p:dialog you should always avoid nested dialogs and dialogs within Forms. Therefore:

        <p:confirmDialog id="confirmacaoExclusaoDialog" widgetVar="confirmacaoExclusao"
                     message="Deseja excluir o serviço do carro #{consultaServico.servicoSelecionado.carro.modeloCarro.nome} ?"
                     header="Exclusão de Serviço" severity="alert">
        <p:button value="Não" onclick="PF('confirmacaoExclusao').hide(); return false;" />
        <p:commandButton value="Sim" update=":frmPesquisaServico:tabelaPesquisaServico"
                         process="@this" oncomplete="PF('confirmacaoExclusao').hide()"
                         action="#{consultaServico.excluir}" />
    </p:confirmDialog>

    <p:dialog id="mostraServicosDialog" header="DESCRIÇÃO DO SERVICO" widgetVar="mostraDescricao" 
              hideEffect="true" height="100" width="320" modal="true" >
        <p:dataList value="#{consultaServico.servicoSelecionado}" var="serv" itemType="disc" 
                    rendered="#{not empty consultaServico.servicoSelecionado.descricaoServico}"> #{serv.descricaoServico}
        </p:dataList>
        <h:outputText value="Não Possui nenhuma descrição deste serviço." rendered="#{empty consultaServico.servicoSelecionado.descricaoServico}"/>
    </p:dialog>
    <p:dialog id="mostraObservacaoDialog" header="OBSERVAÇÃO DO SERVIÇO" widgetVar="mostraObservacao" 
              hideEffect="true" height="100" width="320"  modal="true" >
        <p:dataList value="#{consultaServico.servicoSelecionado}" var="servico" itemType="disc" 
                    rendered="#{not empty consultaServico.servicoSelecionado.observacao}"> #{servico.observacao}
        </p:dataList>
        <h:outputText value="Não Possui nenhuma Observação deste serviço." rendered="#{empty consultaServico.servicoSelecionado.observacao}"/>
    </p:dialog>

all these dialogs should stay out of your h:form, and, if some of these dialogs need to perform some action (Submit of a form), then the respective dialog should contain its own form.