Add CEP autocompletion by ViaCEP/ECT

Signed-off-by: Rodrigo Martins <rodrigo.sousa.577@gmail.com>
This commit is contained in:
rodrigo committed 2025-04-12 20:02:58 -03:00
1 parent 33d9fe8688
commit 9742d62ba2
1 file changed
+13 -5
+13 -5
View File
@@ -200,7 +200,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 com gerenciamento de estados do componente
// Função para buscar dados do CEP - versão corrigida
const fetchAddressByCep = useCallback(async (cep: string) => {
if (!cep || cep.length !== 8) return;
@@ -213,7 +213,6 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
if (response.data && !response.data.erro) {
// 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 bairro = response.data.bairro || "";
const cidade = response.data.localidade || "";
@@ -225,8 +224,7 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
setValue("cidade", cidade, { shouldValidate: true });
setValue("estado", estado, { shouldValidate: true });
// Garantir re-renderização do componente
// Esta é a parte crucial: forçar o componente a re-renderizar com novo estado
// Atualizar o estado para re-renderização do componente
setEnderecoState({
endereco,
bairro,
@@ -235,13 +233,23 @@ export const ClienteModal: React.FC<ClienteModalProps> = ({
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(() => {
const numeroInput = document.querySelector(
'input[name="numero"]'
) as HTMLInputElement;
if (numeroInput) numeroInput.focus();
}, 100);
}
} else {
console.error("CEP não encontrado");
alert("CEP não encontrado. Por favor, verifique o CEP informado.");