Finsweet filter not working with select2 package

Design help CMS
1

Greetings,
I had a CMS collection list. i added all the steps to make a select filter and it was working fine.
But I wanted a searchable dropdown filter like shown below. so i made the same select dropdown to be a select2, which gives feasibility for searchable dropdown as mentioned in the basic usage of the select2 documentation .
After adding this code in body tag, the finsweet filter functionality is not working
finsweet filter link: CMS Filter for Webflow - No-code using Attributes
select2 documentation link: Basic usage | Select2 - The jQuery replacement for select boxes
implementation: https://dropdowns-testing.webflow.io/
body code:

<script async src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-cmsfilter@1/cmsfilter.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    $('#designation').select2();
});

</script>

image
image1362×304 17.1 KB

2

jQuery’s select2 is preventing the input events from bubbling. this causes cmsfilter to not catch them. after updating the code for select2 it is working

$(document).ready(function() {
                var $eventSelect = $("#designation")
                $eventSelect.select2()
                $eventSelect.on("select2:select", function(e) {
                    $eventSelect[0].dispatchEvent(new Event('input', { bubbles: true }));
                })
            })

source: finsweet CMS Filter not working along with select2 · Issue #58 · finsweet/fs-snippets · GitHub

2 Likes
3

Thanks for sharing, that’s so helpful for me!

4

Thanks @Chaitu for sharing your solution! It works excellently for a single selection. I was wondering, if you or anyone else in the community, knows how to make it work for multi selections.

If you need more context:

1 Like