# Input Counter + CMS Filter

**URL:** <https://forum.finsweet.com/t/input-counter-cms-filter/1963>\
**Category:** Attributes\
**Created:** [September 26, 2023, 7:59pm UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963 "2023-09-26T19:59:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![memetican](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/memetican/32/1019_2.png) [@memetican](https://forum.finsweet.com/u/memetican)\
**Post date:** [September 26, 2023, 7:59pm UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963/1 "2023-09-26T19:59:54Z")

</div>

I have a site using FS Input Counter with FS CMS Filter. Changing the input value manually filters well but using the **+** and **-** buttons doesn’t trigger filtering.

Is there a setting to make that happen?

[https://sail-luna.webflow.io/test](https://sail-luna.webflow.io/test)

---

<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 27, 2023, 9:50am UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963/2 "2023-09-27T09:50:32Z")

</div>

hey @memetican! Can you add this code to your page?

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'inputcounter',
    (counterInstances) => {
      console.log('inputcounter Successfully loaded!');

      const counterButtons = document.querySelectorAll('.fs_inputcounter-1_button');
      const counterValue = document.querySelector('.fs_inputcounter-1_input');

      counterButtons.forEach((button) => {
        button.addEventListener('click', () => {
          counterValue.dispatchEvent(new Event('input', { bubbles: true }));
        });
      });
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![memetican](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/memetican/32/1019_2.png) [@memetican](https://forum.finsweet.com/u/memetican)\
**Post date:** [September 27, 2023, 8:15pm UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963/3 "2023-09-27T20:15:50Z")

</div>

Thanks as always Luis! That works elegantly for responding to the increment/decrement changes.

We’ve found another issue that may or may not be related which is that the initial value set for the Input Counter ( of “2” ) isn’t applied as a default filter setting.

I tried the obvious fix which is to duplicate the `counterValue.dispatchEvent` code outside of the `forEach`, so that it executes once as soon as inputcounter is initialized. It’s not working though, I suspect because FS Filter may not be initialized at that point?

---

<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 28, 2023, 8:17am UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963/4 "2023-09-28T08:17:25Z")

</div>

Hey @memetican! The test page is now blank. Where could I find the component to test?

---

<div class="post-metadata">

**Author:** ![memetican](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/memetican/32/1019_2.png) [@memetican](https://forum.finsweet.com/u/memetican)\
**Post date:** [September 28, 2023, 5:34pm UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963/5 "2023-09-28T17:34:34Z")

</div>

I can see it fine, here- she might have been experimenting. Webflow also seems to be glitching today with 404s on staging.

[https://sail-luna.webflow.io/test](https://sail-luna.webflow.io/test)

---

<div class="post-metadata">

**Author:** ![memetican](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/memetican/32/1019_2.png) [@memetican](https://forum.finsweet.com/u/memetican)\
**Post date:** [September 30, 2023, 4:07am UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963/6 "2023-09-30T04:07:54Z")

</div>

Hi Luis any thoughts on how to best approach this one?

---

<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:** [October 2, 2023, 1:29pm UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963/7 "2023-10-02T13:29:04Z")

</div>

Hey @mwe! I am sorry for not getting back to you earlier!

This should fix the issue now, we are dispatching a new event to the value after CMS Filter is done loading and also adding the event listeners for the buttons as we did before:

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      const counterButtons = document.querySelectorAll('.fs_inputcounter-1_button');
      const counterValue = document.querySelector('.fs_inputcounter-1_input');

      counterValue.dispatchEvent(new Event('input', { bubbles: true }));

      counterButtons.forEach((button) => {
        button.addEventListener('click', () => {
          counterValue.dispatchEvent(new Event('input', { bubbles: true }));
        });
      });
    },
  ]);
</script>

```

---

<div class="post-metadata">

**Author:** ![memetican](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/memetican/32/1019_2.png) [@memetican](https://forum.finsweet.com/u/memetican)\
**Post date:** [October 2, 2023, 8:38pm UTC](https://forum.finsweet.com/t/input-counter-cms-filter/1963/8 "2023-10-02T20:38:23Z")

</div>

Thanks Luis! Works perfectly.