# Issue with CMS filter

**URL:** <https://forum.finsweet.com/t/issue-with-cms-filter/3339>\
**Category:** Attributes\
**Tags:** cmsfilter\
**Created:** [August 30, 2024, 10:38am UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339 "2024-08-30T10:38:50Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![sepels41](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/sepels41/32/1226_2.png) [@sepels41](https://forum.finsweet.com/u/sepels41)\
**Post date:** [August 30, 2024, 10:38am UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/1 "2024-08-30T10:38:50Z")

</div>

Hey I’m facing the issue with my CMS Filter, I recorded a video for you [Video](https://www.loom.com/share/a060217f76504d52a89c46df007920b1)  
[Preview link](https://preview.webflow.com/preview/webshareio?utm_medium=preview_link&utm_source=designer&utm_content=webshareio&preview=f8bedf4e8f4e5e6c32f08aaaf2f18248&pageId=66d19a156142a990d8802add&locale=en&workflow=preview)  
[Live link](https://webshareio.webflow.io/verified-sites/amazon-proxy)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 2, 2024, 9:58am UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/2 "2024-09-02T09:58:28Z")

</div>

hey @sepels41! The live page is now drafted, can you republish it so I can take a look?

---

<div class="post-metadata">

**Author:** ![sepels41](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/sepels41/32/1226_2.png) [@sepels41](https://forum.finsweet.com/u/sepels41)\
**Post date:** [September 6, 2024, 4:29pm UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/3 "2024-09-06T16:29:04Z")

</div>

@Support-Luis sure here

> **[Buy Verified Proxies - Latest Webshare Innovation](https://webshareio.webflow.io/verified-sites/amazon-proxy)**
>
> Scrape selected websites with \>99% success rate with datacenter proxies

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 6, 2024, 5:14pm UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/4 "2024-09-06T17:14:25Z")

</div>

Thank you! So this basically happens because you are essentially loading the list already filtered by having the Amazon radio checked on load by setting this attribute.

 ![Screenshot 2024-09-06 at 19.08.15](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/6/671845a9456f6fbac5d93c9e2dc6e8de2111556b.jpeg)

My suggestion is to change the filter from being a radio in a dropdown to a select and add a default option to show all the items on the list.

I added this button for testing purposes and you can see the whole list is rendered as it should on the page 🙂

 ![Screenshot 2024-09-06 at 19.13.53](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/3/340c8df8ad7d820c09d8a1001ca6ac75da853812.jpeg)

---

<div class="post-metadata">

**Author:** ![sepels41](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/sepels41/32/1226_2.png) [@sepels41](https://forum.finsweet.com/u/sepels41)\
**Post date:** [September 6, 2024, 5:22pm UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/5 "2024-09-06T17:22:21Z")

</div>

But I don’t need to see all options, I just need to see only amazon on initial load, but now on the initial load I see google and amazon together for some reason. and when I click on google after, it starts working perfectly, I had the same logic on another page and it works perfectly, here the [page](https://www.webshare.io/residential-proxy), instead of websites I’m using numbers.

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 6, 2024, 6:08pm UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/6 "2024-09-06T18:08:04Z")

</div>

I see now, thanks for the clarification. I am not sure why this would be happening for only one page.

I see the component is custom-made with div blocks and some extra code instead of a native dropdown or select. My suggestion of using a Select for the filter UI still stands here, but if you want me to, I can debug it as is.

Let me know what you think

---

<div class="post-metadata">

**Author:** ![sepels41](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/sepels41/32/1226_2.png) [@sepels41](https://forum.finsweet.com/u/sepels41)\
**Post date:** [September 6, 2024, 6:52pm UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/7 "2024-09-06T18:52:28Z")

</div>

I’m surprised the this is not working with this component, since I have the same logic on another page… and I don’t want. to create a different logic, since it’s not only on one page. If you can help me with existing component would be amazing, appreciate it !

---

<div class="post-metadata">

**Author:** ![sepels41](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/sepels41/32/1226_2.png) [@sepels41](https://forum.finsweet.com/u/sepels41)\
**Post date:** [September 10, 2024, 7:26pm UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/8 "2024-09-10T19:26:55Z")

</div>

@Support-Luis is it still doable? let me know please, thank you!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 11, 2024, 11:14am UTC](https://forum.finsweet.com/t/issue-with-cms-filter/3339/9 "2024-09-11T11:14:27Z")

</div>

hey @sepels41! I am afraid I can not find anything causing the behavior not to work on the Amazon Proxy page even with the same structure and code.

One thing we could try, that applies to both setups, is adding something like `$('.pricing-section-filter_item').first().click();`

I’ve been trying this snippet, same as before but wrapped in the CMS Filter API instead of the DOMContetLoaded, and it seems to work decently.

```js
 <script>
      // Dropdown Functionality

      window.fsAttributes = window.fsAttributes || [];
      window.fsAttributes.push([
        'cmsfilter',
        (filterInstances) => {
          console.log('cmsfilter Successfully loaded!');
          $('.pricing-section-filter_item').first().click(); // this clicks the first option

          //Finsweet Filter Interaction
          $('.pricing-section-filter_item').on('click', function () {
            $(this).find('.dropdown_toggle-text').addClass('is-active_count');
            $(this)
              .siblings('.pricing-section-filter_item')
              .find('.dropdown_toggle-text')
              .removeClass('is-active_count');
          });

          $('.filter_pricing_period').on('click', function () {
            $(this).find('.filter_period_txt').addClass('is-active_period');
            $(this)
              .siblings('.filter_pricing_period')
              .find('.filter_period_txt')
              .removeClass('is-active_period');
          });

          // DROPDOWN CODE
          // Open and Close of the Dropdown
          $('.filter_dropdown_wrap').on('mouseenter', function () {
            $(this).addClass('open-dropdown');
          });
          $('.filter_dropdown_wrap').on('mouseleave', function () {
            $(this).removeClass('open-dropdown');
          });
          $('.pricing-section-filter_item').on('click', function () {
            $(this).closest('.filter_dropdown_wrap').removeClass('open-dropdown');
          });
          $('.dropdown_toggle').on('click', function () {
            if ($(this).closest('.filter_dropdown_wrap').hasClass('open-dropdown')) {
              $(this).closest('.filter_dropdown_wrap').removeClass('open-dropdown');
            } else {
              $(this).closest('.filter_dropdown_wrap').addClass('open-dropdown');
            }
          });
          // Changing of active link
          $('.pricing-section-filter_item').on('click', function () {
            $(this).siblings('.pricing-section-filter_item.selected').removeClass('selected');
            $(this).addClass('selected');

            // get content of title
            let dropdownLinkText = $(this).find('.filter-count_txt').text();
            $(this)
              .closest('.filter_dropdown_wrap')
              .find('.filter-count_txt')
              .first()
              .text(dropdownLinkText);
            let dropdownSmallText = $(this).find('.filter-count_txt_small').text();
            $(this)
              .closest('.filter_dropdown_wrap')
              .find('.filter-count_txt_small')
              .first()
              .text(dropdownSmallText);
          });
        },
      ]);
    </script>

```

Let me know what you think or if you’d like to fo another route