Finsweet filter filtering automatically even though Submit button is visible

Hi I’m wondering if anyone else has run into this issue. I have a Finsweet CMS filter set up on my page. The filtering is all working fine. My issue is that even though a Submit button is present and visible on the page, the Collection List still filters automatically when I select a filtering option. So the page will refresh even before I click “Submit”.

I am hiding the Submit button on desktop, and showing on mobile. So I am having this issue with the mobile size. I have my filter options in a hidden div that is set to Position: Absolute once a trigger button is clicked. Once the overlay is triggered, I want it to stay visible the entire time the user is selecting filters, and then I’ve set an interaction on the Submit button so that the overlay will hide at the same time as the filters are applied. So because the filtering is happening even before the Submit button is clicked, the page refreshes and the overlay closes too soon.

Wondering if anyone has had a similar problem?

Unfortunately I am unable to share a read-only link as the project I’m working on is under NDA. :confused:

Hi Erin, I can only offer some notes;

  • The Finsweet+ forum is where you’d get the best results for Finsweet library issues. Well worth the price when you’re dealing with a sticky issue like this.
  • I’ve not tested a configuration where the button is visible at some breakpoints and not at others, and I don’t know how FS filter would handle that. I’d assumed the auto-submit behavior was determined and initialized at startup time, and not per-breakpoint.
  • Double-check that it’s a form submit button and not a regular button element
  • On mobile, your interaction trigger sounds unusual and I’m not clear how you’ve implemented that. You may do better to trigger the close on the submit button click.

Hi Michael thanks so much for your response!
I wan’t aware FS had a forum, so I will look into that.

  • Yes the FS CMS filter is set up by default so that if a Submit button is present, it will hold off on filtering until the user clicks the Submit button. Otherwise the content filters automatically as categories are selected. FS documentation says that you can show/hide the Submit button on different breakpoints. I tested showing the Submit button on the Desktop size as well and that worked correctly: none of the filters apply until the Submit button is clicked. So I’m thinking it must have something to do with hiding the content in the overlay on mobile. Like maybe the page doesn’t read that a Submit button exists on mobile because it’s hidden on initial load? This actually seems like it could be the problem…
  • Yes it is a form button
  • I do currently have it set up to close the overlay on the submit button click.
  • The trigger to open the overlay is just a regular button with an interaction applied.

WELL I got it to work! Thanks Michael, you mentioning initialization at start-up time jogged my brain a bit.
It’s because the Submit button is inside a hidden overlay on page load, so the Filter doesn’t recognize that it’s there even once the overlay is visible. So I’ve change the show/hide interaction on the overlay to be one for size instead, so I can “fake” hide/show it for the user, but the page can still see that it’s there. :partying_face:

1 Like