Clear link not working on filters

Attributes
1

Description

Clear link is not working on filters. I don’t understand why.

Site URL

Required: Please provide a staging/production URL where we can see the issue

Additional Context

  • Browser: Chrome
  • Device: MacBook pro

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

2

Hi @geffroy.valentin! :waving_hand:

I noticed there is some custom code on your page affecting the fs-list-element="clear" element specifically this code

const clearElement = document.querySelector('[fs-list-element="clear"]');
const otherFilters = document.querySelectorAll('.blog_filter:not([fs-list-element="clear"])');

// 1. Par défaut, l'élément "clear" a la classe is-active
clearElement?.classList.add('is-active');

// 2. Écouter les clics sur les autres filtres
otherFilters.forEach((filter) => {
  filter.addEventListener('click', function () {
    // Retirer is-active de clear
    clearElement?.classList.remove('is-active');

    // Retirer is-active des autres filtres
    otherFilters.forEach((f) => f.classList.remove('is-active'));

    // Ajouter is-active au filtre cliqué
    this.classList.add('is-active');
  });
});

// 3. Gérer spécifiquement le clic sur clear
clearElement?.addEventListener('click', function (e) {
  e.preventDefault();
  e.stopPropagation();

  // Toujours retirer is-active des autres
  otherFilters.forEach((f) => f.classList.remove('is-active'));

  // Ajouter is-active à clear seulement s'il ne l'a pas
  if (!this.classList.contains('is-active')) {
    this.classList.add('is-active');
  }
});

It seems that these lines are preventing the filters from clearing properly

e.preventDefault();
e.stopPropagation();

Could you please remove them and test the setup again?

If you’re still having problems after that, please share a Loom video showing your setup so we can identify any other configuration issues.

@Support-Luis or @Support-Pedro can help if you need additional assistance with custom implementation.

3

Working!

Thanks a lot!

1 Like