diff --git a/src/components/clientes/ClienteModal.tsx b/src/components/clientes/ClienteModal.tsx index 56c50ce..b8410ae 100644 --- a/src/components/clientes/ClienteModal.tsx +++ b/src/components/clientes/ClienteModal.tsx @@ -190,7 +190,7 @@ export const ClienteModal: React.FC = ({ // 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 = ({ ); if (response.data && !response.data.erro) { - // Preencher os campos do formulário com os dados retornados - setValue("endereco", response.data.logradouro, { + // Força atualização imediata dos campos com notificação de mudança + 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]);