Filter-navigator.v3 mobile com problema generalizado

[willian.sato]

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.

[four2one]

@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

[willian.sato]

Atualizando para quem precisar futuramente. Em chamado com a VTEX recomendaram a configuração de duas props específicas que resolveram o problema.

Sugestões de correção e contorno

1. Ativar atualização imediata no mobile (remove a dependência do botão “Filtrar”)

• Em search-result-layout.mobile, defina preventRouteChange como true.
• No bloco filter-navigator.v3, defina updateOnFilterSelectionOnMobile como true.
  Efeito esperado: ao tocar em um facet no mobile, a seleção/deseleção funciona imediatamente e os itens não ficam bloqueados aguardando o primeiro “Filtrar”.

Exemplo de props relevantes:

• search-result-layout.mobile props:
• preventRouteChange: true
• filter-navigator.v3 props:
• updateOnFilterSelectionOnMobile: true
• (opcional) navigationTypeOnMobile: “collapsible”
  Observação: updateOnFilterSelectionOnMobile só funciona se preventRouteChange estiver true.

2. Caso queira manter o botão “Filtrar”

• Ajuste navigationTypeOnMobile para “collapsible” no filter-navigator.v3. Em algumas versões, o modo “page” pode bloquear a interação até a primeira aplicação.
• Considere também fullWidthOnMobile: true para garantir o overlay completo e reduzir conflitos de clique.