From d9d1a68f1b50e8d2331c7c033b8e1de8b3683757 Mon Sep 17 00:00:00 2001
From: Rodrigo Martins <rodrigo.sousa.577@gmail.com>
Date: Fri, 11 Apr 2025 21:21:26 -0300
Subject: [PATCH] Add CEP autocompletion by ViaCEP/ECT

Signed-off-by: Rodrigo Martins <rodrigo.sousa.577@gmail.com>
---
 src/components/clientes/ClienteModal.tsx | 57 +++++++++++++++++-------
 1 file changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/components/clientes/ClienteModal.tsx b/src/components/clientes/ClienteModal.tsx
index d0488a3..56c50ce 100644
--- a/src/components/clientes/ClienteModal.tsx
+++ b/src/components/clientes/ClienteModal.tsx
@@ -190,7 +190,7 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
   // Monitorar o valor do CEP para autopreenchimento
   const cepValue = watch("cep");
 
-  // Função para buscar dados do CEP
+  // Função para buscar dados do CEP - versão aprimorada
   const fetchAddressByCep = useCallback(async (cep: string) => {
     if (!cep || cep.length !== 8) return;
 
@@ -203,33 +203,58 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
 
       if (response.data && !response.data.erro) {
         // Preencher os campos do formulário com os dados retornados
-        setValue("endereco", response.data.logradouro);
-        setValue("bairro", response.data.bairro);
-        setValue("cidade", response.data.localidade);
-        setValue("estado", response.data.uf);
+        setValue("endereco", response.data.logradouro, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: true,
+        });
+        setValue("bairro", response.data.bairro, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: true,
+        });
+        setValue("cidade", response.data.localidade, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: true,
+        });
+        setValue("estado", response.data.uf, {
+          shouldDirty: true,
+          shouldTouch: true,
+          shouldValidate: true,
+        });
 
-        // Focar no campo número após o preenchimento automático
-        const numeroInput = document.querySelector(
-          'input[name="numero"]',
-        ) as HTMLInputElement;
-        if (numeroInput) numeroInput.focus();
+        // Adicione um pequeno atraso para garantir que a UI reflita as mudanças
+        setTimeout(() => {
+          // Focar no campo número após o preenchimento automático
+          const numeroInput = document.querySelector(
+            'input[name="numero"]',
+          ) as HTMLInputElement;
+          if (numeroInput) numeroInput.focus();
+        }, 100);
       } else {
         console.error("CEP não encontrado");
+        // Opcional: exibir uma notificação para o usuário
       }
     } catch (error) {
       console.error("Erro ao buscar CEP:", error);
+      // Opcional: exibir uma notificação de erro para o usuário
     } finally {
       setIsLoadingCep(false);
     }
   }, [setValue]);
 
-  // Efeito para monitorar mudanças no CEP
+  // Efeito para monitorar mudanças no CEP - versão mais robusta
   useEffect(() => {
-    // Verificar se o CEP tem 8 dígitos (sem formatação)
-    const cleanCep = cepValue?.replace(/\D/g, "");
-    if (cleanCep && cleanCep.length === 8) {
-      fetchAddressByCep(cleanCep);
-    }
+    // Implementar debounce para evitar múltiplas chamadas
+    const timer = setTimeout(() => {
+      const cleanCep = cepValue?.replace(/\D/g, "");
+      if (cleanCep && cleanCep.length === 8) {
+        fetchAddressByCep(cleanCep);
+      }
+    }, 300); // Debounce de 300ms
+
+    return () => clearTimeout(timer);
   }, [cepValue, fetchAddressByCep]);
 
   // Função para preencher o formulário com os dados do cliente