Finsweet CMS Filter - Submit Button Issue

Attributes
,
1

Description

I have a CMS filter set up, with a submit button shown on mobile and hidden on desktop. The purpose of this is to have the auto filter on for desktop, but for mobile, the list should filter only on the button press. The problem is, the auto filter is on on both breakpoints. It also auto filters if I set the filter button to display:block on desktop.

Site URL

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

Steps to Reproduce

  1. On mobile, click on the “Filters” button in the top left.
  2. Activate any filter and you’ll see the list live filtering.
  3. There’s a filter button .filters_submit-button on the page, you can see it in the read-only.
    …

Expected Behavior

The list should have only filtered when I pressed the filter button.

Actual Behavior

The list auto filters.

Video/Screenshots

Required: Please provide a short screen recording showing the issue

Additional Context

  • Browser: [Safari, Chrome]
  • Device: [e.g., Desktop, iPhone 15 Pro

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

2

Hey @hunor!

Have you tried using the Custom Event Submit setting?

image
image1100Ă—720 22.1 KB

Just add fs-list-filteron=”submit” to your element with fs-list-element=”filters” and it will work right away!

Please make sure to use the Webflow element Form Button to submit your list.

Also, I highly recommend you to delete the CMS Filter’s previous attributes, as this could cause some confusion while working on your project.

Let me know how it goes!

3

Hi @Support-Pedro!

Thank you for the help. I want to keep the current instant filter for desktop, and only change it on mobile. How can I achieve that?

4

Sure!

Just remove the fs-list-filteron="submit" attribute from your form element. Then, add the script right before the closing </body> tag.

This script automatically detects when the screen is mobile or tablet (width ≤ 991px) and adds the fs-list-filteron="submit" attribute to your filter form. On larger screens (desktop), it removes that attribute so filtering works automatically as usual.

It also listens for screen size changes (like when resizing the browser) and updates the filter behavior dynamically by restarting Finsweet List Filter.

<script>
  window.FinsweetAttributes ||= [];
  window.FinsweetAttributes.push([
    'list',
    (listInstances) => {
      const filterForms = Array.from(document.querySelectorAll('[fs-list-element="filters"]'));
      const mql = window.matchMedia('(max-width: 991px)');
      const applyFilterMode = (evt) => {
        filterForms.forEach(form => {
          if (evt.matches) {
            form.setAttribute('fs-list-filteron', 'submit');
          } else {
            form.removeAttribute('fs-list-filteron');
          }
        });
        FinsweetAttributes.list.restart();
      };
      applyFilterMode(mql);
      mql.addListener(applyFilterMode);
    },
  ]);
</script>

Let me know how it goes!

5

Found a different solution in the meantime, but thank you!

1 Like