Olá, faz algum tempo que o filter-navigator.v3 layout mobile apresenta um problema em todas as lojas que vi. Ao clicar no item do filtro o mesmo não pode ser desmarcado e nem pega os estilos que deveriam. Após selecionar e aplicar a primeira vez, aí o filtro fica normal. Creio que seja um problema que deve ser ajustado diretamente no componente.
@willian.sato Tudo certo?
Você já tentou o seguinte:
Aplicar um Ajuste via CSS Temporário
Se o problema for de estilo aplicado tardiamente, você pode forçar o CSS para corrigir o comportamento de exibição inicial:
.filter__container {
opacity: 1 !important;
visibility: visible !important;
transition: all 0.3s ease-in-out;
}
.filter__container input:checked + label {
background-color: #000; /* Ajuste para a cor desejada */
color: #fff;
}
Isso pode ajudar a garantir que os estilos do filtro sejam aplicados corretamente na primeira interação.
Ou
Sobrescrever o Comportamento via JavaScript
Se for um problema de evento do React, tente uma abordagem forçando a reativação dos eventos:
document.addEventListener("DOMContentLoaded", function () {
setTimeout(() => {
const filters = document.querySelectorAll(".filter__container input");
filters.forEach(filter => {
filter.addEventListener("change", () => {
document.body.classList.toggle("filter-updated");
});
});
}, 500);
});
Isso pode garantir que os eventos de clique sejam aplicados corretamente desde a primeira interação.
Tente fazer algum teste neste sentido.
Envie prints de evidência ou vídeos para dar uma melhor visualização do problema.
Abs,
Diretoria Four2One