Mudar o Foco do Controle Primefaces [RESOLVIDO]

[jrfercar]

Boa tarde a todos!

Agora estou com a seguinte situação.

Tenho um componente <p:inputMask> que permite a digitação de um CEP. Após digitar um CEP válido, cadastrado no BD, o sistema verifica no MB a existência do logradouro, traz os dados do logradouro, exibe os campos referentes ao País, Estado, Cidade, Bairro, Nome do Logradouro, Complemento e Número da Residência. Após isto ele deveria enviar o foco (cursor) do campo CEP (<p:inputMask) para o campo número (><p:inputText). Porém, isto não está acontecendo, e até agora eu não sei por que?

O interessante é que eu setei os parâmetros tabindex dos componentes para que eles seguissem uma sequencia e, além disso, estou utilizando o componente ><p:focus>, mas não está adiantando.

Preciso muito da ajuda de vocês, para resolver isto.

Desde já deixo meus agradecimentos a todos.

Segue abaixo o código referente a este problema:

            <p:panel id="pnlEndereco" header="Endereço" >
                <h:panelGrid columns="3" cellpadding="3">
                    <h:outputLabel value="Código Postal " for="txtCep"/>
                    <p:inputMask id="txtCep" value="#{cadastroDePessoaBean.cep}" mask="99999-999" size="10" tabindex="5">
                        <p:ajax event="blur" listener="#{cadastroDePessoaBean.atualizaLogradouro}" update="pnlEndereco" />
                        <p:focus for="txtNumero" />
                    </p:inputMask>
                    <p:message for="txtCep" />
                    <h:outputLabel value="Logradouro" for="txtLogradouro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtLogradouro" value="#{cadastroDePessoaBean.logradouro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" />
                    <h:message for="txtLogradouro" />
                    <h:outputLabel value="Número" for="txtNumero" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <p:inputText id="txtNumero" value="#{cadastroDePessoaBean.endereco.numero}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="5">
                        <p:focus />
                    </p:inputText>
                    <p:message for="txtNumero" />
                    <h:outputLabel value="Complemento" for="txtComplemento" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <p:inputTextarea id="txtComplemento" value="#{cadastroDePessoaBean.endereco.complemento}" cols="80" rows="5" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="6"/>
                    <p:message for="txtComplemento" />
                    <h:outputLabel value="Bairro" for="txtBairro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtBairro" value="#{cadastroDePessoaBean.logradouro.bairro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtBairro" />
                    <h:outputLabel value="Cidade" for="txtCidade" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtCidade" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtCidade" />
                    <h:outputLabel value="Unidade Federativa" for="txtUF" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtUF" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtUF" />
                    <h:outputLabel value="País" for="txtPais" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtPais" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.pais.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtPais" />
                </h:panelGrid>
            </p:panel>

[ayslanms]

Olá jrfercar,

Não sei o <p:focus> funciona dessa maneira.

O que você poderia fazer é diretamente com javascript (jQuery no caso, já que ele vem embutido no primefaces):

<p:inputMask id="txtCep" value="#{cadastroDePessoaBean.cep}" mask="99999-999" size="10" tabindex="5">  
            <p:ajax event="blur" listener="#{cadastroDePessoaBean.atualizaLogradouro}" update="pnlEndereco" oncomplete="jQuery('#txtNumero').focus()"  />    
</p:inputMask>  

Se preferir não usar jQuery usa mesmo: document.getElementById(‘txtNumero’).focus()

[jrfercar]

Bom dia,

obrigado pela dica, ayslanms.

A dica funcionou legal, o foco vai para o campo em questão, porém constatei que após o foco ir para ele, ele é perdido.

O código ficou assim após a alteração.

<p:panel id="pnlEndereco" header="Endereço" >
                <h:panelGrid columns="3" cellpadding="3">
                    <h:outputLabel value="Código Postal " for="txtCep"/>
                    <p:inputMask id="txtCep" value="#{cadastroDePessoaBean.cep}" mask="99999-999" size="10" tabindex="5">
                        <p:ajax event="blur" listener="#{cadastroDePessoaBean.atualizaLogradouro}" update="pnlEndereco" oncomplete="document.getElementById('txtNumero').focus()" />
                    </p:inputMask>
                    <p:message for="txtCep" />
                    <h:outputLabel value="Logradouro" for="txtLogradouro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtLogradouro" value="#{cadastroDePessoaBean.logradouro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" />
                    <h:message for="txtLogradouro" />
                    <h:outputLabel value="Número" for="txtNumero"/>
                    <p:inputText id="txtNumero" value="#{cadastroDePessoaBean.numero}" readonly="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="5"/>
                    <p:message for="txtNumero" />
                    <h:outputLabel value="Complemento" for="txtComplemento" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <p:inputTextarea id="txtComplemento" value="#{cadastroDePessoaBean.endereco.complemento}" cols="80" rows="5" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="6"/>
                    <p:message for="txtComplemento" />
                    <h:outputLabel value="Bairro" for="txtBairro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtBairro" value="#{cadastroDePessoaBean.logradouro.bairro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtBairro" />
                    <h:outputLabel value="Cidade" for="txtCidade" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtCidade" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtCidade" />
                    <h:outputLabel value="Unidade Federativa" for="txtUF" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtUF" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtUF" />
                    <h:outputLabel value="País" for="txtPais" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtPais" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.pais.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtPais" />
                </h:panelGrid>
            </p:panel>

[jrfercar]

Galera,

Consegui resolver o problema.

O foco saia fora do controle porque na tag p:ajax eu estava mandando atualizar todo o p:panel, desta forma atualizando todo o panel, inclusive os focos nos controles que estavam contidos nele.
Para resolver o problema eu separei o painel em duas partes, uma que contêm o campo CEP e o número, que estão contidos em um h:panelGrid com o nome de pnlCEP e outro com o nome pnlLogradouro.

Quando saio do controle txtCep ele atualiza apenas o pnlLogradouro. Percebam que o painel que contém o txtNumero não é atualizado, deixando o foco naturalmente nele.

Valeu pela ajuda.

Segue o código após a resolução do problema abaixo.

            <p:panel id="pnlEndereco" header="Endereço" >
                <h:panelGrid id="pnlCep" columns="5" cellpadding="5">
                    <h:outputLabel value="Código Postal " for="txtCep"/>
                    <p:inputMask id="txtCep" value="#{cadastroDePessoaBean.cep}" mask="99999-999" size="10" tabindex="5">
                        <p:ajax event="blur" listener="#{cadastroDePessoaBean.atualizaLogradouro}" update="pnlLogradouro pnlLogradouro1" />
                    </p:inputMask>
                    <h:outputLabel value="Número" for="txtNumero"/>
                    <p:inputText id="txtNumero" value="#{cadastroDePessoaBean.numero}" readonly="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="5"/>
                    <p:message for="txtCep" />
                </h:panelGrid>
                <p:separator />
                <h:panelGrid id="pnlLogradouro" columns="3" cellpadding="3" >
                    <h:outputLabel value="Logradouro" for="txtLogradouro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtLogradouro" value="#{cadastroDePessoaBean.logradouro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" />
                    <h:message for="txtLogradouro" />
                    <h:outputLabel value="Complemento" for="txtComplemento" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <p:inputTextarea id="txtComplemento" value="#{cadastroDePessoaBean.endereco.complemento}" cols="80" rows="5" rendered="#{cadastroDePessoaBean.renderizarLogradouro}" tabindex="6"/>
                    <p:message for="txtComplemento" />
                    <h:outputLabel value="Bairro" for="txtBairro" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtBairro" value="#{cadastroDePessoaBean.logradouro.bairro.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtBairro" />
                    <h:outputLabel value="Cidade" for="txtCidade" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtCidade" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtCidade" />
                    <h:outputLabel value="Unidade Federativa" for="txtUF" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtUF" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtUF" />
                    <h:outputLabel value="País" for="txtPais" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:outputText id="txtPais" value="#{cadastroDePessoaBean.logradouro.bairro.cidade.unidadeFederativa.pais.nome}" rendered="#{cadastroDePessoaBean.renderizarLogradouro}"/>
                    <h:message for="txtPais" />
                </h:panelGrid>
            </p:panel>

[joaopaulotds]

Passei por situação semelhante a de jrfercar, e a solução também serviu para mim. Agradeço pelo compartilhamento.