Add CEP autocompletion by ViaCEP/ECT

Signed-off-by: Rodrigo Martins <rodrigo.sousa.577@gmail.com>

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 - versão aprimorada
+  // Função para buscar dados do CEP - versão otimizada para forçar atualização da UI
   const fetchAddressByCep = useCallback(async (cep: string) => {
     if (!cep || cep.length !== 8) return;
 
@@ -202,57 +202,68 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
       );
 
       if (response.data && !response.data.erro) {
-        // Preencher os campos do formulário com os dados retornados
+        // Força atualização imediata dos campos com notificação de mudança
-        setValue("endereco", response.data.logradouro, {
+        setValue("endereco", response.data.logradouro || "", {
           shouldDirty: true,
           shouldTouch: true,
           shouldValidate: true,
         });
-        setValue("bairro", response.data.bairro, {
+        setValue("bairro", response.data.bairro || "", {
           shouldDirty: true,
           shouldTouch: true,
           shouldValidate: true,
         });
-        setValue("cidade", response.data.localidade, {
+        setValue("cidade", response.data.localidade || "", {
           shouldDirty: true,
           shouldTouch: true,
           shouldValidate: true,
         });
-        setValue("estado", response.data.uf, {
+        setValue("estado", response.data.uf || "", {
           shouldDirty: true,
           shouldTouch: true,
           shouldValidate: true,
         });
 
-        // Adicione um pequeno atraso para garantir que a UI reflita as mudanças
+        // Forçar atualização da UI - esta é a parte crucial
+        const event = new Event('input', { bubbles: true });
+        
+        // Disparar eventos nos campos para garantir atualização visual
+        ['endereco', 'bairro', 'cidade', 'estado'].forEach(field => {
+          const element = document.querySelector(`[name="${field}"]`) as HTMLInputElement;
+          if (element) {
+            element.dispatchEvent(event);
+          }
+        });
+
+        // Focar no campo número após o preenchimento automático
         setTimeout(() => {
-          // Focar no campo número após o preenchimento automático
           const numeroInput = document.querySelector(
-            'input[name="numero"]',
+            '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
+        // Notificar o usuário sobre o CEP não encontrado
+        alert("CEP não encontrado. Por favor, verifique o CEP informado.");
       }
     } catch (error) {
       console.error("Erro ao buscar CEP:", error);
-      // Opcional: exibir uma notificação de erro para o usuário
+      alert("Erro ao buscar informações do CEP. Por favor, tente novamente.");
     } finally {
       setIsLoadingCep(false);
     }
   }, [setValue]);
 
-  // Efeito para monitorar mudanças no CEP - versão mais robusta
+  // Efeito para monitorar mudanças no CEP com debounce otimizado
   useEffect(() => {
-    // Implementar debounce para evitar múltiplas chamadas
+    // Limpar qualquer timer existente
     const timer = setTimeout(() => {
       const cleanCep = cepValue?.replace(/\D/g, "");
       if (cleanCep && cleanCep.length === 8) {
         fetchAddressByCep(cleanCep);
       }
-    }, 300); // Debounce de 300ms
+    }, 200); // Reduzir debounce para resposta mais rápida
 
     return () => clearTimeout(timer);
   }, [cepValue, fetchAddressByCep]);