Add CEP autocompletion by ViaCEP/ECT
Signed-off-by: Rodrigo Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
1 parent
33d9fe8688
commit
9742d62ba2
1 file changed
+13
-5
@@ -200,7 +200,7 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
|
|||||||
// Monitorar o valor do CEP para autopreenchimento
|
// Monitorar o valor do CEP para autopreenchimento
|
||||||
const cepValue = watch("cep");
|
const cepValue = watch("cep");
|
||||||
|
|
||||||
// Função para buscar dados do CEP - versão com gerenciamento de estados do componente
|
// Função para buscar dados do CEP - versão corrigida
|
||||||
const fetchAddressByCep = useCallback(async (cep: string) => {
|
const fetchAddressByCep = useCallback(async (cep: string) => {
|
||||||
if (!cep || cep.length !== 8) return;
|
if (!cep || cep.length !== 8) return;
|
||||||
|
|
||||||
@@ -213,7 +213,6 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
|
|||||||
|
|
||||||
if (response.data && !response.data.erro) {
|
if (response.data && !response.data.erro) {
|
||||||
// Usar estado local para garantir re-renderização imediata
|
// Usar estado local para garantir re-renderização imediata
|
||||||
// Forçar preenchimento dos campos e atualização da interface
|
|
||||||
const endereco = response.data.logradouro || "";
|
const endereco = response.data.logradouro || "";
|
||||||
const bairro = response.data.bairro || "";
|
const bairro = response.data.bairro || "";
|
||||||
const cidade = response.data.localidade || "";
|
const cidade = response.data.localidade || "";
|
||||||
@@ -225,8 +224,7 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
|
|||||||
setValue("cidade", cidade, { shouldValidate: true });
|
setValue("cidade", cidade, { shouldValidate: true });
|
||||||
setValue("estado", estado, { shouldValidate: true });
|
setValue("estado", estado, { shouldValidate: true });
|
||||||
|
|
||||||
// Garantir re-renderização do componente
|
// Atualizar o estado para re-renderização do componente
|
||||||
// Esta é a parte crucial: forçar o componente a re-renderizar com novo estado
|
|
||||||
setEnderecoState({
|
setEnderecoState({
|
||||||
endereco,
|
endereco,
|
||||||
bairro,
|
bairro,
|
||||||
@@ -235,13 +233,23 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
|
|||||||
preenchido: true,
|
preenchido: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
// Focar no próximo campo
|
// Focar no próximo campo apenas se o usuário não estiver digitando ativamente
|
||||||
|
// Esta alteração evita interromper o fluxo natural de preenchimento
|
||||||
|
const activeElement = document.activeElement;
|
||||||
|
const isUserTyping =
|
||||||
|
activeElement &&
|
||||||
|
(activeElement.tagName === 'INPUT' || activeElement.tagName === 'SELECT') &&
|
||||||
|
activeElement !== document.querySelector('input[name="cep"]');
|
||||||
|
|
||||||
|
// Só focar no campo número se o usuário não estiver digitando em outro campo
|
||||||
|
if (!isUserTyping) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
const numeroInput = document.querySelector(
|
const numeroInput = document.querySelector(
|
||||||
'input[name="numero"]'
|
'input[name="numero"]'
|
||||||
) as HTMLInputElement;
|
) as HTMLInputElement;
|
||||||
if (numeroInput) numeroInput.focus();
|
if (numeroInput) numeroInput.focus();
|
||||||
}, 100);
|
}, 100);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
console.error("CEP não encontrado");
|
console.error("CEP não encontrado");
|
||||||
alert("CEP não encontrado. Por favor, verifique o CEP informado.");
|
alert("CEP não encontrado. Por favor, verifique o CEP informado.");
|
||||||
|
|||||||
Reference in new issue
Block a user