Hello, for some time now the filter-navigator.v3 mobile layout has been presenting an issue in all the stores I’ve seen. When clicking on a filter item, it cannot be unchecked and doesn’t pick up the styles it should. After selecting and applying it for the first time, the filter works normally. I believe this is a problem that needs to be fixed directly in the component.
@willian.sato How’s it going?
Have you already tried the following:
Applying a Temporary CSS Fix
If the issue is caused by styles being applied late, you can force the CSS to correct the initial display behavior:
.filter__container {
opacity: 1 !important;
visibility: visible !important;
transition: all 0.3s ease-in-out;
}
.filter__container input:checked + label {
background-color: #000; /* Adjust to the desired color */
color: #fff;
}
This can help ensure that the filter styles are applied correctly on the first interaction.
Or
Overriding the Behavior via JavaScript
If it’s a React event issue, try an approach that forces the events to reactivate:
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);
});
This can ensure that click events are applied correctly from the very first interaction.
Go ahead and run some tests along these lines.
Send screenshots or videos as evidence to give us a better view of the problem.
Cheers,
Four2One Management
Updating for anyone who might need this in the future. In a support ticket with VTEX, they recommended configuring two specific props that resolved the issue.
Suggested fixes and workarounds
- Enable immediate update on mobile (removes the dependency on the